iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 28
0
Data Technology

讓你資料美美的(d3.js+vue.js)系列 第 28

d3+vue 愛逮丸啦

  • 分享至 

  • xImage
  •  

d3 + vue

這次想結合d3及vue來做一個跟台灣有關的東西

先來產生畫台灣地圖所需要的檔案GeoJSON,可以利用一個nodejs的套件(shapefile)來幫忙產生,請參考,這是d3的作者Mike Bostock製作的npm套件

使用這個套件需要先安裝nodejs,安裝好之後就可以使用npm,來安裝shapefile
npm install -g shapefile

在要產生GeoJSON之前當然要想辦法弄到地理資料,這個部分可以選擇政府的opendata或是其他公開的地圖資訊(如NATURAL EARTH)

這次就使用咱逮丸自己的開放資料平台的直轄市、縣市界線(TWD97經緯度)來用,下載shp檔回來準備轉換一下

解壓縮後會得到6個檔案,其中要進行轉換的是.shp的檔案
shp2json COUNTY_MOI_1060525.shp -o taiwan.json
轉換之後發現中文字變成亂碼QQ

是big5的關係,所以要注意一下編碼的問題,預設是使用windows-1252可以參考
shp2json COUNTY_MOI_1060525.shp -o taiwan.json --encoding big5

完成之後就會得到json檔
https://ithelp.ithome.com.tw/upload/images/20180118/20105602xwG9EOvMHe.png
這個看不懂,但還是要看看,不然不知道之後怎麼拿需要的資料

所以看這個吧
https://ithelp.ithome.com.tw/upload/images/20180118/20105602TLovnHRByW.png
這樣就可以稍微看看了...


上一篇
D3 tree
下一篇
d3+vue 愛逮丸啦2
系列文
讓你資料美美的(d3.js+vue.js)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言