D3.js在svg地圖上標點

fudanstar發表於2016-06-01
JSSVG地圖

需要實現的需求就是在一張世界地圖上將給定的經緯度座標點繪製出來。
地圖如下：
這裡寫圖片描述
地圖使用的是svg格式，而不是d3推薦的GeoJSON格式或TopoJSON格式的地圖資料。地圖是使用svg格式使用path路徑繪製而成。
在地圖上會點，首先設定墨卡託投影：

//translate設定投影轉換的偏移值d3.geo.graticule()獲取經緯網
var projection = d3.geo.mercator().translate([480, 490]).rotate([x_rotate,0,0]),
    graticule = d3.geo.graticule();

然後獲取該投影下的路徑

var path = d3.geo.path().projection(projection);

然後將結果資料繪製到svg圖上：

var paths = map_results.data(results)
  .enter()
  .append("path")
  .attr("d", function(d){return path(d.track)})
  .attr("id", function(d){return "map_" + d.id})
  .attr("class", "svg_trackline")
  .attr("fill", "#f00")
  .attr("stroke", "#f00")
  .attr("stroke-opacity", 1)
  .attr("stroke-width", 4);

其中results的資料格式為：

[{"id":"1001","FileName":"檔案1","voyage":"航次1","station":"站位1","track": {"type": "Point", "coordinates": [-74.1682, -37.998]},"observation":"觀測方式1","size":"檔案大小1","downloads":"1"},
  {"id":"1002","FileName":"檔案2","voyage":"航次2","station":"站位2","track": {"type": "Point", "coordinates": [-56.8855, -38.1172]},"observation":"觀測方式2","size":"檔案大小2","downloads":"2"},
  {"id":"1003","FileName":"檔案3","voyage":"航次3","station":"站位3","track": {"type": "Point", "coordinates": [143.0042, -65]},"observation":"觀測方式3","size":"檔案大小3","downloads":"3"}]

相關文章