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

一、思路: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标记 如下图


      这里写图片描述



  1. 数据整理如图:


    这里写图片描述
  • layer3 第三层,根据已有的坐标打点。通过 projection([lgt,lat]) 转成的 [x,y], 使用 translate(x,y) 将点放到相应的 svg 位置, 就完成了

–end

发布了48 篇原创文章 · 获赞 6 · 访问量 7万+

猜你喜欢

转载自blog.csdn.net/github_36327470/article/details/78807131