有時需要告訴用戶地圖上的一些目標，如果該目標是只需要一個座標就能表示的，稱其爲“標註”。
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 ，轉載請註明出處，謝謝
