D3地图上如何标注坐标点

原文地址 http://blog.csdn.net/lzhlzz/article/details/46385299,部分引用,重点关注坐标点的投影转换方法。

1. 标注是什么

标注,是指地图上只需要一个坐标即可表示的元素。例如,在经纬度(116, 39)处画一个圆,在(108, 30)处画一个符号,这些都属于标注,也可以将标注理解为“点元素”。

我们知道,只知道经纬度是不能直接在地图上作图的,需要先用投影函数将其转换成像素坐标。例如,如果要在中国地图上标出“北京”的位置,但是不知道北京的像素坐标。北京的经纬度可通过查询得知是(116.3, 39.9),将此值作为投影函数的参数即可得到像素坐标。其实,GeoJSON文件的地理信息也是经纬度,也是经过投影函数转换后得到了像素坐标。因此,如果使用同一个投影函数,那么转换后的北京坐标即可直接在地图上绘制。

2. 在D3的地图上如何标注

首先,定义一个投影函数如下。

  1. var projection = d3.geo.mercator()  
  2.             .center([107, 31])  
  3.             .scale(600)  
  4.             .translate([width/2, height/2]);  

其次,使用此投影定义地理路径生成器 d3.geo.path,用于绘制地图。

[javascript] view plaincopy
  1. var path = d3.geo.path()  
  2.                 .projection(projection);  

然后,以北京的经纬度作为投影的参数,得到北京的像素坐标。

[javascript] view plaincopy
  1. var peking = [116.3, 39.9];  
  2. var proPeking = projection(peking);  

最后,用上面得到的像素坐标绘制一个圆,该圆就正好位于北京的位置。

[javascript] view plaincopy
  1. svg.append("circle")  
  2.     .attr("class","point")  
  3.     .attr("cx",proPeking[0])  
  4.     .attr("cy",proPeking[1])  
  5.     .attr("r",8);  


展开阅读全文

没有更多推荐了,返回首页