【 D3.js 高级系列 — 7.0 】 标注地点

本文详细介绍了如何在D3.js中进行地图标注,包括标注的定义、在D3地图上标注的方法,以及在中国地图上标注五个城市的具体步骤。通过投影函数将经纬度转换为像素坐标,结合SVG元素绘制标注点并添加图片,实现地图上的信息展示。
摘要由CSDN通过智能技术生成

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

701

1. 标注是什么

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

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

2. 在D3的地图上如何标注

首先,定义一个投影函数如下。

var projection = d3.geo.mercator()
			.center([
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值