如何在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中动态设置阴影

回答

相关问题