更多了解 geolocation 對(duì)象，可參考MDN Web 文檔

更多了解使用 marker 高亮顯示，可參考leaflet.marker.highlight插件
基于 Demo 1 利用 leaflet 封裝好的 H5 定位 API,定位到當(dāng)前位置 Demo

庫引用 如上 Demo 1

設(shè)置地圖縮放到指定圖層

map.setZoom(10, {
  // animate: false
})  //設(shè)置地圖縮放到

圖層往里進(jìn)一個(gè)圖層，放大

map.zoomIn() //圖層往里進(jìn)一個(gè)圖層，放大
//map.zoomOut()  //圖層往里出一個(gè)圖層，縮小

地圖平移至中心點(diǎn)

map.panTo([37.91082, 128.73583], {
    animate: true
}) //地圖平移，默認(rèn)就是true，將地圖平移到給定的中心。如果新的中心點(diǎn)在屏幕內(nèi)與現(xiàn)有的中心點(diǎn)不同則產(chǎn)生平移動(dòng)作。

地圖飛到中心點(diǎn)

map.flyTo([36.52, 120.31]); // 點(diǎn)到點(diǎn)的拋物線動(dòng)畫，平移加縮放動(dòng)畫

注意：盡量避免 setZoom()等地圖縮放方法與 flyTo、flyToBounds 一起合用，因?yàn)檫@兩類地圖操作方法都有各自的縮放值，造成動(dòng)畫不流暢、不能定位到目的點(diǎn)。

地圖飛到邊界的合適的位置

map.flyToBounds(polygon.getBounds());   //getBounds（獲取邊界）：返回地圖視圖的經(jīng)緯度邊界。
    //飛到這個(gè)多變形區(qū)域上面，自動(dòng)判斷區(qū)域塊的大小，合適縮放圖層，將地圖視圖盡可能大地設(shè)定在給定的地理邊界內(nèi)。

let polygon = L.polygon(
          [[37, -109.05],
          [41, -109.03],
          [41, -102.05],
          [37, -102.04]],
     [40.774, -74.125], {
       color: "green",
       fillColor: "#f03",
       fillOpacity: 0.5
    }).addTo(map);  //地圖上繪制一個(gè)多形

地圖定位到邊界的合適的位置

map.fitBounds(polygon.getBounds());  //getBounds（獲取邊界）：返回地圖視圖的經(jīng)緯度邊界。
  //平移到一個(gè)區(qū)域上面，自動(dòng)判斷區(qū)域塊的大小，合適縮放圖層

let polygon = L.polygon(
          [[37, -109.05],
          [41, -109.03],
          [41, -102.05],
          [37, -102.04]],
     [40.774, -74.125], {
       color: "green",
       fillColor: "#f03",
       fillOpacity: 0.5
    }).addTo(map);  //地圖上繪制一個(gè)多邊形

庫引用

使用 esri-leaflet 插件加載 ArcGIS 底圖服務(wù)

let oMap = null;
    let oLayer = [];

    oMap = L.map("mapDiv", {
        crs: L.CRS.EPSG4326,
        zoomControl: false,
        minZoom: 7,
        attributionControl: false
    }).setView([29.59, 106.59], 12); //定位在重慶

    oLayer.push(L.esri.tiledMapLayer({
        url: urlTemplate.SYS_CQMap_IMG_MAPSERVER_PATH,
        maxZoom: 17,
        minZoom: 0,
        useCors: false, //是否瀏覽器在跨域的情況下使用GET請(qǐng)求。
    }).addTo(oMap)); //加載第一個(gè)底圖

    oLayer.push(L.esri.tiledMapLayer({
        url: urlTemplate.SYS_CQMap_IMG_LABEL_MAPSERVER_PATH,
        maxZoom: 17,
        minZoom: 0,
        useCors: false,
    }).addTo(oMap));  //加載第二個(gè)底圖

切換底圖(移除及加載)

const setLayer = (layerUrls, maxZoom) => {
        for (let i = 0; i < oLayer.length; i++) {
            oMap.removeLayer(oLayer[i]) //將圖層在地圖上移除
        }
        oLayer = [] //制空數(shù)組
        layerUrls.map((item) => {
            oLayer.push(L.esri.tiledMapLayer({
                url: item,
                useCors: false,
                maxZoom: maxZoom, // 設(shè)置最大放大圖層值
            }).addTo(oMap));
        })
    }

