vue+d3 問題

javascript html vue.js d3.js

lingwu 2020-04-10 00:26:13 ‧ 6053 瀏覽

分享至

我想要單一的縣市的地圖
使用在vue上
但是網路上都只教全台灣地圖的方法

假如我需要台北市的地圖想要只把台北市抓取下來?
如果我用geojson.io手刻把行政邊界描出來，然後存成json檔，這樣是否可行?

然後我有一些標點是用geojson.io標記出來
存成geojson
那我要怎麼把標點放上我的地圖上?
我知道有leaflet這個方法
但是網路上教學很少跟地圖一起用的範例

ShawnL iT邦新手 1 級 ‧ 2020-04-10 10:00:11 檢舉

圖資其實不用手刻這麼辛苦~
網路上都有一些 Open Data 可以使用喔
https://data.gov.tw/dataset/7442
如果只要特定區域的話，可以理解一下 GeoJSON 的結構，修改即可

anthonylinwen iT邦新手 5 級 ‧ 2021-03-19 23:50:56 檢舉

高手請出列！！！我也有同樣的問題，就是試不出來。
有照著樓上的做法，將 GeoJSON 座標過濾掉只剩台北市及新北市，
但畫出來就是怪怪的，懇請邦內高手，將這小問題的 solution 說明白。
如果這問題換成下面的方式問，觀念會比較清楚
(1)從下面下載全台灣(鄉鎮市區界圖)。
https://data.gov.tw/dataset/7441 (鄉鎮市區界圖)
(2)將前述下載的 .shp檔，只留台北市、新北市內的各區座標 (例如:大安區、信義區....板橋區、三重區等等)。
我用 QGIS 過濾 (1)下載的 shp 檔，在"圖形預視"裡也只剩看到台北市 + 新北市內的各區。
(3)第(2)步驟最後另存一個 .shp檔。
(4)透過 https://mapshaper.org 將 .shp 轉 .geojson 。
(5) d3 + vue 寫網頁程式將 .geojason 座標檔讀入，並呈現地圖。
結果：畫出地圖坐標太小、太密緊在一起。

登入發表討論