使用D3.js繪製重慶地圖
阿新 • • 發佈：2019-01-26
重慶市地圖json資料下載連結https://pan.baidu.com/s/19eZfuGGRY6JOrH9WnZJ5iw 密碼h5f9D3.js下載連結:https://pan.baidu.com/s/13wKelQUjueTY-pP4zUEkww 密碼15te
由於JSON檔案中的地圖資料，都是經度和緯度的資訊。他們都是三維的，而要在網頁上顯示的為二維，所以需要設定一個投影函式來轉換經緯度。1.center()設定地圖的中心位置[107,31]指的是經度和緯度。2.scale()設定放大的比例。3.translate()設定平移。
使用d3.geo.path(),來深成svg中path元素的路徑值projection()是設定生成器的投影函式，把上面定義的投影傳入即可。實現程式碼
由於JSON檔案中的地圖資料，都是經度和緯度的資訊。他們都是三維的，而要在網頁上顯示的為二維，所以需要設定一個投影函式來轉換經緯度。1.center()設定地圖的中心位置[107,31]指的是經度和緯度。2.scale()設定放大的比例。3.translate()設定平移。使用d3.geo.path(),來深成svg中path元素的路徑值projection()是設定生成器的投影函式，把上面定義的投影傳入即可。實現程式碼效果圖<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/d3.v3.js" ></script> </head> <body> <script> var width = 1000; var height = 600; var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var projection = d3.geo.mercator() .center([107, 31]) .scale(40000) .translate([width / 4, height / 4]); var path = d3.geo.path() .projection(projection); var isclick=false; var clicknum=0; var path; d3.json("重慶市市轄區.json", function(d) { var china = svg.append("g") .attr("transform", "translate(0,0)"); china.selectAll("path") .data(d.features) .enter() .append("path") .attr("stroke", "#000") .attr("stroke-width", 0) .attr("fill", "#575757") .attr("id", function(d) { return d.properties.id; }) .attr("d", path) }); </script> </body> </html>