有时须要告诉用户地图上的一些目标，假设该目标是仅仅须要一个坐标就能表示的，称其为“标注”。

1. 标注是什么

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

我们知道。仅仅知道经纬度是不能直接在地图上作图的，须要先用投影函数将其转换成像素坐标。

比如。假设要在中国地图上标出“北京”的位置。可是不知道北京的像素坐标。北京的经纬度可通过查询得知是(116.3, 39.9)，将此值作为投影函数的參数就可以得到像素坐标。事实上，GeoJSON文件的地理信息也是经纬度。也是经过投影函数转换后得到了像素坐标。因此。假设使用同一个投影函数，那么转换后的北京坐标就可以直接在地图上绘制。

2. 在D3的地图上怎样标注

首先，定义一个投影函数例如以下。

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);

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

var peking = [116.3, 39.9];
var proPeking = projection(peking);

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

svg.append("circle")
.attr("class","point")
.attr("cx",proPeking[0])
.attr("cy",proPeking[1])
.attr("r",8);

3. 在中国地图上标注五个地点

以下制作一个样例。要求例如以下：

在中国地图上标注出五个城市的位置。并在各标注处加入一张该城市的图片。五个城市各自是北京、上海、桂林、乌鲁木齐、拉萨。

首先。搜集五个城市的经纬度和图片。在网上可查到。将图片保存在网页HTML文件同一文件夹下的img文件夹里，然后写一个JSON文件，将经纬度信息和图片路径信息汇集起来。JSON文件内容例如以下。

{
"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>

当中，

• xlink:href：图片名称或图片网址
• x：图片坐上角 x 坐标
• y：图片坐上角 y 坐标
• width：图片宽度
• height：图片高度

请求文件及插入标注点的代码例如以下。

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;
});
});

4. 结果

结果本文开头的图片所看到的。

完整代码打开以下链接。右键选择查看源码：

http://www.ourd3js.com/demo/G-7.0/mappoint.html

中国地图的TopoJSON文件：china.topojson

南海诸岛：southchinasea.svg

指定图片路径的JSON文件：places.json

谢谢阅读。

文档信息

• 版权声明：署名（BY）-非商业性（NC）-禁止演绎（ND）
• 发表日期：2015 年 6 月 6 日
• 很多其它内容：OUR D3.JS - 数据可视化专题站 和 CSDN个人博客
• 备注：本文发表于 OUR D3.JS ，转载请注明出处，谢谢