Как использовать ui-leaflet и Markercluster для изменения цвета маркерного кластера?

Мне нужно создать цвет markerCluster не по умолчанию. Я проверил API, и кажется, что они предлагают изменить divIcon после создания (я полагаю, что одновременно изучаю Leaflet, ui-leaflet, MarkerCluster) примерно так:

var markers = L.markerClusterGroup({
iconCreateFunction: function(cluster) {
    return L.divIcon({ html: '<b>' + cluster.getChildCount() + '</b>' });
}
});

https://github.com/Leaflet/Leaflet.markercluster

То, как я заполнял данные, было при создании, что-то близкое к этому:

layers: {
                baselayers: {
                    osm: {
                        name: 'OpenStreetMap',
                        type: 'xyz',
                        url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                        layerOptions: {
                            subdomains: ['a', 'b', 'c'],
                            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                            continuousWorld: true
                        }
                    },
                    cycle: {
                        name: 'OpenCycleMap',
                        type: 'xyz',
                        url: 'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',
                        layerOptions: {
                            subdomains: ['a', 'b', 'c'],
                            attribution: '&copy; <a href="http://www.opencyclemap.org/copyright">OpenCycleMap</a> contributors - &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                            continuousWorld: true
                        }
                    }
                },
                overlays: {
                    hillshade: {
                        name: 'Hillshade Europa',
                        type: 'wms',
                        url: 'http://129.206.228.72/cached/hillshade',
                        visible: true,
                        layerOptions: {
                            layers: 'europe_wms:hs_srtm_europa',
                            format: 'image/png',
                            opacity: 0.25,
                            attribution: 'Hillshade layer by GIScience http://www.osm-wms.de',
                            crs: L.CRS.EPSG900913
                        }
                    },
                    cars: {
                        name: 'Cars',
                        type: 'markercluster',
                        visible: true
                    }
                }
            },
            markers: {
                m1: {
                    lat: 42.20133,
                    lng: 2.19110,
                    layer: 'cars',
                    message: "I'm a moving car"
                },

который я как бы украл с аналогичного (и разветвленного) сайта: example.html" rel="nofollow noreferrer">https://github.com/tombatossals/angular-leaflet-directive/blob/master/examples/0216-layers-overlays-markercluster-example.html я был попытка добавить свойство значка с отдельными цветами безрезультатно. Я пытаюсь изменить цвет, когда несколько типов сгруппированы вместе. Любая помощь будет оценена по достоинству.

Заранее спасибо.


javascript angularjs leaflet leaflet.markercluster ui-leaflet
person jsNoob    schedule 30.12.2016    source источник
comment
Можете ли вы создать скрипку для вашего случая?   -  person muzaffar    schedule 02.01.2017
comment
Извините, @muzaffar, я не могу. Это проблема собственности. Я рассмотрю общий пример, но это может занять некоторое время. Спасибо за ответ.   -  person jsNoob    schedule 04.01.2017

Ответы (1)


arrow_upward
0
arrow_downward

Так что большая проблема заключалась в том, что мое понимание того, как использовать divIcon, было ошибочным. Я предположил, что мне нужно изменить цвет после создания экземпляра, что неверно. Было просто добавить код в мой первоначальный сервис:

               cars: {
                    name: 'Cars',
                    type: 'markercluster',
                    visible: true,
                    layerOptions:{
                          iconCreateFunction: function(cluster) {
                                return L.divIcon({ html: '<b>' +cluster.getChildCount() + '</b>' });

                    }
                }

Я не понял, что функциональность API, которую они предоставили, на самом деле просто модифицировала уже существующий объект (точнее, изменяя экземпляр объекта). Если вы хотите его создать, имена переменных нужно просто добавить под этим ключом layerOptions и просто найти переменную в API.

person jsNoob    schedule 27.01.2017