关闭

D3.js在svg地图上标点

标签: pathd3地图d3.js
1481人阅读 评论(0) 收藏 举报
分类:

需要实现的需求就是在一张世界地图上将给定的经纬度坐标点绘制出来。
地图如下:
这里写图片描述
地图使用的是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"}]
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:24287次
    • 积分:421
    • 等级:
    • 排名:千里之外
    • 原创:22篇
    • 转载:1篇
    • 译文:0篇
    • 评论:7条
    文章分类
    最新评论