three-tile 介绍

three-tile 是一个开源、轻量的前端三维瓦片地图框架，基于 threejs 使用 TypeScript 开发。它提供一个三维地形模型，可以轻松地为现有应用增添三维瓦片地图能力。框架历经数十次迭代，功能与效果均已满足生产环境要求，并在多个项目中得到验证和应用。

框架源码：https://github.com/sxguojf/three-tile
Vue 演示：https://sxguojf.github.io/mydemo/three-tile-vue/index.html
问题讨论：https://github.com/sxguojf/three-tile/issues

免责声明：

本框架不含任何地图数据，示例和演示程序中使用的地图均为直接挂接第三方数据，并不代表本开发框架立场。开发者请遵循相关法律规定使用合法地图。

1. three-tile 是什么？

three-tile 是一套基于 threejs 的前端三维瓦片地图框架。
three-tile 是基于 cesium、mapbox 等框架的二次封装吗？不是，它完全基于 threejs 自主实现。
three-tile 更像游戏开发中的 LOD 地形，但可以直接使用地图服务商提供的地形与影像瓦片数据渲染地图。
three-tile 是 3D WebGIS 吗？不是，它的 GIS 能力较弱，以数据可视化为主，不提供地理信息数据分析功能。
three-tile 的核心与地图无关——它本质上就是一个 LOD 模型，地图只是其典型应用之一。

2. three-tile 的特点

相比市面上常见三维地图，three-tile 有如下特点：

轻量级：地图以一个三维模型的形式提供，引入它不会对已有程序架构产生任何影响。
依赖少：整个框架仅有 threejs（>=R171）一个外部依赖。
效果好：虽然小巧，地图显示效果却不输 cesium 等重量级框架。
速度快：对资源占用做了极致优化，核显也能轻松跑满 60FPS。
使用简单：熟悉 threejs 的话，基本没有学习成本。
扩展性强：采用插件架构，数据格式、模型、纹理、材质、渲染过程均可按需扩展和替换。

3. 应用场景

3.1 给现有应用增加地形

在 threejs 示例中，大部分简单应用都用一个平面充当地面。如果把这个平面换成真实地形，效果立马不一样：


threejs 中的傻鸟	加上地形，让它翱翔在青藏高原	threejs 中可爱的小房子	西安南二环找块工地放上去
three.js examples (threejs.org)	three-tile demo (sxguojf.github.io)	three.js examples (threejs.org)	three-tile demo (sxguojf.github.io)

threejs 中孤独的小兵兵	放到地图上执行任务	threejs 中平淡无奇的夕阳	加上地形才是它真正的效果
three.js examples (threejs.org)	three-tile demo (sxguojf.github.io)	three.js examples (threejs.org)	three-tile demo (sxguojf.github.io)

而实现这一切，使用 three-tile 仅需三步：

定义地图数据源
创建地图模型
用地图替换原来的平面

3.2 简单的 WebGIS

当然，把 three-tile 当作一个轻量的三维 GIS 使用也未尝不可。地图模型可直接挂接主流瓦片数据源，渲染出逼真的地形；提供地理坐标（经纬度、海拔）与三维场景坐标的相互转换，可将模型、标签等地图元素叠加到指定位置；通过鼠标键盘控制摄像机，实现地图的缩放、平移、旋转与漫游。框架内置 mapbox、bing、google、arcgis、天地图、高德、腾讯等数据源支持，也可以自行扩展其它瓦片地图服务。