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支持自定义控件，不过我没有研究，等以后研究了再另写文章。