Leafletjs学习教程和相关代码整理

一.Leaflet简介

官方网站：http://leafletjs.com/

官网上的api和例子大家多看看，多学习学习。

Lefalet 是一个为建设移动设备友好的互动地图，而开发的现代的、开源的 JavaScript 库。它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发，虽然代码仅有 31 KB，但它具有开发人员开发在线地图的大部分功能。

Lefalet 设计坚持简便、高性能和可用性好的思想，在所有主要桌面和移动平台能高效运作，在现代浏览器上会利用HTML5和CSS3的优势，同时也支持旧的浏览器访问。支持插件扩展，有一个友好、易于使用的API文档和一个简单的、可读的源代码。

国外有个MapBox.js也加入了Leaflet的特性和功能，所以有时也可以参考下，MapBox的的文档和例子。

API：https://www.mapbox.com/mapbox.js/api/v1.6.2/

Example：https://www.mapbox.com/mapbox.js/example/v1.0.0/

插件：https://www.mapbox.com/mapbox.js/plugins/

 

小功能效果：

移动和放缩

// disable drag and zoom handlers



//禁止移动和放大缩小



map.dragging.disable();



map.touchZoom.disable();



map.doubleClickZoom.disable();



map.scrollWheelZoom.disable();



// disable tap handler, if present.



//禁止单击



if (map.tap) map.tap.disable();

单击事件

 1        var popup = new L.popup();

 2        function onMapClick(e) {

 3 

 4                    popup

 5 

 6                             .setLatLng(e.latlng)

 7 

 8                             .setContent("You clicked the map at " + e.latlng.toString())

 9 

10                             .openOn(map);

11 

12          }

13 

14          map.on('click', onMapClick);

添加zoom控制，在右下角

1          var zoomControl = L.control.zoom({

2 

3                    position: 'bottomright'

4 

5          });

6 

7          map.addControl(zoomControl);

添加比例尺

L.control.scale().addTo(map);

瓦片图层加载

1  L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',{

2 

3                    maxZoom: 18,

4 

5                    reuseTiles: true                         

6 

7          }).addTo(map);

添加底图(esri-leaflet插件)

 需要引入esri-leaflet.js

github：https://github.com/esri/esri-leaflet

百度盘下载：http://pan.baidu.com/s/1nt0S2JR

 1         L.esri.basemapLayer("Streets").addTo(map);//此行可行

 2 

 3          //ArcGIS Server Dynamic Map Service, Historic Hurricane Tracks

 4 

 5                    dynLayer = L.esri.dynamicMapLayer(kaifaqu, {

 6 

 7                    opacity: 1,

 8 

 9                    layers: [0, 1]

10 

11          });

12 

13          map.setView([30.60, 119.65], 9); //浙江
http://www.cnblogs.com/wangcan/

定位

 1       function onLocationFound(e) {

 2 

 3                    var radius = e.accuracy / 2;

 4 

 5  

 6 

 7                    L.marker(e.latlng).addTo(map)

 8 

 9                             .bindPopup("You are within " + radius + " meters from this point").openPopup();

10 

11  

12 

13                    L.circle(e.latlng, radius).addTo(map);

14 

15          }

16 

17  

18 

19          map.on('locationfound', onLocationFound);

添加shapefile

来自（http://www.cnblogs.com/wangcan/）

需要引入shapefile.js

github:https://github.com/calvinmetcalf/shapefile-js

百度盘（shp.min.js下载后引入即可）：http://pan.baidu.com/s/1hq5MuDe

 1 //添加shapefile

 2 function addShapeFile() {

 3 

 4     map.setView([34.74161249883172, 18.6328125], 2);

 5     var geo = L.geoJson({

 6         features: []

 7     }, {

 8         onEachFeature: function popUp(f, l) {

 9             //console.info(f);

10             var out = [];

11             if (f.properties) {

12                 for (var key in f.properties) {

13                     out.push(key + ": " + f.properties[key]);

14                     

15                 }

16                 l.bindPopup(out.join("<br />"));

17             }

18         }

19     })//.addTo(map);

20     

21     //保存到 图层数组

22     map_layers.push(geo);

23     //此处指向shapefile的zip文件即可

24     var base = 'files/bou1_4m.zip';

25     shp(base).then(function(data) {

26         console.info(data);

27         geo.addData(data);

28     });

29 

30 

31 }

 关键词：leaflet.js shapefile esri-leaflet