在 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 | 未知 |
![[jQuery] 使用 .on 將事件綁到動態產生的元素上](/assets/upload/1588088792122_0.jpg)
![[CodeIgniter 4] 使用 CSRF 保護資料的傳遞，並說明搭配 axios/AJAX 的呼叫方法](/assets/upload/1598766168885_0.jpg)
