Leaflet 讀取 GeoJSON 檔

透過
在地圖上把台灣縣市地區框選起來
並且點擊後會有 popup 提示該地區的縣市名稱
練習 Leaflet 的一些操作

起步

先照著官網教學
引入相關文件
把初始地圖建出來
https://leafletjs.com/examples/quick-start/

//  建立 Leaflet 地圖
var map = L.map("mapid");
//  設定經緯度座標
map.setView(new L.LatLng(25, 121.74739), 13);
//  設定圖資來源
var osmUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
var osm = new L.TileLayer(osmUrl, { minZoom: 3, maxZoom: 16 });
map.addLayer(osm);

讀入 GeoJSON 檔

根據Web 視覺化(四)：建立 OpenStreetMap 地圖提到

Leaflet 無法直接讀取 GeoJSON 檔案，必須先透過 Ajax 等方式下載下來才行。這邊將使用 jQuery 做例子

$.getJSON("YOURFILE.json", function (r) {
  L.geoJSON(r, { color: "#333" }).addTo(map);
});

這樣就可以讀取 geoJSON

替區塊著色

希望讓不同區塊有不同顏色
這邊試做一個，把新北市著色

$.getJSON("taiwan.json", function (r) {
  L.geoJSON(r, {
    //  樣式可透過function操作
    style: function (feature) {
      if (feature.properties.COUNTYID == 65) {
        console.log(feature.properties.NAME_2014);
        return { color: "#4f45c0" };
      } else {
        return { color: "#444444" };
      }
    },
    onEachFeature: onEachFeature,
  }).addTo(map);
});

點擊區塊彈出提示

這邊希望該縣市區塊後會彈出提示的視窗
這邊的 NAME_2014 是該資料中的 properties 有這個 NAME_2014 屬性
裡面是該縣市地區的名字

//  綁定每個feature做Popup，可以視資料有什麼properties來決定
function onEachFeature(feature, layer) {
  if (feature.properties && feature.properties.NAME_2014) {
    layer.bindPopup(feature.properties.NAME_2014);
  }
}

另外再加入官網範例中
點地圖的其他位置後
顯示座標位置

var popup = L.popup();
function onMapClick(e) {
  popup
    .setLatLng(e.latlng)
    .setContent("You clicked the map at " + e.latlng.toString())
    .openOn(map);
}
map.on("click", onMapClick);

其他延伸

如果想要自己繪製
可以使用geojson.io的服務

資料來源

中華民國縣市的 geojson 檔
Leaflet 對 GeoJSON 的官方說明
老外教學影片