1.創建地圖

GOD.LMap = L.map("LMap", {zoom: 13,minZoom: 5,zoomControl: false,attributionControl: false,center: [39.904989, 116.405285], //注意：leaflet中坐標的展示，第一個是緯度，第二個 值是經度});

2.添加瓦片

GOD.tileALayer = L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png') GOD.tileALayer.addTo(GOD.LMap)

3.創建Marker

import M0 from "./images/seleImg.png"; let icon = L.icon({iconUrl: M0,iconSize: [24, 24],iconAnchor: [12,22],}); let RMarkerExterDataPoint = L.marker([arr[1], arr[0]], {icon}).bindTooltip(text);GOD.RMarkerExterDataPoint = new L.layerGroup([RMarkerExterDataPoint]).addTo(GOD.LMap);清除點的圖層：GOD.RMarkerExterDataPoint && GOD.RMarkerExterDataPoint.clearLayers && GOD.RMarkerExterDataPoint.clearLayers();

4.面的繪制

后臺會返回wkt字符串：let wkt="POLYGON((102.797302689433 36.5936423859273,105.519115206186 29.4789248520356,100.346180647351 19.9699202912212))"; !GOD.catchCountyT && (GOD.catchCountyT = {}); //初始化賦值為{} let geoJson= WKT.parse(result); //wkt轉為geoJson //如果是一個區域繪制：GOD.CityPolygons = L.geoJSON({"type": "FeatureCollection","features": [geoJson]}, {style: function (feature) {return {weight: 2,color: '#7140B5',fillColor: 'rgba(255, 255, 255, 0.2)',fillOpacity: 0.7,extData: {countyCode}}}});GOD.CityPolygons.addTo(GOD.LMap);//多個區域同時繪制，方便后面操作某一個區域（刪除修改）GOD.catchCountyT[countyCode] = L.geoJSON({ //多個區域同時繪制"type": "FeatureCollection","features": [geoJson]}, {style: function (feature) {return {weight: 2,color: '#7140B5',fillColor: 'rgba(255, 255, 255, 0.2)',fillOpacity: 0.7,extData: {countyCode}}}}); GOD.catchCountyT[countyCode] && GOD.catchCountyT[countyCode].addTo(GOD.LMap); //添加到地圖里清除圖層： GOD.CityPolygons && GOD.CityPolygons.clearLayers && GOD.CityPolygons.clearLayers(); GOD.catchCountyT && Object.keys(GOD.catchCountyT).forEach((item, index) => {GOD.catchCountyT[item].clearLayers();})

總結

以上是生活随笔為你收集整理的Leaflet创建,tileLayer,marker,面的绘制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。