【WebGIS】leaflet入门-图层组和和图层控件

最新推荐文章于 2024-07-31 11:41:46 发布

一个纸人

最新推荐文章于 2024-07-31 11:41:46 发布

阅读量1.8k

点赞数 3

分类专栏： WebGIS 文章标签： css 前端 html

本文链接：https://blog.csdn.net/paperperson/article/details/130531346

版权

WebGIS 专栏收录该内容

7 篇文章 3 订阅

订阅专栏

介绍

本教程包括如何将多个图层组合成一个，以及如何使用图层控件十分方便的切换地图上的图层。
照例放出官方示例
官方：leaflet

图层组合和图层控件

图层组合

我们先来定义几个想要组合在一起的图层

var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
    denver    = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
    aurora    = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
    golden    = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');

然后就可以使用LayerGroup将他们添加到一个组合中

var cities = L.layerGroup([littleton, denver, aurora, golden]);

这样在操作这几个图层时，就可以以组合为单位同时添加或者去除这几个图层了。

图层控件

leaflet允许我们控制显示在地图上的图层。我们知道，在leaflet中分别有两种图层，一种是baselayer，底图图层，它是唯一的，地图上同时只能展示一个baselayer；另一个是overlays，覆盖图层，指覆盖在底图上的图层，地图上可以同时展示多个overlays。
现在我们来创建一个地图

var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap'
});

var streets = L.tileLayer(mapboxUrl, {id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mapboxAttribution});

var map = L.map('map', {
    center: [39.73, -104.99],
    zoom: 10,
    layers: [osm, cities]
});

如上，我们创建了osm和streets两个切片图层作为底图，并将他们都添加到map的layers属性中
该属性的定义是这样的

即最初被添加到map的图层数组，也就是在map创建时添加的图层，一般是底图。
接下来创建两个对象，分别包含要用到的baselayer和overlays

var baseMaps = {
    "OpenStreetMap": osm,
    "Mapbox Streets": streets
};

var overlayMaps = {
    "Cities": cities
};

只需要以键值对的形式标式对应的图层即可
接下来就是为map添加切换layer的控件，并将控件添加到地图上了。

var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);

到现在就基本实现了图层切换的功能，效果图如下
layers初步效果
右上角既是切换图层的控件了，我们还可已修改空间中的样式

var baseMaps = {
    "<span style='color: gray'>Grayscale</span>": grayscale,
    "Streets": streets
};

效果图：
layer修改样式效果图

另外，在创建了layer控件后，再想要往map上添加图层，只需要通过layer控件即可

var crownHill = L.marker([39.75, -105.09]).bindPopup('This is Crown Hill Park.'),
    rubyHill = L.marker([39.68, -105.00]).bindPopup('This is Ruby Hill Park.');
    
var parks = L.layerGroup([crownHill, rubyHill]);
var satellite = L.tileLayer(mapboxUrl, {id: 'MapID', tileSize: 512, zoomOffset: -1, attribution: mapboxAttribution});

layerControl.addBaseLayer(satellite, "Satellite");
layerControl.addOverlay(parks, "Parks");

这里又定义了baselayer和Overlay，并将他们添加到了layer控件中。
效果如下
最终效果图
最后照例贴出全部代码和效果图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
        integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
        integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
    <title>layerGroup</title>
</head>

<body>
    <div id="map" style="height: 600px;"></div>
    <script>
        var mapboxUrl = ''


        var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
            denver = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
            aurora = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
            golden = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');

        var cites = L.layerGroup([littleton, denver, aurora, golden])

        var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© OpenStreetMap'
        });

        var streets = L.tileLayer(mapboxUrl, { id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1 });
        var map = L.map('map', {
            center: [39.73, -104.99],
            zoom: 10,
            layers: [osm]
        })


        // var baseMaps={
        //     "OpenStreetMap":osm,
        //     "Mapbox Street":streets
        // }
        var baseMaps = {
            "<span style='color: red'>OpenStreetMap</span>": osm,
            "Mapbox Street": streets
        }

        var overlayMaps = {
            "Cites": cites
        }
        var crownHill = L.marker([39.75, -105.09]).bindPopup('This is Crown Hill Park.'),
            rubyHill = L.marker([39.68, -105.00]).bindPopup('This is Ruby Hill Park.');

        var parks = L.layerGroup([crownHill, rubyHill]);
        var satellite = L.tileLayer(mapboxUrl, { id: 'MapID', tileSize: 512, zoomOffset: -1 });
        var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map)


        layerControl.addBaseLayer(satellite, "Satellite");
        layerControl.addOverlay(parks, "Parks");


 
    </script>
</body>

</html>

结束效果图