Question

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

使用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的自定义类;看起来我可以在运行时手动更改类，但我希望有一些更好的内置方式来添加阴影。它也不是很漂亮，因为即使图像具有透明度，它也会使阴影成为正方形。

编辑：我希望标记可以拖动（并在拖动标记时跟随阴影）。所以任何带有两个图标的解决方案都需要以某种方式将两个图标绑定在一起。

Answer 1

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

如何在Leaflet.js

1 个答案: