Как динамически установить тень в Leaflet.js

Question

Я хотел бы динамически установить тень пользовательского значка маркера во время выполнения, потому что я хочу подчеркнуть значок, щелкнув по которому в данный момент. Я использую Leaflet 1.0. Вещи, которые я пробовал:

• Добавление тени во время выполнения с createShadow function

• Добавление пустой PNG теневое изображение в пользовательский значок и изменить его во время выполнения любой функции createShadow или непосредственно изменяя Исходное изображение Тени

Вот некоторые psuedocode:

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: Я хочу, чтобы маркер быть перетаскиваемым (и есть тень следует как маркер тащится). Поэтому любое решение с двумя значками должно было каким-то образом связать оба значка.

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