基于内部图标的传单簇颜色 [英] Leaflet cluster color based on icons inside

问题描述

我在leaflet.js地图上有一些图钉，这些图钉是由它们所代表的对象的状态确定的.例如，在线和离线用户-在线为绿色，离线为红色.为此，我向divIcon添加了一个类，然后使用CSS控制图像.

I have pins on my leaflet.js map where the image is determined by the status of the object they are representing. For example, online and offline users - online are green and offline are red. I do this by adding a class to the divIcon and then control the images with css.

我现在已将标记聚类添加到地图中.我要做的是根据群集中状态的多数来确定群集的颜色.我的第一个想法是做这样的事情:

I have now added marker clustering to my map. What I want to do is determine the color of the cluster by the majority of status' within the cluster. My first idea was to do something like this:

this.markers = L.markerClusterGroup({
    iconCreateFunction: function(cluster) {
        // Use this somehow to filter through and look at the pin elements
        console.log(cluster.getAllChildMarkers());

        return new L.DivIcon({ html: /* ?? */ });
    }
});

但是不幸的是，我无法从getAllChildMarkers返回的数组中访问HTML元素.

But unfortunately I am not able to access the HTML elements from the array returned from getAllChildMarkers.

任何人都对我如何做到这一点有任何想法?还是获取图钉的HTML元素的方法?

Anyone have any ideas on how I might be able to do this? Or a way to get the pin's HTML element?

谢谢

在这里创建我的地图图钉(分配给骨干模型的mapPin属性):

Here is where I create my map pins (assigned to my backbone model's mapPin attribute):

that.mapPins.org = L.divIcon({
className: 'org-div-icon',
    html: "<div class='org-status "+ org.getGroupStatus() +"'></div>",
    iconSize: [35, 35],
    iconAnchor: [18, 17]
});

这是我动态更改类的方法:

And here is how I change the class dynamically:

$(model.get('mapPin')._icon).find('.org-status').attr('class', 'org-status ' + model.getGroupStatus());

我认为我可以像上面一样从getAllChildMarkers的返回位置访问_icon，但是似乎不存在.

I thought that I would be able to access _icon from the return of getAllChildMarkers like I do above, but it doesn't seem to be there.

推荐答案

您可以使用getAllChildMarkers获取群集中的所有标记.有了标记后，您可以使用marker.options.icon.options.className访问其类.您可以使用marker.options.icon.options.html

You can use getAllChildMarkers to get all of the markers in the cluster. Once you have a marker, you can access its class with marker.options.icon.options.className. You can access the html with marker.options.icon.options.html

这里有一些代码使用underscore.js函数来计算每个类中标记的数量，找到最受欢迎的标记，并将该类用作聚类标记.

Here's some code that uses underscore.js functions to count the number of markers with each class, find the one that's most popular, and use that class for the cluster marker.

var markers = L.markerClusterGroup({
  iconCreateFunction: function (cluster) {
    var childMarkers = cluster.getAllChildMarkers();
    // count how many there are of each class
    var counts = _.countBy(childMarkers, function(marker) {
      // class at icon level
      //return marker.options.icon.options.className;
      // class inside html
      return $(marker.options.icon.options.html).attr('class');
    });
    // get the class with the highest count
    var maxClass = _.invert(counts)[_.max(counts)];
    // use this class in the cluster marker
    return L.divIcon({ html: cluster.getChildCount(), className: maxClass });
  },
});

这篇关于基于内部图标的传单簇颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！