leaflet簡單操作demo
阿新 • • 發佈：2017-10-11
polygon width enter oom 級別 head itl 業務 做了
今天大意了解了一下leaflet這個開源的 JavaScript 庫，很強大。
結合騰訊地圖，做了個簡單的demo，作為一個學習的起點吧（各種API結合自身的業務）
<!DOCTYPE html> <html> <head> <title>map</title> </head> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <style type="text/css"> /*確定map容器的高度，寬度*/ #map { height: 640px; width: 320px; } </style> <body> <!-- 地圖容器 --> <div id="map"></div> <script type="text/javascript"> //加載gis地圖 var southWest = [22.53491493,113.96075249],//地圖西南點坐標 northEast= [22.5587753,113.99362564],//地圖東北點坐標 bounds = L.latLngBounds(southWest, northEast);//地圖邊界 //####設置地圖設置地圖中心和縮放級別 var map = L.map(‘map‘,{ zoomControl: false, //隱藏默認縮放按鈕 attributionControl: false,//隱藏copyright //center: new L.LatLng("22.54185077705975", "113.9806441116333"),//加載地圖的中心點//zoom: "16",//默認顯示層級 maxBounds: bounds,//地圖的邊界 maxZoom:"20",//最大顯示層級 minZoom:"1",//最小顯示層級 attribution: ‘Map data © <a href="http://www.cnblogs.com/liugx/p/7651379.html">szliugx</a>‘,//添加copyright，無效(已經禁用) }).setView(["22.54185077705975", "113.9806441116333"], 16);//默認顯示16層級，設置默認加載中心點經緯度 //####添加標註、圓形、多邊形 //添加標註 var marker = L.marker([22.54383, 113.98049]).addTo(map); marker.bindPopup("<b>Hello world!</b><br>這是一個湖").openPopup(); //#####添加圓形 var circle = L.circle([22.5363, 113.98069], 50, { color: ‘red‘, fillColor: ‘#f03‘, fillOpacity: 0.5 }).addTo(map); //circle.bindPopup("這是圈圈").openPopup(); // //#####添加多邊形 var polygon = L.polygon([ [22.54784, 113.97779], [22.54685, 113.98079], [22.54649, 113.97899] ]).addTo(map); //polygon.bindPopup("土豪聚集地").openPopup();; //#####添加彈出氣泡 //xxx.bindPopup("xxx").openPopup();; //#####處理事件 function onMapClick(e) { alert("You clicked the map at " + e.latlng); } map.on(‘click‘, onMapClick); L.TileLayer.WebDogTileLayer = L.TileLayer.extend({ getTileUrl: function (tilePoint) { var urlArgs, getUrlArgs = this.options.getUrlArgs; if (getUrlArgs) { var urlArgs = getUrlArgs(tilePoint); } else { urlArgs = { z: tilePoint.z, x: tilePoint.x, y: tilePoint.y }; } return L.Util.template(this._url, L.extend(urlArgs, this.options, {s: this._getSubdomain(tilePoint)})); } }); L.tileLayer.webdogTileLayer = function (url, options) { return new L.TileLayer.WebDogTileLayer(url, options); }; var url = ‘http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0‘; options = { //分布式域名前綴標識 subdomains: ‘012‘, //重寫騰訊地圖的瓦片圖規則 getUrlArgs: function (tilePoint) { return { z: tilePoint.z, x: tilePoint.x, y: Math.pow(2, tilePoint.z) - 1 - tilePoint.y }; } }; //L.tileLayer就是矢量瓦片底圖，用對應的URL上找對應的z，y，x。而s是分布式服務器快速選取。最後，tileLayer圖層要addTo(map)加載在地圖觀察器上。 L.tileLayer.webdogTileLayer(url, options).addTo(map); </script> </body> </html>
leaflet簡單操作demo