iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 26
1

讓我們來實際利用開放資料來建立圖層吧!首先,以Leafletjs 起手式建立基本頁面。

高雄市區界的geojson資料是從鄉鎮市區行政區域界線下載的,可以透過SQL存取高雄市的部分並下載json檔。

SELECT * FROM this WHERE C_Name = '高雄市' ORDER BY _id_ ASC

GeoJSON

這邊就使用geoJSON直接讀取JSON檔案,並建立高雄市區界的圖層,JSON檔案長這樣:

KaoDistrictRange.json
還有里界可以使用
KaoVillageRange.json

{"type":"FeatureCollection","features":[
{"type":"Feature","properties":{"OBJECTID":"235","T_UID":"235","Area":"1655533.40795","Town_ID":"6400100","T_Name":"鹽埕區","Add_Date":"","Add_Accept":"","Remark":"","County_ID":"64","C_Name":"高雄市","_id":19260547},"geometry":{"type":"Polygon","coordinates":[[[120.290219468,22.615106506],[120.290186563,22.614945442],[120.29006683,22.615033052],[120.28925434,22.615399957],[120.289000096,22.615509709],[120.288042494,22.615933482],[120.287306017,22.616260......
,
{"type":"Feature","properties":{"OBJECTID":"236","T_UID":"236","Area":"22108804.5528","Town_ID":"6400200","T_Name":"鼓山區","Add_Date":"","Add_Accept":"","Remark":"","County_ID":"64","C_Name":"高雄市","_id":19260548},"geometry":{"type":"Polygon","coordinates":[[[120.278784742,22.673804866],[120.27891088,22.673714586],[120.279201221,22.673497506],[120.279546326,22.673228529],[120.279616652,22.673146423],[120.27986103,22.672960896],[120.280246557,22.672637102],[120.280486229,22.672455888],[120.280810652,22.672179563],[120.28091874,22.672097589],[120.281355998,22.67172629],[120.281529911,22.671588189],[120.281685033,22.671463008],[120.281818171,22.671405023],[120.281921219,22.671392454],[120.28.....

利用fetch取得本機端的高雄市區界geoJSON檔案

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

在這邊只有將區名加入popup中,但其實還有一些資訊可以加入:

名稱 資料內容 範例
County_ID 市碼 64
C_Name 縣市名 高雄市
Town_ID 區碼 6400100
T_Name 區名 鹽埕區
Area 面積 1655533.40795
Add_Date 更新日期 可能空值
Add_Accept 未知 可能空值
Remark 未知 可能空值
_id 未知 可能空值

成果

加入區界的地圖如下,可以看到地圖已經將範圍調整至可以看到高雄市全部區界的範圍,可能有人會有疑問為何還有非台灣本島的地方也在裡面,那是因為左下角的東沙島也屬於旗津區的一部分,所以在getBounds的時候,也會將它納入參考的範圍中:

可參考完成的html檔


上一篇
25. Folium_QuickStart
下一篇
27. Folium_建立高雄市里界地圖
系列文
使用Leaflet及Folium開啟網頁地圖大門30

1 則留言

0
SunAllen
iT邦高手 1 級 ‧ 2018-11-10 15:20:03

高雄耶...鄰居,這幾天,有被PM2.5淹沒嗎XD

/images/emoticon/emoticon42.gifSunAllen嗨~前幾天早上都霧濛濛的XD沒事都不敢出門/images/emoticon/emoticon35.gif

我要留言

立即登入留言