1

I have to create a non-default markerCluster color. I have checked the API and it seems that they suggest modifying a divIcon after creation (I believe, I am learning Leaflet, ui-leaflet, MarkerCluster all at the same time) to something like this:

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

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

The way I was populating data was on creation, something closer to this:

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"
                },

which I kinda stole from a similar (and forked break off) site: https://github.com/tombatossals/angular-leaflet-directive/blob/master/examples/0216-layers-overlays-markercluster-example.html I was attempting to add an icon property with separate colors to no avail. I am attempting to change the color when multiple types are clustered together. Any help would be appreciated.

Thanks in advance.

4

1 回答 1

0

所以最大的问题是我对如何使用 divIcon 的理解是有缺陷的。我假设我需要在实例化后更改颜色，这是不正确的。只需将代码添加到我的初始服务中就很简单了：

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

                    }
                }

我没有意识到他们提供的 api 功能实际上只是在修改已经存在的对象（更准确地说是更改对象的实例化）。如果你想实例化它，只需要在这个layerOptions键下添加变量名，然后在API上找到变量即可。

于 2017-01-27T17:59:57.780 回答