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

前言

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

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

 

底图资源

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

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

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

 

加载底图

     leaflet有两种类型的图层：

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

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

 

    我们前面找的图层都属于base layer，那么我们一次就只能显示其中一个，但我们可以通过 layerControl 切换图层

    以下是选好的四个图层（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 添加上去

 

代码

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

 

题外话 

    过了一年才写了第二篇...主要原因是最近不知道要写什么内容，上一篇 leaflet 博文又是我阅读量最高的，所以就重操旧业了。希望大家多多点赞、收藏。

    上一篇：leaflet：入门基础（一）

    下一篇：leaflet：入门基础（三）之加载数据

 

其他

    设置layer.control的样式

    leaflet 实现热力图

 

参考

    leaflet中Layer Groups和Layers Control用法