这种底图图层样式是leaflet自带的天地图样式。由于需求需要更改底图样式以符合项目需求。
这种是改变之后的天地图样式,下面就详细讲解一下如何改变的。
第一步,安装leaflet插件引入,官网https://leafletjs.cn/。
第二步:进入https://codepen.io/stoumann/pen/MWeNmyb网站;把当前图片替换成天地图的图片,接下去调好自己想要的颜色然后把svg标签复制到项目的标签中。
第三步:生成的CSS code代码加到对应元素上即可
img.leaflet-tile.leaflet-tile-loaded {
filter: url("#x-rays") contrast(1.1);
}。
还有一种设置 map.setStyle 的样式,强制更改里面的背景颜色呢,设置 map.setStyle 前提下 给盒子一个背景色(ps没试这个)。
这样就可以改变leaflet自带的底图颜色。当然需要别的颜色可以在https://codepen.io/stoumann/pen/MWeNmyb网站中更改,直到找到符合自己需求的颜色。以上即是更改leaflet底图颜色的方法。