当前位置: article > 正文

leaflet：入门基础（二）之加载图层_leaflet 图层

作者：AllinToyou | 2024-03-14 13:49:40

踩

leaflet 图层

前言

上一篇 leaflet 入门基础（一）讲了如何使用 leaflet ，包括加载地图、绘制图层等。

这一篇将讲解如何加载多种图层，以及如何寻找底图。

底图资源

这里提供一个底图资源网站：open whatever map

打开网址，就可以看到丰富的底图资源

点击喜欢的底图，会弹出一个信息框，把提供的网址复制下来

⭐其他：高德谷歌腾讯天地图地图瓦片url

加载底图

leaflet有两种类型的图层：

（1）base layer：互斥的图层（在地图上同一时间只能有一个图层可见），比如tile layers；

（2）overlayers：在base layer之上放置的其他东西。

我们将前面找的图层资源以base layer形式加载，那么我们一次就只能显示其中一个（而overlayers可以同时显示多个），可以通过 layerControl 切换图层


var baseLayers = {
    "Mapbox": mapbox,
    "OpenStreetMap": osm
};
 
var overlays = {
    "Marker": marker,
    "Roads": roadsLayer
};
 
L.control.layers(baseLayers, overlays).addTo(map);

以下是选好的四个baseLayer图层（OSM底图通过设置addTo(map)被选为默认加载，即运行后会显示这个图层


var baseLayers = {
    'Sputnik': L.tileLayer('http://{s}.tiles.maps.sputnik.ru/{z}/{x}/{y}.png', {
        maxZoom: 18
    }),
 
    "CartoDB Positron": L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
        maxZoom: 18
    }),
 
    "OSM": L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18
    }).addTo(map),
 
    "OpenTopoMap": L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
        maxZoom: 18
    }),
};

layerControl 切换图层工具


var layerControl = L.control.layers(baseLayers, {}, {
    position: 'topleft',
    collapsed: true
}).addTo(map);

效果图

还可以将上一篇博文绘制的多个图形组合成一个整体通过 layerGroup 作为 overlayer 添加上去


var bj = L.marker([39.92,116.46]).bindPopup('这里是北京');
    sh = L.marker([31.213,121.445]).bindPopup('这里是上海');
    gz = L.marker([23.16,113.23]).bindPopup('这里是广州');
var cities = L.layerGroup([bj, sh, gz]).addTo(map);

完整代码


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>leaflet Demo 2</title>
 
    <style>
        html, body, #map { height: 100%; }
    </style>
 
    <!-- css文件 -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"/>
    <!-- js文件 -->
    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
 
</head>
 
<body>
    <div id="map"></div>
    <script>
        var map = new L.Map('map', {
            center: new L.LatLng(39.86,116.45),
            zoom: 10
        });
 
        
        var baseLayers = {
            'Sputnik': L.tileLayer('http://{s}.tiles.maps.sputnik.ru/{z}/{x}/{y}.png', {
                maxZoom: 18,
                attribution:"Sputnik Layer"
            }),
 
            "CartoDB Positron": L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
                maxZoom: 18
            }),
 
            "OSM": L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 18
            }).addTo(map),
 
            "OpenTopoMap": L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
                maxZoom: 18
            }),
        };
 
        var layerControl = L.control.layers(baseLayers, {}, {
            position: 'topleft',
            collapsed: true
        }).addTo(map);
 
        var bj = L.marker([39.92,116.46]).bindPopup('这里是北京');
            sh = L.marker([31.213,121.445]).bindPopup('这里是上海');
            gz = L.marker([23.16,113.23]).bindPopup('这里是广州');
        var cities = L.layerGroup([bj, sh, gz]).addTo(map);
 
    </script>
 
</body>
</html>

注：Layer 中的 attribution 属性没什么大用，就是在右下角显示

只要找到地图服务商提供的数据url（符合各服务标准），基本上都能直接加载

"高德矢量": L.tileLayer('http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',{})

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/234934