# MF-ThreeMap

**Repository Path**: lingfengsu/MF-ThreeMap

## Basic Information

- **Project Name**: MF-ThreeMap
- **Description**: 一个纯three.js实现的3D地图方案
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: example
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2024-05-03
- **Last Updated**: 2025-04-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🗺 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`坐标系原点的差异
  

##

## 项目截图

![](https://raw.githubusercontent.com/fengtianxi001/Three-3DMap/main/screenshot/5.png)