D3.js在svg地图上标点

来源：互联网发布：js向object中添加元素编辑：程序博客网时间：2024/05/14 15:46

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