OpenStreetMap 瓦片不透明度

Question

有没有办法使用传单和 OpenStreetMap 设置图块的不透明度？我希望地图具有 50% 的不透明度，但在标记上保持 100% 的不透明度。

像这样设置不透明度，不起作用：

var bkgLayer = L.tileLayer.grayscale('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

    var map = new L.Map("map", {
                center: new L.LatLng(-31.4, 50.9),
                scrollWheelZoom: false,
                  zoomControl: false,
                  zoom: 5,
                  opacity: 0.5,
                  layers: bkgLayer
              });

Answer 1

您可以使用 document.querySelector 访问 Leaflet 磁贴窗格并通过样式设置不透明度：

const element = document.querySelector(
  '.leaflet-tile-pane'
).style.opacity = 0.5;

Here is a demo I put together on StackBlitz showing how to use Leaflet-Slider 在不改变标记的情况下调整图块图层的不透明度。

Answer 2

普通 Leaflet 图块层（网格层）有 opacity 选项。

https://leafletjs.com/reference-1.7.1.html#gridlayer-opacity

在您的情况下，您使用的是带有 Leaflet.TileLayer.Grayscale 插件的特殊 Tile Layer。

但是它正确地扩展了正常的 Tile Layer 行为，并且它的代码似乎并没有使其与 opacity 选项不兼容。因此它应该简单地工作：

var bkgLayer = L.tileLayer.grayscale('urlTemplate', {
  opacity: 0.75
});

OpenStreetMap 瓦片不透明度

OpenStreetMap tile opacity

html

javascript

openstreetmap

leaflet