一、思路:d3.geo.mercator 地理投影,可将经纬度转成平面坐标系[x,y]
二、效果查看:https://lefthandcat.github.io/geoD3Map/
三、代码已放 github: https://github.com/leftHandCat/geoD3Map
三、具体步骤:
-
layer1 第一层,读取 geoJson.json 画出轮廓
- 可以去这个网站下载主要国家,省,市的 geoJson http://www.ourd3js.com/wordpress/296/#more-296)
- 在 http://geojson.io 查看改区域范围
-
layer2 第二层,随机点,直接在 geojson.io 上标记,将标记的点数据用对象放在 geoJson.json 后面。读取 geoJson.json 画出随机点
- geojson标记 如下图
- 数据整理如图:
- geojson标记 如下图
layer3 第三层,根据已有的坐标打点。通过 projection([lgt,lat]) 转成的 [x,y], 使用 translate(x,y) 将点放到相应的 svg 位置, 就完成了
–end