OpenStreetMap 平铺不透明度答案

【问题标题】：OpenStreetMap tile opacityOpenStreetMap 平铺不透明度
【发布时间】：2021-11-22 23:46:22
【问题描述】：

有没有办法只使用传单和 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
              });

【问题讨论】：

标签： javascript html leaflet openstreetmap

【解决方案1】：

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

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

StackBlitz 上的Here is a demo I put together 展示了如何使用Leaflet-Slider 在不更改标记的情况下调整切片图层的不透明度。

【讨论】：

【解决方案2】：

普通传单平铺层（网格层）具有opacity 选项。

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

在您的情况下，您正在使用带有Leaflet.TileLayer.Grayscale 插件的特殊平铺层。

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

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

【讨论】：

这正是我想要的，谢谢！