不同的底圖可能圖層數(shù)不一樣，就可能造成瀏覽器去請(qǐng)求不存在的圖層，以及給用戶展示出空白區(qū)域的不好體驗(yàn)，所以切換圖層時(shí)候應(yīng)注意設(shè)置最大及最小縮放值。

庫引用 如上 Demo 1

畫一個(gè)圓

// 畫一個(gè)circle
const circle = L.circle([36.52, 120.31], {
  color: "green", //描邊色
  fillColor: "#f03",  //填充色
  fillOpacity: 0.5, //透明度
  radius: 10000 //半徑，單位米
}).addTo(map);
// 綁定一個(gè)提示標(biāo)簽
circle.bindTooltip("我是個(gè)圓");

Maker 及自定義 Maker

// 做一個(gè)maker
const marker = L.marker([36.52, 120.31]).addTo(map);
// 綁定一個(gè)提示標(biāo)簽
marker.bindTooltip("這是個(gè)Marker", { direction: "left" }).openTooltip();


//自定義一個(gè)maker
const greenIcon = L.icon({
  iconUrl: "./icon/logo.png",
  iconSize: [300, 79], // size of the icon
  popupAnchor: [0, -10] // point from which the popup should open relative to the iconAnchor
});

const oMarker = L.marker([36.52, 124.31], { icon: greenIcon }).addTo(map);
// 綁定一個(gè)提示標(biāo)簽
oMarker.bindTooltip("這是個(gè)自定義Marker", { direction: "left", offset: [-150, 0] });

畫一根線

//畫一根線
const polyline = L.polyline([[45.51, -122.68], [37.77, -122.43], [34.04, -118.2]], { color: "red" }).addTo(map);
// 飛到這個(gè)線的位置
// map.fitBounds(polyline.getBounds());

畫一個(gè)多邊形

// 畫一個(gè)polygon
const polygon = L.polygon([
  [[37, -109.05], [41, -109.03], [41, -102.05], [37, -102.04]], // outer ring
  [[37.29, -108.58], [40.71, -108.58], [40.71, -102.50], [37.29, -102.50]] // hole
], {
    color: "green",
    fillColor: "#f03",
    fillOpacity: 0.5
  }).addTo(map);
// 綁定一個(gè)提示標(biāo)簽
polygon.bindTooltip("this is 個(gè)多邊形");
// 飛到這個(gè)多邊形的位置
// map.fitBounds(polygon.getBounds());

庫引用 如上 Demo 1

畫一個(gè) circle 并綁定一個(gè) Popup

// 畫一個(gè)circle
const circle = L.circle([36.92, 121.31], {
 color: "green", //描邊色
 fillColor: "#f03",  //填充色
 fillOpacity: 0.5, //透明度
 radius: 10000 //半徑，單位米
}).addTo(map);

// 綁定一個(gè)彈窗
circle.bindPopup("我是個(gè)圓");

定位一個(gè) marker，綁定一個(gè)自定義 Popup

// 定位一個(gè)maker
const marker = L.marker([36.52, 120.31]).addTo(map);

//maker上自定義一個(gè)popup
const html = "
Hello world!
This is a nice popup.
";

const popup = marker.bindPopup(html, { maxHeight: 250, maxWidth: 490, className: "content", offset: [0, 0] }).on("popupopen", function (params) {
  console.log(params)
});

實(shí)現(xiàn)動(dòng)態(tài)改變 Popup 的內(nèi)容

const mypop = L.popup();

map.on("click", function (e) {
  mypop.setLatLng(e.latlng)
    .setContent("你臨幸了這個(gè)點(diǎn)：
" + e.latlng.toString())
    .openOn(map);
});

庫引用 如上 Demo 1

獲得 geojson 并處理數(shù)據(jù)

// 請(qǐng)求geojson并處理數(shù)據(jù)
const population = () => {
    $.get("./js/geojson.json", function (response) {
        const poplData = response.data
        const PolygonsCenter = response.geopoint
        drawPolygons(poplData, PolygonsCenter)
    });
}

模擬后臺(tái)返回的數(shù)據(jù)geojson

繪制邊界并添加圖例

let oPolygon_VilPop = [];

const legend = L.control({
    position: "bottomright"
 });

const drawPolygons = (poplData, PolygonsCenter) => {
    for (const i in poplData) {
        poplData[i].geoJson = JSON.parse(poplData[i].geoJson)
        oPolygon_VilPop[i] = L.geoJSON(poplData[i].geoJson, {
            style: function () {
                return {
                    color: "white",
                    fillColor: getBgColor(poplData[i].population), //獲取邊界的填充色
                    fillOpacity: 0.6,
                    weight: 3,
                    dashArray: "10"
                };
            }
        }).bindTooltip(poplData[i].villageName + "

人口" + poplData[i].population + "人", {
            direction: "top"
        }).on({
            mouseover: highlight, //鼠標(biāo)移動(dòng)上去高亮
            mouseout: resetHighlight, //鼠標(biāo)移出恢復(fù)原樣式
            click: zoomTo //點(diǎn)擊最大化
        }).addTo(oMap);
    }

    // 添加圖例
    legend.onAdd = legendHtml;
    legend.addTo(oMap);

    // 定位到該界限的中心位置
    oMap.flyToBounds(PolygonsCenter);
}

