讓我們來實際利用開放資料來建立圖層吧！首先，以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中，但其實還有一些資訊可以加入：

成果

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

可參考完成的html檔