通过内部标记为簇着色

Question

我想知道如何根据其中的图标为簇着色。

我的数据：

remorque       time.stamp      lat      long geolocalisation maintenance temperature appairage
1        21/11/2017 10:36 48.86272 2.2875920          OnMouv        noir                      
2        21/11/2017 10:36 43.60776 1.4421606       StartMouv                   rouge          
3        21/11/2017 10:36 46.58619 0.3388710          OnMouv                   rouge          
4        21/11/2017 10:36 45.76695 3.0556216            Life                  orange          
5        21/11/2017 10:36 45.14555 1.4751652         EndMouv                             rouge
6        21/11/2017 10:36 46.81157 1.6936336            Life                  orange          
7        21/11/2017 10:36 47.36223 0.6751146          alerte                             rouge
8        21/11/2017 10:36 47.36032 1.7441244       StartMouv                                  
9        21/11/2017 10:36 48.85333 1.8215332       StartMouv                                  
10       21/11/2017 10:36 48.84429 1.7913208          alerte                                  
11       21/11/2017 10:36 48.81356 1.6759643         EndMouv

示例：

如果我的集群中有一个图标，且 appairage = rouge，则该集群的颜色应为红色。

如果没有红色图标，如果我的集群中有一个图标，温度=橙色，则集群的颜色应该是橙色。

...每个变量（温度、设备、维护）。如果簇中的所有图标的变量都正常，则簇应该是绿色的。

我的地图看起来像：

我在互联网上找到了一种改变簇着色范围的方法。但我不想根据簇中的标记数量进行着色。

Answer 1

可以根据聚集在一起的图标的属性为聚集的图标着色。最简单的方法可能是使用 htmlwidgets 并在地图渲染上调用 javascript 函数。

但是，在访问 htmlwidget 之前，您需要为集群层设置 clusterId：

