如何在leaf .js中动态设置阴影

How to dynamically set shadow in Leaflet.js

本文关键字：动态 设置 阴影 js leaf      更新时间：2023-09-26

我想在运行时动态设置自定义标记图标的阴影，因为我想强调当前单击的图标。我使用的是传单1.0。我尝试过的事情:

  • 使用createShadow函数在运行时添加阴影

  • 在自定义图标中添加一个空白的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;似乎我可以在运行时手动更改类，但我希望有一些更好的内置方法来添加阴影。这也不是很漂亮，因为即使图像是透明的，它也会使阴影变成方形。

EDIT:我希望标记是可拖动的(并有阴影跟随标记被拖动)。因此，任何有两个图标的解决方案都需要以某种方式将两个图标绑定在一起。

我认为你应该有两个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

相关文章：