根据 geoJson, 使用 d3 画出地图及经纬度打点

时间:2024-04-05 22:04:22

一、思路:d3.geo.mercator 地理投影,可将经纬度转成平面坐标系[x,y]

二、效果查看:https://lefthandcat.github.io/geoD3Map/

三、代码已放 github: https://github.com/leftHandCat/geoD3Map

三、具体步骤:

  • layer1 第一层,读取 geoJson.json 画出轮廓

    1. 可以去这个网站下载主要国家,省,市的 geoJson http://www.ourd3js.com/wordpress/296/#more-296
    2. http://geojson.io 查看改区域范围
  • layer2 第二层,随机点,直接在 geojson.io 上标记,将标记的点数据用对象放在 geoJson.json 后面。读取 geoJson.json 画出随机点

    1. geojson标记 如下图

      根据 geoJson, 使用 d3 画出地图及经纬度打点


    2. 数据整理如图:

      根据 geoJson, 使用 d3 画出地图及经纬度打点
  • layer3 第三层,根据已有的坐标打点。通过 projection([lgt,lat]) 转成的 [x,y], 使用 translate(x,y) 将点放到相应的 svg 位置, 就完成了

–end