场景

Leaflet中使用layerGroup图层组实现图层切换：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122326506

在上面实现图层组切换的效果上，如果再一个地图中添加一个或者多个layer,

怎样控制图层层级(优先级)

图层层级控制，即进行多个图层的层级控制和管理。图层层级越高，则越优先显示。

在Leaflet中可以通过设置layer的setZIndex()方法改变图层的索引。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、设置图层索引

//声明osm地图图层var osmLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {attribution: "osm"});osmLayer.setZIndex(10);osmLayer.addTo(map);

2、完整示例代码


<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>leaflet图层层级控制</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /><style>html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}</style>
</head><body><div id="map"></div><script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script><script type="text/javascript" src="./js/L.Graticule.js"></script><script type="text/javascript">var map = L.map('map').setView([36.09, 120.35], 13);//声明osm地图图层var osmLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {attribution: "osm"});osmLayer.setZIndex(10);osmLayer.addTo(map);//声明stamen地图图层var stamenLayer = L.tileLayer("https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png", {attribution: "stamen"});stamenLayer.setZIndex(1);stamenLayer.addTo(map);</script>
</body></html>

Leaflet中通过setZIndex实现图层层级控制相关推荐

Leaflet中添加的不同图层样式图标
如上图,具体问题请查看对应html页引用的basemaps的css样式. 如下图是本项目引用的css样式: .basemap img { width: 48px; border: 2px solid ...
leaflet加载实时路况图层（高德、百度）
加载百度地图实时路况加载百度地图需要使用到的插件如下:proj4.proj4leaflet.tileLayer.baidu.其中tileLayer.baidu来自大佬--火星科技木遥. <h ...
Leaflet中使用Leaflet-echarts3插件实现航班航线动态模拟
场景 Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图: Leaflet中使用leaflet-echarts插件实现Echarts的Migration ...
Leaflet中使用Leaflet.draw插件实现图形交互绘制和编辑(修改图形坐标点)
场景 Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1224 ...
Leaflet中原生方式实现测量面积
场景 Leaflet中原生方式实现测距: Leaflet中原生方式实现测距_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面实现测量距离的基础上,实现测量面积效果如下注: 博客: ...
Leaflet中加载Geoserver发布的WMS服务显示地图
场景 Openlayers下载与加载geoserver的wms服务显示地图: Openlayers下载与加载geoserver的wms服务显示地图_BADAO_LIUMANG_QIZHI的博客-CSD ...
中望3D 2020 图层管理器（图层的设置+移动图层+复制图层）
图层在二维CAD中的作用是对不同线型.线宽.标注.打印等进行整理归类,而在三维CAD中,只有小部分三维CAD软件是具有图层这个概念的,有助于设计师在模具等设计中对不同零件进行整理归类,使设计工作更快捷 ...
Leaflet中如何限制地图的拖动范围
一.背景在Leaflet默认的地图载模式中,假如没有对地图的一个范围进行限制,那就会带来一个问题,随着地图可以拖动,当地图往右拖动越多,每跨一屏(这里的一屏指地图投影后在页面上的平铺位置)经度会加3 ...
Leaflet中使用draw绘制时获取图形的几何信息
场景 Leaflet中使用Leaflet.draw插件实现图形交互绘制和编辑(修改图形坐标点): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/d ...

Leaflet中通过setZIndex实现图层层级控制

场景

实现

Leaflet中通过setZIndex实现图层层级控制相关推荐

最新文章

热门文章