three-tile:轻量级前端三维瓦片地图开发框架

在之前的文章《maptalks-开源二三维WebGIS开发框架》小编介绍了一款Cesium的替代框架：maptalks，用于部分用户替换Cesium的需求。最近小编又发现了一个开源的二三维引擎：three-tile，实现轻量化，功能目前还在完善，也能满足相当一部分需求了，今天小编就简单介绍下。

three-tile简介

three-tile 是一个开源的轻量级前端三维瓦片框架，基于 threejs 使用 typescript 开发，提供一个三维地形模型，能轻松给你的应用增加三维瓦片地图。也就是直接使用Three.js 加载三维空间数据，达到和Cesium相类似的功能效果。

官网地址：

https://sxguojf.github.io/three-tile-doc/

github地址：

https://github.com/sxguojf/three-tile

主要功能

目前官网介绍的主要功能有

一、核心地图功能

• ​​地图创建与管理​​：支持地图创建、属性设置、方法调用和事件监听。
• ​​坐标系统​​：提供经纬度、Web Mercator、场景坐标等多坐标系转换功能。
• ​​三维场景​​：支持深度定制的完整三维场景配置。
• ​​框架集成​​：支持 Vue.js 等前端框架无缝集成。
• ​​地图控制​​：可调整缩放级别、中心位置，设置地图显示经纬度范围。
• ​​控制器切换​​：支持切换不同相机控制器以适应交互需求。
• 支持添加几何模型、自定义图标
• 支持地形表面叠加贴地图片
• 支持罗盘、水印、CSS2D广告牌等UI组件

二、数据加载与集成

• ​​自定义数据源​​：支持接入自定义地图瓦片数据源。
• ​​多格式支持​​：兼容矢量数据、三维模型、地形数据、WMS服务等格式。
• ​​特定地图​​：支持行政区域地图显示。

三、视觉效果与场景增强

• ​​地形操作​​：支持地形夸张（按比例放大起伏）、地形开挖（地表挖洞操作）。
• ​​环境渲染​​：支持动态天空背景（Skybox）、逼真水体效果、立体阴影渲染。
• ​​地图形态​​：可将平面地图转为三维球体显示。
• ​​视觉特效​​：支持 CSS 滤镜调色、自定义着色器（Shader）实现独特效果。

快速开始

支持 npm 和 script 方式引入项目。

NPM

npm i three -S
npm i three-tile -S 

项目中引入

import * as THREE from "three";
import * as tt from "three-tile";
import * as plugin from "three-tile/plugin";

Script

<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.8/dist",
      "three-tile-plugin": "https://unpkg.com/three-tile@0.11.8/dist/plugin"
    }
  }
</script>

import * as THREE from "three";
import * as tt from "three-tile";
import * as plugin from "three-tile-plugin";

一个最简单的例子

import * as THREE from "three";
import * as tt from "three-tile";
import * as plugin from "three-tile-plugin";
// npm 安装引入
// 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);

运行效果：

总结

小编测试下来，目前这个库和专业的Cesium相比，功能还是有点不足，但有一些场景可以替换Cesium了，比如：

• 轻量级Web三维地理可视化（如智慧城市、地形展示）
• 对性能敏感的应用（低端设备兼容、大范围三维场景渲染）
• 需要高度定制化瓦片处理流程的开发需求

综合体验下来，效果非常流畅，很多场景再不也不用使用笨重的Cesium了，如果你有类似轻量场景，除了maptalks，也可以试试three-tile~