Leaflet学习之路三——地图控件


Leaflet有四个控件:zoom,contribution,layers,scale。

1.zoom

zoom控件是默认打开的,添加的代码如下

L.control.zoom({zoomInTitle:'放大', zoomOutTitle:'缩小'}).addTo(map);
其默认位置为左上角,也可以自己设置,共四种参数:topleft, topright, bottomleft,
bottomright,这个参数适用于所用控件。

2.attribution

添加attribution的代码如下

L.control.attribution({ position: 'bottomright', prefix: '你想要的内容' }).addTo(map);

3.scale

L.control.scale({maxWidth:200,metric:true,imperial:false}).addTo(map);
maxWidth:比例尺大小

4.layers

这个控件相对于上面三个来说稍微复杂一点,添加方法如下

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

layerName可以包含HTML标签,也就是我们可以添加图片等内容,如:

{"<img src='my-layer-icon' /> <span class='my-layer-item'>My Layer</span>": myLayer}

这四个控件基本可以满足一般的需要,leaflet支持自定义控件,不过我没有研究,等以后研究了再另写文章。

转载自:https://blog.csdn.net/xtfge0915/article/details/80272549

You may also like...

退出移动版