标注

有时需要告诉用户地图上的一些目标,如果该目标是只需要一个坐标就能表示的,称其为“标注”。

标注是什么

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

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

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

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

下面制作一个例子,要求如下:

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

首先,搜集五个城市的经纬度和图片,在网上可查到。将图片保存在网页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>

其中,

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

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

结果

源代码

下载地址:point.zip

在线演示

委托名片直接发送邮件(需邮箱客户端)点击复制邮箱地址14721230383项目委托、技术支持,欢迎与我们联系。休息日7:00 ~ 11:0012:00 ~ 22:00工作日11:00 ~ 11:4016:00 ~ 22:00

Copyright 2014-2016, DecemberCafe, All Rights Reserved