Как изменить стиль в наложении изображения листовки, кроме непрозрачности?

Question

Я бы хотел изменить стиль наложения изображений в Leaflet. Как я видел из экземпляра imageOverlay, кроме методов setUrl, setBounds, setOpacity, кажется, существует метод setStyle, который работает только с непрозрачностью или с ограниченными атрибутами css. ф.и

imageOverlay.setStyle({
    opacity: 0.5
})

это работает нормально, как и ожидалось.

Например, как бы я изменил свойства borderColor или color или fill? Я использовал

imageOverlay.setStyle({
   borderColor: '#FF0000 blue'
})

но стиль не применяется.

Ниже я приведу пример. У меня есть две кнопки, реализующие две функции. SetOpacity, который работает нормально, и setBorderColor, который не работает.

Любые рекомендации приветствуются.

#mapid {
  height: 100vh;
}

body {
  margin: 0px;
  padding: 0px;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script>

<button onclick='setOverlayOpacity()'>ChangeOpacity</button>

<button onclick='setOverlayBorderColor()'>Change Border Color</button>

<div id="mapid"></div>

<script>
  var map = L.map('mapid').setView([51.505, -0.09], 13);

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    imageBounds = [
      [40.712216, -74.22655],
      [40.773941, -74.12544]
    ];
  var imageOverlay = L.imageOverlay(imageUrl, imageBounds).addTo(map);

  console.log(imageOverlay)

  map.fitBounds(imageBounds)

  function setOverlayOpacity() {
    imageOverlay.setStyle({
      opacity: 0.5
    })
  }

  function setOverlayBorderColor() {
    imageOverlay.setStyle({
      borderColor: '#FF0000 blue'
    })
  }

</script>

Answer 1

Метод setStyle() для L.ImageOverlay - это , не задокументированный специально, и только для совместимости для L.FeatureGroup.setStyle(), который в основном предназначен для установки параметров стиля для L.Path, не Правила CSS.

Фактически, текущая реализация метода L.ImageOverlay.setStyle() устанавливает только непрозрачность:

setStyle: function (styleOpts) {
    if (styleOpts.opacity) {
        this.setOpacity(styleOpts.opacity);
    }
    return this;
},

Я думаю, что вы хотите использовать L.ImageOverlay.getElement(), который возвращает HTMLImageElement и затем получить доступ к свойству style Например:

myOverlay.getElement().style.border = '2px solid red';

В качестве альтернативы, используйте параметр className , чтобы назначить класс CSS для ImageOverlay HTMLImageElement и соответственно добавить правила CSS.