有时须要告诉用户地图上的一些目标,若是该目标是只须要一个坐标就能表示的,称其为“标注”。javascript
标注,是指地图上只须要一个坐标便可表示的元素。例如,在经纬度(116, 39)处画一个圆,在(108, 30)处画一个符号,这些都属于标注,也能够将标注理解为“点元素”。html
咱们知道,只知道经纬度是不能直接在地图上做图的,须要先用投影函数将其转换成像素坐标。例如,若是要在中国地图上标出“北京”的位置,可是不知道北京的像素坐标。北京的经纬度可经过查询得知是(116.3, 39.9),将此值做为投影函数的参数便可获得像素坐标。其实,GeoJSON文件的地理信息也是经纬度,也是通过投影函数转换后获得了像素坐标。所以,若是使用同一个投影函数,那么转换后的北京坐标便可直接在地图上绘制。java
首先,定义一个投影函数以下。json
var projection = d3.geo.mercator() .center([107, 31]) .scale(600) .translate([width/2, height/2]);
其次,使用此投影定义地理路径生成器 d3.geo.path,用于绘制地图。数组
var path = d3.geo.path() .projection(projection);
而后,以北京的经纬度做为投影的参数,获得北京的像素坐标。app
var peking = [116.3, 39.9]; var proPeking = projection(peking);
最后,用上面获得的像素坐标绘制一个圆,该圆就正好位于北京的位置。svg
svg.append("circle") .attr("class","point") .attr("cx",proPeking[0]) .attr("cy",proPeking[1]) .attr("r",8);
下面制做一个例子,要求以下:wordpress
在中国地图上标注出五个城市的位置,并在各标注处添加一张该城市的图片,五个城市分别是北京、上海、桂林、乌鲁木齐、拉萨。函数
首先,搜集五个城市的经纬度和图片,在网上可查到。将图片保存在网页HTML文件同一目录下的img文件夹里,而后写一个JSON文件,将经纬度信息和图片路径信息聚集起来。JSON文件内容以下。.net
{ "name": "地点", "location": [ { "name":"北京", "log":"116.3", "lat":"39.9", "img":"img/beijing.png" }, { "name":"上海", "log":"121.4", "lat":"31.2", "img":"img/shanghai.png" }, /***** 省略 *****/ ] }
图片的数据是不存在JSON文件里的,仅仅保存路径便可。绘制完地图后,调用d3.json请求places.json文件,并经过绑定数组location添加足够数量的分组元素<g>,每一个分组表明一个城市。利用分组元素<g>的transform属性可将标注点平移到指定位置,平移量可经过投影函数计算城市的经纬度获得。
而后,向<g>里分别添加圆形<circle>和图片<image>。<image>是SVG的图片元素,只须要五个属性就够了。
<image xlink:href="image.png" x="200" y="200" width="100" height="100"> </image>
其中,
请求文件及插入标注点的代码以下。
d3.json("places.json", function(error, places ) { //插入分组元素 var location = svg.selectAll(".location") .data(places.location) .enter() .append("g") .attr("class","location") .attr("transform",function(d){ //计算标注点的位置 var coor = projection([d.log, d.lat]); return "translate("+ coor[0] + "," + coor[1] +")"; }); //插入一个圆 location.append("circle") .attr("r",7); //插入一张图片 location.append("image") .attr("x",20) .attr("y",-40) .attr("width",90) .attr("height",90) .attr("xlink:href",function(d){ return d.img; }); });
结果本文开头的图片所示。
完整代码打开如下连接,右键选择查看源代码:
http://www.ourd3js.com/demo/G-7.0/mappoint.html
中国地图的TopoJSON文件:china.topojson
南海诸岛:southchinasea.svg
指定图片路径的JSON文件:places.json
谢谢阅读。