Leaflet geojson 图层，每个功能都有自定义的 divIcon答案

【问题标题】：Leaflet geojson layer with customized divIcon for each featureLeaflet geojson 图层，每个功能都有自定义的 divIcon
【发布时间】：2017-04-04 08:17:18
【问题描述】：

我正在尝试为传单 geoJson 图层上的每个点设置不同的 divIcon。我已经在阳光下尝试了一切，但它对我不起作用。这就是我正在做的事情

geoJsonLayer = L.geoJson(null, {
  pointToLayer: function(feature, latlng) {
    var smallIcon = L.DivIcon.extend({
      options: {
        iconSize: [27, 27],
        html: "<div>" + feature.properties.FEATURE_STYLE.SVG_ELEMENT + "</div>"
      }
    });
    return L.marker(latlng, {icon: new smallIcon()});
  },      
  style: getLayerStyle,
  onEachFeature: setFeatureProperties,
});
geoJsonLayer.addTo(baseMap);

feature.properties.FEATURE_STYLE.SVG_ELEMENT 是一个包含图标的 html <svg>。

图标显示正常，但是每个功能都显示相同的图标。

我也尝试过以下操作：

在每个功能的 iconUrl 中使用具有不同 .png 的 L.Icon
为每个特征使用不同颜色的 L.circleMarker

它们都按预期工作（每个功能的颜色/图标不同）。但我似乎无法让 divIcon 为每个功能以不同方式显示。

有人知道为什么会这样吗？

提前致谢。

更新：

This is what feature.properties.FEATURE_STYLE.SVG_ELEMENT looks like

【问题讨论】：

请在您的问题正文中包含一个仍然重现问题的小代码（如您的 SVG）。见MCVE。
我正在使用的 svg 在上面的 pastebin 链接中：“这就是 feature.properties.FEATURE_STYLE.SVG_ELEMENT 的样子”。包含在代码标签中对我来说太长了。谢谢。
考虑重构您的 SVG 以获得仍然重现您的问题的最小值。我相信您这样做可能会发现一些事情。

标签： svg leaflet geojson

【解决方案1】：

您用于实例化新 L.divIcon 的代码比实际需要的要复杂，但它可以工作，不考虑 SVG 部分：

https://jsfiddle.net/3v7hd2vx/236/

话虽如此，请注意：

style 选项用于矢量图层。因此，对于呈现为L.divIcon 的Point 功能，它不会被使用。
onEachFeature 选项在pointToLayer 之后应用，因为需要后者来创建提供给onEachFeature 的layer。因此，如果您在其中构建 feature.properties.FEATURE_STYLE.SVG_ELEMENT（正如您的函数名称 setFeatureProperties 所暗示的那样），那就太晚了。

如果您需要进一步的帮助，您很可能需要共享更多代码，例如style 和 onEachFeature 选项，以及一些示例数据，尤其是 feature.properties.FEATURE_STYLE.SVG_ELEMENT。

【讨论】：

感谢您的快速回复。样式只是设置默认大小、颜色、不透明度，以防我们不使用图标作为标记。我们使用 onEachFeature 绑定弹出和工具提示，它不控制那里的任何标记。我已将一个示例更新为上面的 SVG_ELEMENT。问题是当我使用 L.icon 并传入一个 .png 图像时，它工作正常。但是 L.divIcon 会更新地图上已经存在的每个标记。