【 D3.js 高級系列 — 7.0 】標註地點

時間 2019-11-09

原文原文鏈接

有時須要告訴用戶地圖上的一些目標，若是該目標是隻須要一個座標就能表示的，稱其爲「標註」。javascript

1. 標註是什麼

標註，是指地圖上只須要一個座標便可表示的元素。例如，在經緯度(116, 39)處畫一個圓，在(108, 30)處畫一個符號，這些都屬於標註，也能夠將標註理解爲「點元素」。html

咱們知道，只知道經緯度是不能直接在地圖上做圖的，須要先用投影函數將其轉換成像素座標。例如，若是要在中國地圖上標出「北京」的位置，可是不知道北京的像素座標。北京的經緯度可經過查詢得知是(116.3, 39.9)，將此值做爲投影函數的參數便可獲得像素座標。其實，GeoJSON文件的地理信息也是經緯度，也是通過投影函數轉換後獲得了像素座標。所以，若是使用同一個投影函數，那麼轉換後的北京座標便可直接在地圖上繪製。java

2. 在D3的地圖上如何標註

首先，定義一個投影函數以下。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);

3. 在中國地圖上標註五個地點

下面製做一個例子，要求以下：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>

其中，

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