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

最新推荐文章于 2024-06-01 16:08:41 发布

霸道流氓气质

最新推荐文章于 2024-06-01 16:08:41 发布

阅读量4k

点赞数

分类专栏： GIS相关文章标签： leaflet

本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/123990524

版权

GIS相关专栏收录该内容

130 篇文章 48 订阅

订阅专栏

场景

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>

霸道流氓气质

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Leaflet中通过setZIndex实现图层层级控制

场景Leaflet中使用layerGroup图层组实现图层切换：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122326506在上面实现图层组切换的效果上，如果再一个地图中添加一个或者多个layer,怎样控制图层层级(优先级)图层层级控制，即进行多个图层的层级控制和管理。图层层级越高，则越优先显示。在Leaflet中可以通过设置layer的setZIndex()方法改变图层的索引。注：博客：https:/
复制链接

扫一扫