D3.js在svg地图上标点

原创 2016年06月01日 19:07:38

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

【 D3.js 高级系列 — 7.0 】 标注地点

有时需要告诉用户地图上的一些目标,如果该目标是只需要一个坐标就能表示的,称其为“标注”。1. 标注是什么标注,是指地图上只需要一个坐标即可表示的元素。例如,在经纬度(116, 39)处画一个圆,在(1...
  • lzhlzz
  • lzhlzz
  • 2015年06月06日 08:40
  • 6473

【 D3.js 入门系列 --- 10 】 地图的绘制

本节学习用 D3 制作地图的方法。需要用到 GeoJSON 文件,这个文件的获取比较困难,我花了一些时间制作好了,希望能与大家分享。本文使用中国地图的数据进行绘制。...
  • lzhlzz
  • lzhlzz
  • 2014年08月21日 20:33
  • 19444

【 D3.js 入门系列 --- 10.2 】 可拖动的地图

本文是结合地图和力学图制作的一个可拖动的地图。用户可以自由的用手拖动中国的各省。...
  • lzhlzz
  • lzhlzz
  • 2014年09月03日 10:35
  • 12407

D3地图上如何标注坐标点

原文地址 http://blog.csdn.net/lzhlzz/article/details/46385299,部分引用,重点关注坐标点的投影转换。 1. 标注是什么 标注,是指地图上只需...
  • zhang1244j
  • zhang1244j
  • 2015年06月11日 10:06
  • 2134

SVG坐标系统与坐标转换

这一章非常基础,非常重要,同时也是相对比较难懂一点的,特别是ViewBox与视口的关系 1.坐标系统与视口(ViewPort) SVG中的坐标系统也是由横坐标轴(X轴)、纵坐标轴(Y轴)和...
  • luqin1988
  • luqin1988
  • 2013年01月30日 10:10
  • 4547

d3js-v4-map-1最简单的canvas地图

实现一个简单的geoMap。 依赖库:d3js v4 canvas渲染 1. 最简单的实现: var width = 1300, height = 800; //...
  • sgcc_zhs
  • sgcc_zhs
  • 2017年07月11日 03:46
  • 1231

D3js-值域渐变地图

根据各个省份的数值从小到大,显示的颜色由浅到深。 效果图: 源代码: D3 值域渐变地图 .tooltip{ font...
  • u013147600
  • u013147600
  • 2015年07月03日 10:06
  • 3269

D3 地图可视化数据(美国地图)

  • 2017年10月18日 19:53
  • 33KB
  • 下载

d3.js——图形缩放平移操作

缩放操作 var width = 400, height = 400; var circles =[{cx:150,cy:200,r:30}, ...
  • Selina_Chan
  • Selina_Chan
  • 2016年05月10日 10:38
  • 7729

【 D3.js 高级系列 — 7.0 】 标注地点

有时需要告诉用户地图上的一些目标,如果该目标是只需要一个坐标就能表示的,称其为“标注”。1. 标注是什么标注,是指地图上只需要一个坐标即可表示的元素。例如,在经纬度(116, 39)处画一个圆,在(1...
  • lzhlzz
  • lzhlzz
  • 2015年06月06日 08:40
  • 6473
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:D3.js在svg地图上标点
举报原因:
原因补充:

(最多只允许输入30个字)