Leaflet：控件Control相关 - ShineLe

时间：2024-01-29 15:29:32

Leaflet：控件Control相关

2020-11-11 14:31  ShineLe  阅读(821)  评论(0)  编辑  收藏  举报

Leaflet官方文档中只给出了4种控件：Zoom、Attribution、Layers、Scale；它们都是继承自Control类，具体可以参考Control。

Control

Zoom、Scale、Layer、Attribution的父类

1、参数

position //Map控件的位置，只能位于Map四个角落中的一个，
//即值只能是\'topleft\', \'topright\', \'bottomleft\' , \'bottomright\'，
//默认是topleft左上角

 

2、方法

//子类继承的方法
getPosition() //获取控件位置
setPosition(position) //设置控件的位置，还是只能取参数中所说的四个值
getContainer() //返回包含了这个Control的HTMLElement
addTo(<Map>map) //把这个控件加到map上
remove() //从该空间当前活动的map上移除该控件

 

 

control.zoom

一个缩放控件；有两个按钮分别是放大（Zoom in）和缩小（Zoom out）。其实这个按钮在我们创建的Map上是默认存在的，除非在通过L.map初始化Map时，把参数zoomControl设置为了false，这样才不会显示最初的缩放控件。

    L.control.zoom({
        position:\'topright\',
        zoomInTitle:\'放大\',
        zoomOutTitle:\'缩小\'
    }).addTo(leafletMap);

默认位置为左上角。如果要设置位置，可通过修改从父类Control继承而来的属性position设置。

 

control.attribution

一个展示Layer属性信息的文本块的控件；这个控件是默认显示的，除非在L.map初始化Map时，把参数attributionControl设置为了false。

L.control.attribution({
    position:\'bottomleft\',
    prefix:\'This is an attribution\'
}).addTo(leafletMap);

这时就会在Map左下角显示出来。

 可以通过attribution动态显示出坐标信息：

 

//暂未实现

 

control.scale

比例尺控件

    L.control.scale({
        position:\'topleft\',
        maxWidth:\'100\',
        imperial:false
    }).addTo(leafletMap);

参数imperial标识英制长度，默认是true，这里修改为false不让显示。

设置完成后，在Map左上角显示一个比例尺scale：

 

 

control.layer

一个Layer控件，可以叠加多个Layer，可以在该控件中选择显示哪个。

 这个控件我认为是*、最炫酷、最难的一个控件了，这里多花一点篇幅细细说明。以下内容来自Leaflet官方文档之Layer Groups and Layers Control

 

假如你有一组Map元素（Circle、Marker、Polygon等），想把它们作为一个整体加入到Layer中，而不是作为一个个单独的元素加入。

这时你可以把它们布置到一个另外的Layer（区别于底图的Layer，该Layer只有这些元素）中，方法是L.layerGroup( [ 元素A , 元素B , 元素C ... ] )

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.\');

//把上述元素加入到一个额外的Layer cities中
var cities=L.layerGroup( [ littleton, denver, aurora, golden ] );

 

现在就有了一个citiesLayer，其中结合了所有的Marker元素。这时，你就可以将这些Marker元素作为一个整体，加入到Map或者从Map中删除了。

 

之后就是显示了，我们要用到Layers Control，负责控制显示/隐藏哪个Layer。

在Leaflet中，有两种Layer：（1）base layers——底图（在我们的GIS系统中一次只能显示一张底图，比如之前的代码中一直显示的mapbox的tile layer）；（2）overlays——覆盖Layer（放在底图上的Layer，比如上文的citiesLayer）。

在下边的例子中，我们要创建两个底图：一个是streets——街道图，另一个是satellite——卫星图；然后在其上覆盖一个Layer——我们之前创建的citiesLayer。

var map1 = L.tileLayer(url, {
        maxZoom: 18,
        id: \'mapbox.satellite\'
    }),
    map2 = L.tileLayer(url, {
        maxZoom: 18,
        id: \'mapbox.streets\'
    }).addTo(leafletMap);

cities.addTo(leafletMap);

把底图map2和覆盖Layer cities都加入到leafletMap中，这些Layer也可以在通过L.map初始化Map时通过属性layers : [ map2 , cities ]进行添加。

之后，我们要创建两个对象——一个包含了我们所有的底图；另一个包含了我们的覆盖Layer。这两个对象都是以key:value形式创建的。Key是我们在Layer控件中显示的这些Layer名字，Value就是这些名字对应的Layer对象。

注：Key/Value的写法类似于之前创建某种元素时的属性的写法，都是{ name1 : value1 ,...}

var baseMaps={
    \'Satellite\' : map1,
    \'Streets\': map2
};
var overlayMaps={
    \'Cities\' : cities
};

现在，与Layer控件相关的准备工作都已经做好了，包括控件上显示的内容（Layer名）以及这些内容实际对应的Layer对象。剩下的就是生成控件并把它加入到Map中了。通过L.control.layers()创建一个Layer Control；

两个参数：

第一个参数是之前创建的包含了所有底图的对象baseMaps；

第二个参数则是覆盖Layer对象overlayMaps。

这两个参数都是可选的，你可以不写第二个参数而只用一个底图对象；也可以用null代替第一个参数而只用一个覆盖Layer对象。在这两种情况下，省略的Layer都不会显示出来。

L.control.layers( baseMaps , overlayMaps ).addTo(leafletMap);

当然，你也可以通过在创建时设置其父类Control的属性position来设置该控件的位置，但是补充的参数要放在上边所说的两个参数后边：

L.control.layers( baseMaps , overlayMaps ,
{position:\'topleft\'}).addTo(leafletMap);

结果：

 

 

 

 

 写在Layer相关的最后：

1、虽然我们应用了多个底图(base map)，但是在初始化Map时只有一个参与了（即L.map时的layers属性中只有一个底图，或者只有一个底图在创建时addTo(leafletMap)），但是当我们使用Layer控件时，仍要把所有的底图都以Key/Value的形式给放在一个底图对象中，该对象就是创建控件时L.control.layers()的第一个参数。

 2、上文的Key可以赋予相应的样式，比如把Satellite变成红色：

var baseMaps = {
    "<span style=\'color: red\'>Satellite</span>": map1,
    "Streets": map2
};

 

相关文章