地图的数据结构解析

在数据可视化中,地图的使用频率是很高的。我之前一直都是用第三方的地图组件,比如ECharts这种。但是在业务开发中,往往会有一些个性化需求,这个时候就很难通过组件去实现了,需要我们深入细节,具备修改底层逻辑的能力。因此我们务必要了解地图的实现原理。

数据结构

可视化,或者说前端,都是数据驱动的,因此第一步还是老样子:先了解作图的数据结构。

GeoJSON

TopoJSON

projection

Projections transform spherical polygonal geometry to planar polygonal geometry.

projection很有意思,可以看下d3-geo这个库关于projection的说明,里面的方法都涉及了很多数学运算,可以实现包括缩放、移动、指定中心点、角度变更、根据投影点返回未投影点等。

那么我们平时到底该选择哪种projection呢?可以看下d3-geo首页下方的示例:

https://github.com/d3/d3-geo#projections

中国地图可以选择:d3.geoTransverseMercator()

世界地图可以选择:d3.geoNaturalEarth1()

元素拆解

边框

区域

事件

标注

通过一个Demo来了解常用API和概念

从哪里找经纬度数据?

参考资料

d3-geo:

https://github.com/d3/d3-geo

D3作者讲解各种projection:

https://vimeo.com/106198518#t=20m0s