场景

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>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 Leaflet中使用layerGroup图层组实现图层切换 leaflet图层管理，图层组 leaflet结合geoserver利用WFS服务实现图层新增功能(附源码下载) leaflet中如何通过透明度控制layerGroup的显示隐藏 java中实现无限层级的树形结构 NGUI 层级关系控制 kubernetes kubelet组件中cgroup的层层"戒备" (二十)WebGIS中图层树功能的设计和实现 UGUI控制UI的显示层级 thinkphp5多级控制器是什么？怎么使用？