Leafletjs學習教程和相關程式碼整理
阿新 • • 發佈:2019-01-23
一.Leaflet簡介
官網上的api和例子大家多看看,多學習學習。
Lefalet 是一個為建設移動裝置友好的互動地圖,而開發的現代的、開源的 JavaScript 庫。它是由 Vladimir Agafonkin 帶領一個專業貢獻者團隊開發,雖然程式碼僅有 31 KB,但它具有開發人員開發線上地圖的大部分功能。
Lefalet 設計堅持簡便、高效能和可用性好的思想,在所有主要桌面和移動平臺能高效運作,在現代瀏覽器上會利用HTML5和CSS3的優勢,同時也支援舊的瀏覽器訪問。支援外掛擴充套件,有一個友好、易於使用的API文件和一個簡單的、可讀的原始碼。
國外有個MapBox.js也加入了Leaflet的特性和功能,所以有時也可以參考下,MapBox的的文件和例子。
小功能效果:
移動和放縮
// 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(); 2function 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
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); //
定位
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
需要引入shapefile.js
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 }