javascript - dc 传单 - 动态标记

Question

我有一个用 leaflet 构建的 map 和 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 中查找此类:

Usage example

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]
});

假设我们要为保加利亚的所有太阳能装置展示八 Angular 猫。

首先，我们需要更改缩减以保留原始数据行中的 type 字段。这有点痛苦，但这是我们为 crossfilter 为我们提供的自动减少和过滤功能付出的代价:

  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};
      })

现在我们可以将 octocats 放在我们在简化数据中看到类型为 solar 的任何地方。有很多，所以让我们以 20x20 像素显示它们:

      .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.