使用Leaflet和OpenStreetMap仅设置地图瓦片透明度的方法问询

可以单独设置瓦片图层的透明度，该设置不会影响标记、矢量图形等地图覆盖物的不透明度。

不生效原因 #

你之前的配置不生效，是因为把opacity参数写在了地图实例L.Map的初始化配置中，该参数作用于整个地图容器，会导致所有地图元素统一变透明，且Leaflet的Map初始化配置本身不直接支持opacity参数，所以配置不会生效。

正确配置方式 #

opacity是瓦片图层L.TileLayer的专属配置项，需要在初始化瓦片图层时传入参数，正确代码如下：

// 初始化瓦片图层时设置透明度为50%
var bkgLayer = L.tileLayer.grayscale('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  opacity: 0.5
});

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

// 后续添加的marker默认100%不透明，不受瓦片透明度影响
L.marker([-31.4, 50.9]).addTo(map).bindPopup('不透明的标记');

如果需要动态调整瓦片透明度，可直接调用瓦片图层的setOpacity方法即可，示例：bkgLayer.setOpacity(0.3)。

内容的提问来源于stack exchange，提问作者perand