Question

我想在Leaflet中更改ImageOverlay的样式。正如我从imageOverlay实例中看到的，除了setUrl，setBounds，setOpacity方法之外，似乎还有一个setStyle方法似乎只适用于不透明度或有限的CSS属性。 f.i

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()的{{1}}方法是not documented的目的，仅是为了与L.FeatureGroup.setStyle()兼容，这主要是为了为L.ImageOverlay设置样式选项，不是 CSS规则。

实际上，current implementation of L.ImageOverlay.setStyle() method仅设置不透明度：

L.Path

我认为您要使用L.ImageOverlay.getElement()，它返回一个HTMLImageElement，然后访问其style属性，例如：

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

或者，使用className option将CSS类分配给myOverlay.getElement().style.border = '2px solid red';的{{1}}，并相应地添加CSS规则。

除了不透明度之外，如何更改Leaflet的imageOverlay中的样式？

1 个答案: