Question

我有一张用leaflet和dc.js构建并集成了dc.leaflet的地图。

如果数据通过PHP馈送到JSON，则所有内容都会显示和过滤，不会出现问题。根据数据的不同，标记的数量是可变的，但是一次大约40-50，而每个标记都显示标准的默认标记。

我想做的是根据数据字段显示一个不同的标记，因此大约有6个可用标记。

这是DC对象：

var markerMap = dc_leaflet.markerChart(".map",group1)
    .dimension(mapDim)
    .group(mapDimGroup)
    .width(450)
    .height(630)
    .center([41.08763212467916, -77.37066651228817])
    .zoom(10)
    .cluster(false) //Turn off Clustering 
    .valueAccessor(function(kv) {return kv.value.count;})
    .locationAccessor(function(kv) {return kv.value.geo;})
    .popup(function(kv) {return kv.key;})

根据文档，我应该可以使用 .icon() ，但这似乎不起作用。

例如

if d.icon = 'icon1' then icon1.png

等...

有人有添加动态图标的经验吗？

欢呼

Answer 1

它有效-只是Leaflet希望看到自己的图标类而不是原始URL。

在dc.leaflet.js的源代码中，默认图标如下所示：

var _icon = function(d, map) {
    return new L.Icon.Default();
};

在the Leaflet documentation中查找此类：

用法示例

var myIcon = L.icon({
    iconUrl: 'my-icon.png',
    iconSize: [38, 95],
    iconAnchor: [22, 94],
    popupAnchor: [-3, -76],
    shadowUrl: 'my-icon-shadow.png',
    shadowSize: [68, 95],
    shadowAnchor: [22, 94]
});

假设我们要显示保加利亚所有太阳能装置的八角形。

首先，我们需要更改减少量，以保留原始数据行中的type字段。这有点痛苦，但是交叉过滤器为我们提供了很好的自动归约和过滤功能，我们为此付出了代价：

  var facilitiesGroup = facilities.group().reduce(
      function(p, v) {
          p.count++;
          p.type = v.type;
          return p;
      },
      function(p, v) {
          p.count--;
          return p;
      },
      function() {
          return {count: 0, type: null};
      })

现在，我们可以在经过简化的数据中将八角形图放置在任何太阳类型的地方。有很多，所以让我们以20x20px的像素显示它们：

      .icon(function(kv) {
          if(kv.value.type === 'solar')
              return L.icon({
              iconSize: [20, 20],
              iconUrl: 'https://dc-js.github.io/dc.leaflet.js/GitHub-Mark-64px.png'});
          else return new L.Icon.Default();
      })

是的！我们已经占领了保加利亚！

Example fiddle.

直流宣传单-动态标记

1 个答案: