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());
});

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

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

名稱 資料內容
County_ID 市碼
C_Name 縣市名
Town_ID 區碼
T_Name 區名
Area 面積
Add_Date 更新日期
Add_Accept 未知
Remark 未知
_id 未知

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

 

課程推薦

ChatGPT X Clipchamp AI 生成影片、配音與字幕應用實戰班

ChatGPT X Clipchamp AI 生成影片、配音與字幕應用實戰班

輸入折扣碼 TC1451JAN 還可以額外獲得 NT$500 優惠喔。

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。