使用d3画中国地图

阅读更多

参考的是以下两篇文章:

Let’s Make a Map和Interactive Map with d3.js

GEO data下载在natural earth网站,不过我用的抽取数据的命令是:

ogr2ogr -f GeoJSON -where "ADM0_A3 = 'CHN'" cn_cities.json ne_10m_populated_places.shp

ogr2ogr -f GeoJSON -where "sr_adm0_a3 = 'CHN'" cn_province.json ne_10m_admin_1_states_provinces_lakes_shp.shp

ogr2ogr -f GeoJSON -where "gu_a3 = 'CHN'" countries.json ne_10m_admin_0_countries_lakes.shp

具体参数其实可以先用ogr2org不带条件把整个数据导出来,然后再用编辑器看看每一条记录的参数都是什么,再用ogr2ogr带条件的把想要的数据导出来.

中间有一个关键的projection,投影.文中的albers projection中文名称叫等积圆锥投影,搜了一下参数,用如下code即可,简单原理就是

1. 先放大图形

2. 然后转换长宽到自己想要的大小

3. 然后旋转使自己的区域所在经度居中,以0°为基准,西经为正数,东经为负数,参数文中中国正中为105°:

4. 然后变换中心使自己的区域所在维度居中.

5. 标称维度,参数文中为27°和45°.

var projection = d3.geo.albers()
    .scale(800)
    .translate([width / 2, height / 2])
    .rotate([-105, 0])
    .center([0, 36])
    .parallels([27, 45]);