Leaflet_創建地圖（官網示例）
阿新 • • 發佈：2017-10-20
位置 custom phone world! -c setview art locate ipa
官網：http://leafletjs.com/examples.html
快速啟動指南
http://leafletjs.com/examples/quick-start/example.html
一個簡單的一步一步的引導，很快就會讓你開始用傳單的基礎知識，包括建立一個單張地圖（Mapbox瓷磚）在您的網頁上，與標記、折線和彈出窗口，和事件處理。
<!DOCTYPE html> <html> <head> <title>Leaflet</title> <meta charset="utf-8"><link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"> <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> <style TYPE="text/css"> body { margin: 0px; padding: 0px; }/** * 單獨設置mapid為00%不顯示，可能float坍塌 */ html, body, #mapid { height: 100%; width: 100%; } </style> </head> <body> <div id="mapid"> </div> </body> <script> var mymap = L.map(‘mapid‘).setView([51.505, -0.09], 13); L.tileLayer(‘https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw‘, { maxZoom: 18, attribution: ‘Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ‘ + ‘<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ‘ + ‘Imagery ? <a href="http://mapbox.com">Mapbox</a>‘, id: ‘mapbox.streets‘ }).addTo(mymap); L.marker([51.5, -0.09]).addTo(mymap) .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup(); L.circle([51.508, -0.11], 500, { color: ‘red‘, fillColor: ‘#f03‘, fillOpacity: 0.5 }).addTo(mymap).bindPopup("I am a circle."); L.polygon([ [51.509, -0.08], [51.503, -0.06], [51.51, -0.047] ]).addTo(mymap).bindPopup("I am a polygon."); var popup = L.popup(); function onMapClick(e) { popup .setLatLng(e.latlng) .setContent("You clicked the map at " + e.latlng.toString()) .openOn(mymap); } mymap.on(‘click‘, onMapClick); </script> </html>
移動端
http://leafletjs.com/examples/mobile/example.html
在本教程中，您將學習如何創建一個全屏地圖調整為移動設備如iPhone，iPad或Android手機，以及如何輕松地檢測並使用當前用戶的位置。
<!DOCTYPE html> <html> <head> <title>Leaflet</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"> <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> <style TYPE="text/css"> body { margin: 0px; padding: 0px; } /** * 單獨設置mapid為00%不顯示，可能float坍塌 */ html, body, #mapid { height: 100%; width: 100%; } </style> </head> <body> <div id="mapid"> </div> </body> <script> var map = L.map(‘mapid‘).fitWorld(); L.tileLayer(‘https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw‘, { maxZoom: 18, attribution: ‘Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ‘ + ‘<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ‘ + ‘Imagery ? <a href="http://mapbox.com">Mapbox</a>‘, id: ‘mapbox.streets‘ }).addTo(map); function onLocationFound(e) { var radius = e.accuracy / 2; L.marker(e.latlng).addTo(map) .bindPopup("You are within " + radius + " meters from this point").openPopup(); L.circle(e.latlng, radius).addTo(map); } function onLocationError(e) { alert(e.message); } map.on(‘locationfound‘, onLocationFound); map.on(‘locationerror‘, onLocationError); map.locate({ setView: true, maxZoom: 16 }); </script> </html>
自定義圖標的標記
http://leafletjs.com/examples/custom-icons/example.html
在這個漂亮的教程，你將學習如何輕松地定義自己使用的標記，你把地圖上的圖標。
//圖標
var shadowUrl = "http://leafletjs.com/examples/custom-icons/leaf-shadow.png";
var orangeUrl = "http://leafletjs.com/examples/custom-icons/leaf-orange.png";
var redUrl = "http://leafletjs.com/examples/custom-icons/leaf-red.png";
var greenUrl = "http://leafletjs.com/examples/custom-icons/leaf-green.png";
<!DOCTYPE html> <html> <head> <title>Leaflet</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"> <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> <style TYPE="text/css"> body { margin: 0px; padding: 0px; } /** * 單獨設置mapid為00%不顯示，可能float坍塌 */ html, body, #mapid { height: 100%; width: 100%; } </style> </head> <body> <div id="map"> </div> </body> <script> var map = L.map(‘map‘).setView([51.5, -0.09], 13); L.tileLayer(‘http://{s}.tile.osm.org/{z}/{x}/{y}.png‘, { attribution: ‘© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors‘ }).addTo(map); var LeafIcon = L.Icon.extend({ options: { shadowUrl: ‘leaf-shadow.png‘, iconSize: [38, 95], shadowSize: [50, 64], iconAnchor: [22, 94], shadowAnchor: [4, 62], popupAnchor: [-3, -76] } }); var greenIcon = new LeafIcon({ iconUrl: ‘leaf-green.png‘ }), redIcon = new LeafIcon({ iconUrl: ‘leaf-red.png‘ }), orangeIcon = new LeafIcon({ iconUrl: ‘leaf-orange.png‘ }); L.marker([51.5, -0.09], { icon: greenIcon }).bindPopup("I am a green leaf.").addTo(map); L.marker([51.495, -0.083], { icon: redIcon }).bindPopup("I am a red leaf.").addTo(map); L.marker([51.49, -0.1], { icon: orangeIcon }).bindPopup("I am an orange leaf.").addTo(map); </script> </html>
用GeoJSON
http://leafletjs.com/examples/geojson/example.html
在本教程中，您將學習如何創建和使用地圖矢量產生互動GeoJSON目標
交互圖
http://leafletjs.com/examples/choropleth/example.html
創造一個豐富多彩的互動為例分布圖我們國家的人口密度和一些自定義控件GeoJSON。新聞網站會將這份愛。
待續
Leaflet_創建地圖（官網示例）