Leaflet学习笔记-基础内容

为什么选择Leaflet

开源,且代码仅有 31 KB，但它具有开发人员开发在线地图的大部分功能(80%的功能) 是不是比arcgis要小很多呢

官网：http://leafletjs.com/

劣势：国内的资源比较少 想要精通那么多学习英语吧

加载天地图/高德/MapABC

下载实例：https://github.com/htoooth/Leaflet.ChineseTmsProviders

在项目中加入leaflet.ChineseTmsProviders.js文件

这里注意，该文件中包含了三个地图,如果你仅用了天地图,那么可以把另外两个地图去掉精简代码,虽然只是少了很小一部分，我们用Leaflet的目的不就是为了精简代码吗

下面是天地图的示例：        ↓↓↓↓↓↓↓↓↓↓↓↓

<script type="text/javascript">
var normalm = L.tileLayer.chinaProvider(‘TianDiTu.Normal.Map‘,{maxZoom:18,minZoom:5}),
    normala = L.tileLayer.chinaProvider(‘TianDiTu.Normal.Annotion‘,{maxZoom:18,minZoom:5}),
    imgm = L.tileLayer.chinaProvider(‘TianDiTu.Satellite.Map‘,{maxZoom:18,minZoom:5}),
    imga = L.tileLayer.chinaProvider(‘TianDiTu.Satellite.Annotion‘,{maxZoom:18,minZoom:5});

var normal = L.layerGroup([normalm,normala]),
    image = L.layerGroup([imgm,imga]);

var baseLayers = {
    "地图":normal,
    "影像":image,
}

var overlayLayers = {                    //你可以叠加其他的图层

}

var map = L.map("map",{
    center:[31.59, 120.29],
    zoom:12,
    layers:[normal],
    zoomControl:false
});

L.control.layers(baseLayers,overlayLayers).addTo(map);
L.control.zoom({zoomInTitle:‘放大‘, zoomOutTitle:‘缩小‘}).addTo(map);
</script>

Leaflet的几个Control

放大缩小：

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

切换地图：

var baseLayers = {
    "地图": normal,
    "影像": image,
}

var overlayLayers = {
    "公司": companylayer,
    "景区": spotlayer,
}

L.control.layers(baseLayers, overlayLayers).addTo(map);

比例尺：

L.control.scale().addTo(map);  //比例尺

地图注释:

L.control.attribution({ position: ‘bottomleft‘, prefix: ‘myMap‘ }).addTo(map); 

简单的Events

地图点击事件（单击/双击）

你可以把他们分开来写

map.on(‘click‘, showMapPosition);    //点击地图
map.on(‘dblclick‘,addPoint);             //双击地图

//map.off(....) 关闭该事件

function showMapPosition(e)
{
    alert(e.latlng);
}

function addPoint(e)
{
    var marker = L.marker([e.latlng.lat, e.latlng.lng]).addTo(map);
}    

也可以放在一起

map.on(‘click‘, function(e) {
    alert(e.latlng);
});