如何在Leaflet.js中動態設置陰影

我想在運行時動態設置自定義標記圖標的陰影，因爲我想強調當前點擊的圖標。我正在使用Leaflet 1.0。事情我已經嘗試：如何在Leaflet.js中動態設置陰影

在運行時添加陰影與createShadow function
添加空白PNG陰影圖像的自定義圖標以及在由createShadow功能在運行時更改或直接修改陰影的圖像源

下面是一些僞代碼：

function addMyShadow(marker) { 
    /* try Leaflet's `createShadow` function */ 

    // directly modify marker: Uncaught TypeError: marker.createShadow is not a function 
    marker.createShadow('lib/images/shadow.png'); 

    // the createShadow is available under options.icon, 
    // but this doesn't seem to change anything 
    marker.options.icon.createShadow('lib/images/shadow.png'); 

    /* try directly modifying the shadow's image source */ 

    // Successfully changes the `currectSrc` property, 
    // but also doesn't do anything to the icon on the map 
    marker._shadow.currentSrc = 'lib/images/shadow.png'; 
}

我也嘗試在-webkit-filter: drop-shadow附加一個自定義類，但我已經使用-webkit-filter來爲一組圖標着色。我只想改變選定的圖標，而不是整個班級。顯然嵌套-webkit-filter會覆蓋外部-webkit-filter而不是堆疊過濾器。所以這對我來說不是一個可行的選擇。
目前我與添加使用CSS drop-shadow自定義類實驗;看起來我可以在運行時手動更改類，但我希望有一些更好的內置方法來添加陰影。它也不是很漂亮，因爲即使圖像具有透明度，它也會使陰影變爲正方形。

編輯：我想標記爲可拖動（和有陰影遵循標記拖動）。所以任何帶有兩個圖標的解決方案都需要以某種方式將兩個圖標綁定在一起

來源

2016-11-10 user2441511

我認爲你應該有2個L.icon對象：一個沒有陰影，一個有陰影。

要顯示的影子，你只需切換L.Icon

marker.on('click', function(e) { 
    if(selectedMarker) { 
    if(selectedMarker !== e.target) { // selected marker is NOT this one 
     selectedMarker.setIcon(greenIcon); 
     e.target.setIcon(greenIconWithShadow); 
     selectedMarker = e.target; 
    } 
    else { // selected marker is this one 
     selectedMarker.setIcon(greenIcon); 
     selectedMarker = false; 
    } 
    } 
    else { // no marker selected 
    selectedMarker = e.target; 
    e.target.setIcon(greenIconWithShadow); 
    } 
});

陰影是L.Icon的一部分，並應遵循拖

時見例如http://plnkr.co/edit/PNxzJqMbcRTuo0jWPGyj?p=preview

來源

2016-11-10 19:45:23 YaFred

我想過這個，但我想讓標記可以拖動。你有什麼想法如何將兩個標記綁定在一起？ – user2441511

這是一個非常好的解決方案。感謝您澄清，併爲示例代碼。 – user2441511

如何在Leaflet.js中動態設置陰影

回答

相關問題