leaflet.js 透過 geoJson 將台灣行政區資訊繪製至地圖上

在 WebGIS 的服務上，我們都可以透過 GeoJSON 把地區相關的圖資繪製至地圖上，這邊說明用 leaflet.js 的方法，首先還是先將地圖畫出來。

接著去下載台灣地區的 GeoJSON 資料，可以到鄉鎮市區行政區域界線下載想要的地區，雖然網站有提示好一段時間沒更新，但用了之後覺得應該還是沒啥問題，使用 SQL 語法找出想要的內容比較快，像是：

SELECT * FROM this WHERE C_Name = '桃園市' ORDER BY _id_ ASC

按下 run 後，在右上角下載的地方選擇 GeoJSON 的格式後下載，我把其命名為 taoyuan.json。

內容大致會長這樣，可以注意節點。

{"type":"FeatureCollection","features":[
{"type":"Feature","properties":{"OBJECTID":"23","T_UID":"23","Area":"34339119.6038","Town_ID":"6800100","T_Name":"桃園區","Add_Date":"2014\/12\/25","Add_Accept":"","Remark":"","County_ID":"68","C_Name":"桃園市","_id":19260337},"geometry":{"type":"Polygon","coordinates":[[[121.301705159,25.033170582],[121.301799362,25.033170391],[121.301893574,25.033174479],[121.301997186,25.033169989],..

接著將資料讀入地圖：

fetch("taoyuan.json")
    .then(response => response.json())
    .then(json => {
    taoDist = L.geoJSON(json).bindPopup(function (layer) {
        return layer.feature.properties.T_Name;
    }).addTo(map);
    map.fitBounds(taoDist.getBounds());
});

就能看到桃園各區的邊界了。

這裡只有顯示分區名稱，還有以下節點的資訊可以綁：

參考：
26. Leaflet_建立高雄市區界地圖