鐵人檔案
因為剛接觸 Vue3 也對 Leaflet.js 有興趣，利用這 30 天學習如何將學過 Vue3 搭配 Leaflet.js 實作地圖，順便學習時也踩坑看看有...
Leaflet.js 是什麼 Leaflet 是一個開源的函式庫，能夠實現基本的地圖操作，建立圖層、標記、彈出窗口、縮放等操作。 怎麼導入Leaflet.js...
接下來要介紹地圖新增標記，如何在地圖上使用事件，以及標記上設定訊息框。 標記 L.marker L.marker(latlng, options) latln...
除了可以用 L.marker() 或 L.circle() 等方式建立基本圖標，也可以用 L.icon() 客製圖標。 L.icon() L.icon(opti...
本篇要來介紹如何將 GeoJSON 的資料顯示在地圖上 GeoJSON的參數 L.geoJSON(geojson, options) L.geoJSON 的...
本篇使用 leaflet 官方提供的範例完成人口密度地圖，使用已準備好的 GeoJSON 資料產生多邊形，並且摸到該區塊加入樣式。 官方範例網址: https:...
昨天在人口密度地圖實作了摸到區塊會有樣式效果，今天來實作點擊區塊能夠移到區塊範圍，除了新增點擊區塊也新增顯示區塊的資訊和地圖每個人口密度顏色的資訊。 點擊地圖區...
之前都是在地圖上切換單一圖層，今天要來學習怎麼在地圖上切換不同圖層。 透過 L.layerGroup() 組合圖層資料 地圖上如果需要添加不同的 marker，...
地圖設定 scale、zoom 控制地圖 leaflet 有提供控制地圖縮放和建立控制比例元件 L.control.scale 使用 L.control.sca...
地圖如果需要加載圖片可使用 ImageOverlay 這個功能 參數介紹: L.imageOverlay(<String> imageUrl, &l...