addAwesomeMarkers(clusterId = "cluster" ...

现在我们可以在 htmlwidget 中找到这一层：

function(el, x) {
  map = this;  // the map object
  var cluster = map.layerManager.getLayer('cluster','cluster'); // the cluster layer

在集群层中，我们要为图标属性创建一个函数

iconCreateFunction

：

cluster.options.iconCreateFunction = function(d) {
    // generate icon
}

这个功能应该：

遍历由聚集标记表示的所有子标记，
确定这些子标记的最高排名
返回合适的图标

1。迭代子标记

对于第一点，在上面的基础上，我们可以使用以下方法迭代每个子标记：

cluster.options.iconCreateFunction = function(c) {
    var markers = c.getAllChildMarkers();
    markers.forEach(function(m) {
       // do something for each marker
    })
}

我使用

表示集群，
m
表示每个单独的子标记

2。获得最高排名的标记

列表中的主要挑战是确定子图标的最高排名 - 由于数据未绑定到图标，因此我们的选项有限。假设图标的颜色对应于数据框中项目的颜色代码，我将使用图标的颜色来确定其优先级/排名。确定排名最高的孩子后，我将根据该孩子的排名为集群着色。

我将按如下方式为簇着色（因为我相信这是您想要的结果）：

如果任何子图标为红色，则为红色，
如果没有红色，但有一些橙色的孩子，则为橙色，并且
如果没有橙色或红色的孩子，则为绿色。

要获取颜色，我需要访问正确的属性。（很棒的）标记的颜色（填充）位于：

marker.options.icon.options.markerColor

为了比较颜色，我将使用一个对象来表示每种颜色的排名，这将允许对颜色进行简单的比较：

var priority = {
  'green':0,
  'orange':1,
  'red':2
}

这允许：

cluster.options.iconCreateFunction = function(c) {
  var markers = c.getAllChildMarkers();
  var priority = {
    'green': 0,
    'orange': 1,
    'red': 2
  };
  var highestRank = 0; // defaults to the lowest level to start

  markers.forEach(function(m) {
    var color = m.options.icon.options.markerColor;
    
    // check each marker to see if it is the highest value
    if(priority[color] > highestRank) {
      highestRank = priority[color];  
    }                      
  })
}

3.返回图标

现在我们有了代表颜色的值，我们可以返回一个图标。传单簇状图标的样式选项有限。他们使用

L.divIcon()

，这在一定程度上限制了选项。当与集群标签的 css 样式结合使用时，它们会创建带有绿色、黄色和橙色的熟悉的圆圈。

这些默认样式具有以下 css 类：

.marker-cluster-small // green
.marker-cluster-medium  // yellow
.marker-cluster-large // orange

如果我们对使用这些类感到满意，我们可以用最少的努力来设计聚集多边形的样式：

var styles = [
    'marker-cluster-small', // green
    'marker-cluster-medium',  // yellow
    'marker-cluster-large' // orange
]

var style = styles[highestRank];
var count = markers.length;

return L.divIcon({ html: '<div><span>'+count+'</span></div>', className: 'marker-cluster ' + style, iconSize: new L.Point(40, 40) });

整个小部件看起来像：

function(el,x) {
  map = this;  
  var cluster = map.layerManager.getLayer('cluster','cluster'); 
  cluster.options.iconCreateFunction = function(c) {
    var markers = c.getAllChildMarkers();
    var priority = {
      'green': 0,
      'orange': 1,
      'red': 2
    };
    var highestRank = 0; // defaults to the lowest level to start

    markers.forEach(function(m) {
      var color = m.options.icon.options.markerColor;
    
      // check each marker to see if it is the highest value
      if(priority[color] > highestRank) {
        highestRank = priority[color];  
      }                      
    })

    var styles = [
      'marker-cluster-small', // green
      'marker-cluster-medium',  // yellow
      'marker-cluster-large' // orange
    ]

    var style = styles[highestRank];
    var count = markers.length;

    return L.divIcon({ html: '<div><span>'+count+'</span></div>', className: 'marker-cluster ' + style, iconSize: new L.Point(40, 40) });
  }
}

完善图标

改变颜色

您可能希望高优先级图标显示为红色。这是可以做到的，但是你需要在你的地图中添加 css 样式。

在更改上面的图标功能的同时执行此操作的一种方法是使用小部件中的 javascript 将样式附加到页面。你需要制作两种样式，一种用于持有图标的div，另一种用于图标，你可以同时完成两种样式：

var style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = '.red, .red div { background-color: rgba(255,0,0,0.6); }'; // set both at the same time
  document.getElementsByTagName('head')[0].appendChild(style);

（来自https://stackoverflow.com/a/1720483/7106086）

不要忘记更新您在样式数组中使用的类：

    var styles = [
      'marker-cluster-small', // green
      'marker-cluster-medium',  // yellow
      'red' // red
    ]

在图标中显示更多信息

您不限于图标中的数字，您可以显示 1-3-5 ，代表一个高优先级，三个中等优先级等。您只需要跟踪每个集群中每个优先级有多少个子图标：

var children = [0,0,0];
markers.forEach(function(m) {
  var color = m.options.icon.options.markerColor;
  children[priority[color]]++; // increment the appropriate value in the children array.
  ...

然后显示它：

return L.divIcon({ html: '<div><span>'+children.reverse()+'</span>...

给予类似的东西：

测试示例

这应该是可复制和粘贴的，以显示除图标中的附加文本之外的所有内容（使用这些文档示例中的代码作为基础）：

library(leaflet)
    
# first 20 quakes
df.20 <- quakes[1:50,]

getColor <- function(quakes) {
  sapply(quakes$mag, function(mag) {
    if(mag <= 4) {
      "green"
    } else if(mag <= 5) {
      "orange"
    } else {
      "red"
    } })
}

icons <- awesomeIcons(
  icon = 'ios-close',
  iconColor = 'black',
  library = 'ion',
  markerColor = getColor(df.20)
)

leaflet(df.20) %>% addTiles() %>%
  addAwesomeMarkers(~long, ~lat, icon=icons, label=~as.character(mag), clusterOptions = markerClusterOptions(), group = "clustered", clusterId = "cluster") %>%
  htmlwidgets::onRender("function(el,x) {
  map = this;  
  
  var style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = '.red, .red div { background-color: rgba(255,0,0,0.6); }'; // set both at the same time
  document.getElementsByTagName('head')[0].appendChild(style);


  var cluster = map.layerManager.getLayer('cluster','cluster'); 
  cluster.options.iconCreateFunction = function(c) {
    var markers = c.getAllChildMarkers();
    var priority = {
     'green': 0,
     'orange': 1,
     'red': 2
    };
    var highestRank = 0; // defaults to the lowest level to start
                        
    markers.forEach(function(m) {
    var color = m.options.icon.options.markerColor;
                        
    // check each marker to see if it is the highest value
    if(priority[color] > highestRank) {
       highestRank = priority[color];  
     }                      
  })
                        
  var styles = [
    'marker-cluster-small', // green
    'marker-cluster-large',  // orange
    'red' // red
  ]
                        
  var style = styles[highestRank];
  var count = markers.length;
                        
   return L.divIcon({ html: '<div><span>'+count+'</span></div>', className: 'marker-cluster ' + style, iconSize: new L.Point(40, 40) });
 }
}")

Answer 2

您现在还可以使用

iconCreateFunction

中的

markerClusterOptions

。确保在

markerOptions

中传递要用于着色的变量。

另请参阅：leaflet R，如何制作与儿童统计相关的聚集图标？

一个例子是：

legend_pal <- hcl.colors(10, palette='Spectral', rev = T)

leaflet(quakes) %>% addTiles() %>% addMarkers(
  options = markerOptions(mag = ~mag),
  clusterOptions = markerClusterOptions(
    iconCreateFunction=~JS(paste0("function (cluster) {    
                          var markers = cluster.getAllChildMarkers();
                          var sum = 0; 
                          for (i = 0; i < markers.length; i++) {
                            sum += Number(markers[i].options.mag);
                          }
                          var palette = ['", paste0(legend_pal, collapse="','"),"'];
                          var domain = [", paste0(sort(unique(na.omit(mag))), collapse=','),"];

                          var count = markers.length;
                          var avg = sum/count;
                          c = palette[Math.round(palette.length*(avg-Math.min(...domain))/(Math.max(...domain) - Math.min(...domain)))];


                          return L.divIcon({ 
                            html: '<div style=\"background-color:'+c+'\"><span>'+avg+'</span></div>', 
                            className: 'marker-cluster', 
                            iconSize: new L.Point(40, 40) });
                          }")))) %>% 
  addLegend(pal=colorNumeric(
    palette = legend_pal,
    domain = quakes$mag,
    na.color = 'transparent'), values = ~mag)

通过内部标记为簇着色

问题描述投票：0回答：2

2个回答

完善图标

最新问题

通过内部标记为簇着色

问题描述 投票：0回答：2

2个回答

完善图标

最新问题

问题描述投票：0回答：2