MF-ThreeMap icon indicating copy to clipboard operation
MF-ThreeMap copied to clipboard

🗺 一个纯three.js实现的3D地图方案

🗺 MF-ThreeMap

一个纯three.js实现的3D地图方案

项目说明

  • 由于案例的地图范围有75km,图片资源第一次加载需要较长时间,请耐心等待

  • 如需提高地图瓦片清晰度,可以修改src/components/Map组件的配置项,案例的瓦片层级是12,最高17

  • 请使用chorme浏览器打开, 360浏览器或者其他浏览器请将模式调整成极速模式

项目简介

在项目中需要应用的知识点:

  • [x] EPSG:4326与 EPSG:3857的坐标系的转换

  • [x] 地图瓦片数量与缩放层级的数量关系

  • [x] 缩放层级和分辨率的数量关系

  • [x] 分辨率与实际距离数量关系

  • [x] 通过经纬度计算瓦片地图的行列号

  • [x] 地图瓦片原点和EPSG:3857坐标系原点的差异

项目截图