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


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

谢谢阅读。

文档信息

【 D3.js 高级系列 — 7.0 】 标注地点的更多相关文章

  1. 【 D3.js 高级系列 — 1.0 】 文本的换行

    在 SVG 中添加文本是使用 text 元素.但是,这个元素不能够自动换行,超出的部分就显示不出来了,怎么办呢? 高级系列开篇前言 从今天开始写高级系列教程.还是那句话,由于本人实力有限,不一定保证入 ...

  2. 【 D3.js 高级系列 — 4.0 】 矩阵树图

    矩阵树图(Treemap),也是层级布局的扩展,根据数据将区域划分为矩形的集合.矩形的大小和颜色,都是数据的反映.许多门户网站都能见到类似图1,将照片以不同大小的矩形排列的情形,这正是矩阵树图的应用. ...

  3. 【 D3.js 高级系列 — 6.0 】 值域和颜色

    在[入门 - 第 10 章]作了一张中国地图,其中各省份的颜色值都是随意赋值的.如果要将一些值反映在地图上,可以利用颜色的变化来表示值的变化. 1. 思路 例如,有值域的范围为: [10, 500] ...

  4. 【 D3.js 高级系列 — 2.0 】 机械图 + 人物关系图

    机械图(力路线图)结合老百姓的关系图中的生活,这是更有趣. 本文将以此为证据,所列的如何图插入外部的图像和文字的力学. 在[第 9.2 章]中制作了一个最简单的力学图.其后有非常多朋友有疑问,基本的问 ...

  5. 【 D3.js 高级系列 — 10.0 】 思维导图

    思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layou ...

  6. 【 D3.js 高级系列 — 9.0 】 交互式提示框

    一般来说,图表中不宜存在过多文字.但是,有时需要一些文字来描述某些图形元素.那么,可以实现一种交互:当用户鼠标滑到某图形元素时,出现一个提示框,里面写有描述文字.这是一种简单.普遍的交互式,几乎适用于 ...

  7. 【 D3.js 高级系列 — 8.0 】 标线

    有时候,需要在地图上绘制连线,表示"从某处到某处"的意思,这种时候在地图上绘制的连线,称为"标线". 1. 标线是什么 标线,是指地图上需要两个坐标以上才能表示 ...

  8. 【 D3.js 高级系列 — 5.0 】 颜色

    颜色是作图不可少的概念,常用的标准有 RGB 和 HSL,D3 提供了创建颜色对象的方法,能够相互转换和插值. RGB色彩模式是通过对红(Red).绿(Green).蓝(Blue)三个颜色通道相互叠加 ...

  9. 【 D3.js 高级系列 — 3.0 】 堆栈图

    堆栈图布局(Stack Layout)能够计算二维数组每一数据层的基线,以方便将各数据层叠加起来.本文讲解堆栈图的制作方法. 先说说什么是堆栈图. 例如,有如下情况: 某公司,销售三种产品:个人电脑. ...

随机推荐

  1. VIM配置(转载)

    注: 转载于http://www.cnblogs.com/ma6174/ 花了很长时间整理的,感觉用起来很方便,共享一下. 我的vim配置主要有以下优点: 1.按F5可以直接编译并执行C.C++.ja ...

  2. 【最小生成树】BZOJ 1196: [HNOI2006]公路修建问题

    1196: [HNOI2006]公路修建问题 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1435  Solved: 810[Submit][Sta ...

  3. NGUI屏幕自适应解决方案

    NGUI研究院之自适应屏幕 http://www.xuanyusong.com/archives/2536 Unity3D研究院之使用Android的硬件缩放技术优化执行效率 http://www.x ...

  4. Javascript操作表格隔行变色

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. hdu 4111 Alice and Bob 博弈论

    这里有2种方法: 方法一:求SG函数 sg[i][j]:i表示1的个数,j表示合并操作的步数. 这共有4种操作: 1.消除一个1: 2.减掉一个1: 3.合并2个1: 4.把1合并到另外不是1中. 代 ...

  6. [SQL Server 系] -- 模糊查询

    SQL Server中的通配符有下面四种 通配符 说明 % 包含零个或多个字符的任意字符串 _(下划线) 任意单个字符 [ ] 任意在指定范围或集合中的单个字符 [^ ] 任意不在指定范围或集合中的单 ...

  7. [Unity菜鸟] Time

    1. Time.deltaTime 增量时间 以秒计算,完成最后一帧的时间(秒)(只读) 帧数所用的时间不是你能控制的.每一帧都不一样,游戏一般都是每秒60帧,也就是updata方法调用60次(假如你 ...

  8. Generic repository pattern and Unit of work with Entity framework

    原文 Generic repository pattern and Unit of work with Entity framework Repository pattern is an abstra ...

  9. linux下,如何把整个文件夹上传到服务器(另一台linux)

    1.Linux下目录复制:本机->远程服务器 scp  -r /home/shaoxiaohu/test1  zhidao@192.168.0.1:/home/test2 #test1为源目录, ...

  10. Sqlmap基础(一)

    (1)选项:-r REQUESTFILE      Load HTTP request from a file (2)选项:--current-db        Retrieve DBMS curr ...