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


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. win7旗舰版安装office2007后打开文件提示找不到proplusww.msi

    今天第一次打开2007的excel,出现错误如下: 解决办法: 转自:http://blog.163.com/huacai9420@126/blog/static/521585422011911524 ...

  2. trie树(前缀树)

    问题描述:   Trie树,即字典树,又称单词查找树或键树,是一种树形结构,是一种哈希树的变种.典型应用是用于统计和排序大量的字符串(但不仅限于字符串),所以经常被搜索引擎系统用于文本词频统计.它的优 ...

  3. 提升SQL Server速度整理索引碎片

    转载:http://wenku.baidu.com/view/f64c8a707fd5360cba1adbea.html SQL Server2005索引碎片分析和解决方法   毫无疑问,给表添加索引 ...

  4. uva 11489

    简单博弈 #include <cstdio> #include <cstdlib> #include <cmath> #include <map> #i ...

  5. struts2+hibernate+spring+jquery返回json List列表

    1.引入包:struts2-json-plugin-2.1.8.1.jar json-lib-2.1.jar commons-collections-3.2.1.jar commons-beanuti ...

  6. jquery层居中,点击小图查看大图,弹出层居中代码

    1.层居中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  7. Android 调节当前Activity的屏幕亮度

    调节的关键代码: WindowManager.LayoutParams layoutParams = getWindow().getAttributes(); layoutParams.screenB ...

  8. vector、string实现大数加法乘法

    理解 vector 是一个容器,是一个数据集,里边装了很多个元素.与数组最大的不同是 vector 可以动态增长. 用 vector 实现大数运算的关键是,以 string 的方式读入一个大数,然后将 ...

  9. ibaits与spring整合的心得

    Ibatis2.3与spring3.0整合,其要明确一下,Ibatis与Hibernate一样都是dao层链接数据库用的框架.它是一个轻量级的orm框架,比Hibernate更加灵活. sqlMapC ...

  10. windows下编译FreeSwitch

    FreeSWITCH的是一个跨平台的开源电话交换平台 windows版本:win7 64位的操作系统 [下载] 我下载的是release版本,下载的文件是freeswitch-1.4.20.zip,下 ...