爲每個功能提供定製divIcon的傳單geojson圖層

我試圖爲傳單geoJson圖層上的每個點設置不同的divIcon。我已經在太陽下嘗試過所有的東西，但它對我來說不起作用。這是我在做什麼爲每個功能提供定製divIcon的傳單geojson圖層

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

圖標顯示正常，但是每個功能都顯示相同的圖標。

我也試着做以下幾點：

使用L.Icon不同巴紐在iconUrl的每個功能使用L.circleMarker用不同的顏色爲每個
功能

它們都按預期工作（每個功能不同的顏色/圖標）。但我似乎無法讓divIcon爲每個功能顯示不同的內容。

任何人都知道爲什麼會出現這種情況？

在此先感謝。

UPDATE：

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

來源

2017-04-03 TaraC

請在您的問題的正文中包含仍然重現問題的小代碼（如您的SVG）。請參閱[MCVE]（https://stackoverflow.com/help/mcve）。 – ghybs

我正在使用的svg位於上面的pastebin鏈接中：「這是feature.properties.FEATURE_STYLE.SVG_ELEMENT的外觀」。包含在代碼標籤中對我來說太長了。謝謝。 – TaraC

考慮重構您的SVG，以獲得仍能再現問題的最小值。我相信你可以通過這樣做來發現事情。 – ghybs

您的代碼實例化一個新的L.divIcon比真的有必要更復雜，但它的工作原理，在不考慮SVG部分：

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

這是說，請注意：

style選項用於矢量圖層。因此，在Point功能被渲染爲L.divIcon的情況下，它不被使用。
onEachFeature選項的pointToLayer一個之後施加，因爲需要後者來創建被饋送到onEachFeature的layer。因此，如果您在那裏生成feature.properties.FEATURE_STYLE.SVG_ELEMENT（如函數setFeatureProperties所示），則爲時已晚。

如果您需要進一步的幫助，您很可能需要分享更多的代碼，例如，樣式和onEachFeature選項以及一些示例數據，特別是feature.properties.FEATURE_STYLE.SVG_ELEMENT。

來源

2017-04-03 19:30:44 ghybs

感謝您的快速響應。風格只是設置默認大小，顏色，不透明度，以防我們不使用圖標作爲標記。我們使用onEachFeature來綁定彈出窗口和工具提示，它不控制那裏的任何標記。我已經將示例更新到了上面的SVG_ELEMENT。問題是，當我使用L.icon並傳遞一個.png圖像時，它工作正常。但L.divIcon更新地圖上的每個標記。 – TaraC

爲每個功能提供定製divIcon的傳單geojson圖層

回答

相關問題