标签：
为什么选择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); });
标签：
原文地址：http://www.cnblogs.com/CoffeeEddy/p/4919987.html
