轻量级三维瓦片地图开发框架
three-tile 是一个开源的轻量级前端三维瓦片框架，基于 threejs 使用 TypeScript 开发，提供三维地形模型，能轻松给你的应用增加三维瓦片地图。经过数十版迭代，框架功能、效果能够满足生产环境使用，已在多个项目中得到验证和应用。
three-tile 更像是游戏开发中的 LOD 地形，但它可以使用地图服务商提供的数据渲染地图。
::: warning 免责声明 本框架不含任何地图数据，示例和演示程序中使用的地图均为直接挂接第三方数据，并不代表本开发框架立场。开发者请遵循相关法律规定使用合法地图。 :::
| 特性 | 说明 |
|---|---|
| 轻量级 | 打包后（不包括插件）不到70KB（zip：28KB），轻松集成到你的项目中 |
| 速度快 | 资源占用做到极致优化，内存占用少，渲染速度快，核显也能轻松达到60fps |
| 依赖少 | 目前仅 threejs（V0.171）一个外部依赖，各项功能均自主实现 |
| 易扩展 | 插件式架构，瓦片数据加载、解析、建模、渲染过程均与核心独立，扩展性强 |
| 使用简单 | 熟悉 threejs 基本上没有学习成本 |
在 threejs 示例中，大部分简单应用使用一个平面作为地面，如果能把平面换为真实地形，效果立马提升。仅需三步：
- 定义地图数据源
- 创建地图模型
- 地图模型加入三维场景
three-tile 地图模型可直接使用主流瓦片数据源，渲染出逼真的地形；提供地理坐标（经纬度海拔高度）到三维场景坐标的转换，能将地图元素（模型、标签）叠加在指定地理位置。
完美支持 threejs 内置的各种控制器，仅更换控制器，即可实现第一人称、飞行等游戏功能。
大气、卫星云图、风场动画、体渲染等数据可视化场景。
npm i three -S
npm i three-tile -S<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.171.0/build/three.module.js",
"three-tile": "https://unpkg.com/three-tile@0.11.10/dist",
"three-tile/plugin": "https://unpkg.com/three-tile@0.11.10/dist/plugin"
}
}
</script>import * as THREE from "three";
import * as tt from "three-tile";
import * as plugin from "three-tile/plugin";
// 创建地图
const map = tt.TileMap.create({
// 影像数据源
imgSource: new plugin.ArcGisSource(),
// 地形数据源
demSource: new plugin.ArcGisDemSource(),
});
// 地图旋转到xz平面
map.rotateX(-Math.PI / 2);
// 初始化场景
const viewer = new plugin.GLViewer("#map");
// 地图添加到场景
viewer.scene.add(map);内置支持主流瓦片地图服务：
- ArcGIS
- Mapbox
- Bing
- 天地图
- 高德
- 腾讯
同时支持自定义瓦片数据源扩展。
| 分类 | 示例 |
|---|---|
| 基础功能 | 获取鼠标位置 · 获取加载信息 · 设置地图缩放 · 自定义地图源 |
| 地图显示 | 假地球 · 指南针 · 限制相机高度 · 天空盒 |
| 地形控制 | 添加网格 · 地形缩放 · 限制平移 · 设置地图边界 |
| 材质效果 | 添加阴影 · CSS滤镜 · 添加天空 · 添加水面 |
| 数据叠加 | GeoJSON · MVT · WMS源 · CSS2D标签 |
| 模型加载 | 添加模型 · 图标标注 · Logo标注 · 白色模型 |
| 地形特效 | 蒙版 · 单张DEM · 单张影像 · 创建孔洞 · 多边形孔洞 |
| 场景配置 | 背景 · 切换控制器 · 地面组 · 2D地图 |
| 高级应用 | 非地图瓦片 · 3DTiles渲染 · SplatLuma · SplatDrei |
| 案例 | 说明 |
|---|---|
| 第一人称 | 第一人称视角漫游 |
| 飞行控制 | 自由飞行模式 |
| 行走漫游 | 地面行走漫游 |
| 卫星云图渲染 | 三维云图展示 |
| 等高线 | 地形等高线 |
| 大气效果 | 大气渲染效果 |
| GeoJSON 3D | GeoJSON三维建筑物展示 |
MIT License