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