Leaflet:控件Control相关

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
};

 

posted @   ShineLe  阅读(6105)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
点击右上角即可分享
微信分享提示