// 添加圖例
legend.onAdd = legendHtml;
legend.addTo(oMap);

// 定位到該界限的中心位置
oMap.flyToBounds(PolygonsCenter);
}

返回邊界的填充色及圖列的樣式

const getBgColor = (d) => {
    return d > 400 ? "#800026" : d > 300 ? "#BD0026" : d > 200 ? "#FC4E2A" : d > 100 ? "#FD8D3C" : d > 50 ? "#FED976" : "#FFEDA0";
}

const legendHtml = (map) => {
    let div = L.DomUtil.create("div", "legend locateVP_legend"),
        grades = [0, 50, 100, 200, 400],
        labels = [],
        from, to;
    for (let i = 0; i < grades.length; i++) {
        from = grades[i];
        to = grades[i + 1];
        labels.push(
            " " +
            from + (to ? " ∼ " + to + "人" : "以上"));
    }
    div.innerHTML = labels.join("
");
    return div;
    };

鼠標(biāo)移動(dòng)上去的事件、鼠標(biāo)移出的事件、發(fā)生點(diǎn)擊的事件

const highlight = (e) => {
    let layer = e.target;
    layer.setStyle({
        weight: 6,
        color: "#fff",
        fillOpacity: 0.9,
        dashArray: "0"
    })
}

const resetHighlight = (e) => {
    let layer = e.target;
    layer.setStyle({
        color: "white",
        weight: 3,
        fillOpacity: 0.6,
        dashArray: "10"
    })
}

const zoomTo = (e) => {
    oMap.fitBounds(e.target.getBounds());
}

Leaflet.ChineseTmsProviders Provider for Chinese Tms Service

Leaflet 調(diào)用國內(nèi)各種地圖的功能十分復(fù)雜，幸好有 leaflet.ChineseTmsProviders 這個(gè)插件，這四種地圖直接就可以加載進(jìn)來，十分方便。

使用方法很簡單可點(diǎn)擊上面鏈接去 GitHub 看使用說明，或拉這個(gè) demo下來來瞧一瞧代碼。

提供了豐富多彩的圖標(biāo) Leaflet.awesome-markers, See the demo map

強(qiáng)大的集聚插件 Leaflet.markercluster, See the demo map

優(yōu)化的 label Leaflet.label, See the demo map

優(yōu)化重疊在一起的 markers OverlappingMarkerSpiderfier-Leaflet, See the demo map

優(yōu)化在邊框上顯示不在當(dāng)前視野中的 marker Leaflet.EdgeMarker, See the demo map

引 leaflet 包的時(shí)候不要忘記引用包里的 css import "leaflet/dist/leaflet.css";

查看了下源碼 if (!proj4) { warn("L.esri.TiledMapLayer is using a non-mercator spatial reference. Support may be available through Proj4Leaflet http://esri.github.io/esri-leaflet/examples/non-mercator-projection.html");} 問題就出在這里，esri-leaflet 里的一個(gè)插件 proj4leaflet 依賴proj4，所以需要手動(dòng)引入 proj4 這個(gè)包。

這個(gè) GitHub 上面的提問及回答 Github esri-leaflet Issues

如果你是模塊化開發(fā)，需要再npm i proj4 然后再引入進(jìn)來好了 import * as proj4 from "proj4"; window["proj4"] = proj4;

如果你是常規(guī)開發(fā)，直接添加一個(gè) script 標(biāo)簽引用 CDN 資源上托管的Proj4js就是了

Leaflet-Develop-Guide