如何更改传单图像中的样式除了不透明度之外的叠加层？

Question

我想更改传单中图像叠加层的样式。正如我从 imageOverlay 实例中看到的那样，除了 setUrl、setBounds、setOpacity方法之外，似乎有一种setStyle方法似乎仅适用于不透明度或有限的 css 属性。F.I.I.

imageOverlay.setStyle({
    opacity: 0.5
})

这按预期工作正常。

例如，我将如何更改borderColor或color或fill属性？我用过

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

但不应用任何样式。

下面我举一个例子。我有两个按钮实现两个功能。设置不透明度工作正常，设置边框颜色不起作用。

欢迎任何建议。

#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

L.ImageOverlay的setStyle()方法不是故意记录的，只是为了兼容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 规则。