D3.js 繪製台灣地圖 | 台灣地圖svg
Taiwannoone!!今天突然想到很多年前,曾經有做過地圖定位的效果,但是當時公司是請設計用Potoshop製作地圖圖片,再用javascript將圖片定位上去,想想都6,7年前的事了,現在應該有比較不一樣的方法了吧,沒想到D3.js真的太強大,使用svg也可以做得到,所以這算懷舊之旅嗎?!首先要繪製台灣地圖就不能缺少台灣經緯度,這裏可以免費下載[1]我是下載SHP後再將COUNTY_MOI_1060525.shx檔案轉成taiwan.json,你也可以到這裡[2]下載就好如果你想自己轉檔可以參考https://bost.ocks.org/mike/map/http://blog.maxkit.com.tw/2016/06/d3js.html...
Taiwan no one!!今天突然想到很多年前,曾經有做過地圖定位的效果,但是當時公司是請設計用Potoshop製作地圖圖片,再用javascript將圖片定位上去,想想都6,7年前的事了,現在應該有比較不一樣的方法了吧,沒想到D3.js真的太強大,使用svg也可以做得到 ,所以這算懷舊之旅嗎?!
首先要繪製台灣地圖就不能缺少台灣經緯度,這裏可以免費下載[1] 我是下載SHP後再將COUNTY_MOI_1060525.shx檔案轉成 taiwan.json , 你也可以到這裡[2]下載就好如果你想自己轉檔可以參考https://bost.ocks.org/mike/map/http://blog.maxkit.com.tw/2016/06/d3js.html
<script src="https://i1.wp.com/d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="https://i1.wp.com/d3js.org/topojson.v1.min.js"></script> <script src="https://i1.wp.com/ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> css : 增加背景海洋漸層 設定地圖的縣市的邊框線條顏色body {
background-color: #fff;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#398fd6+5,7db9e8+76 */
background: #398fd6;
/* Old browsers */
background: -moz-linear-gradient(-45deg, #398fd6 5%, #7db9e8 76%);
/* FF3.6-15 */