今天來打醬油畫個台灣地圖。

地圖放到 d3 上面之前要先轉個檔，我們想要的是 topojson，比較省空間。

資料來源，台灣政府開放資料
https://data.gov.tw/dataset/7441
https://data.gov.tw/dataset/7442
因為上面目前都是 shape 檔，關於 shape 檔的介紹可以參考這篇鐵人文介紹。

目前看到轉檔的方法

• SHP to geojson

1. gdal 專案裡面的 ogr2ogr 工具。
2. 也是來自 d3 作者的開源專案 shapefile
   裡面的 shp2json 指令。

• geojson to topojson

1. 利用 topojson 的子專案 topojson-server 的 geo2topo 指令來轉

好...，其實可以直接用 https://mapshaper.org/
這個網頁直接轉，因為他也有簡化地圖的功能。而且有提供指令使用，我們就用他的 mapshaper 來轉。

1. 安裝

npm install -g mapshaper

2. 轉檔

mapshaper TOWN_MOI_1080726.shp -info 這指令可以看檔案的相關資訊，詳細指令請參考 mapshaper 文件。

帶入簡化 50 % 的參數及輸出格式 topojson 來轉檔：

mapshaper TOWN_MOI_1080726.shp -simplify 50% -o format=topojson

[simplify] Repaired 0 intersections; 950 intersections could not be repaired
[o] Detected DBF text encoding: utf8
Sample text containing non-ascii characters:
  臺東縣  成功鎮  屏東縣  佳冬鄉  雲林縣  麥寮鄉  綠島鄉  蘭嶼鄉  彰化縣  田中鎮  社頭鄉  竹田鄉  萬丹鄉  苗栗縣  三灣鄉  新竹縣
  峨眉鄉  南庄鄉  臺中市  南屯區  烏日區  嘉義縣  太保市  中埔鄉  番路鄉  水上鄉  員林市  高雄市  小港區  宜蘭縣  蘇澳鎮  五結鄉
  宜蘭市  壯圍鄉  連江縣  南竿鄉  莒光鄉  金門縣  金寧鄉  烏坵鄉  羅東鎮  員山鄉  冬山鄉  三星鄉  大同鄉  竹東鎮  新埔鎮  關西鎮
  湖口鄉  芎林鄉
[o] Wrote TOWN_MOI_1080726.json

這裡我們有帶入簡化的參數，轉出來的大小是 3.2 MB，這... 還可以接受吧。

接下來我們把這個檔案丟到我們之前的墨西哥程式碼裡，就可以畫出一張地圖了。

1. 這裡看起來很小是因為很重要的太平島之類的島也在這張地圖裡。
2. 程式碼“在此”用到的是第五版的 d3, 跟第四版不同的是取資料改用 Promise ，所以 //0 的地方接著呼叫的是 .then 跟舊版的程式碼會不太一樣。
3. //1 地圖資料在畫到 SVG 前都需要經過投影轉到實際的 SVG 位置。
4. //2 這裡是依據 SVG 大小及輸入的地理資料取中點作位移。
5. //3 就是前一篇提到的 select, bind, update d3 常見手法。

這樣的 SVG 地圖很陽春，接下來我們會慢慢改善這張地圖。大概想做的事：

1. 可以拖拉縮放。
2. 加資料上去看。
3. 調整投影方式，讓台灣看起來大一點。

其他補充資訊：

1. 轉shp到geojson檔指令，參考自 kuro網誌

ogr2ogr -f "GeoJSON" -s_srs EPSG:3826 -t_srs EPSG:4326 output.json TOWN_MOI_1080726.shp

2. osgeo 組織網站提供了相當豐富的 GIS 開源資訊。
3. 另一位大大的轉檔文
4. d3 作者 Mike 的d3 地圖教學