three-tile开发: 1. 第一个three-tile程序

老郭1

已于 2024-09-08 23:32:33 修改

阅读量1k

点赞数 25

文章标签： threejs three-tile webgis cesium mapbox

于 2024-07-10 23:39:33 首次发布

本文链接：https://blog.csdn.net/HZGJF/article/details/140336297

版权

上篇介绍了：three-tile：一个开源的轻量级三维瓦片库-CSDN博客

three-tile 是一个开源的轻量级三维瓦片库，它基于threejs使用typescript开发，提供一个三维地形模型，能轻松给你的应用增加三维瓦片地图。

项目地址：https://github.com/sxguojf/three-tile

示例地址：https://github.com/sxguojf/three-tile-example

这篇，我们来使用three-tile编写一个简单示例，它显示一张三维地图，鼠标左键平移，右键旋转，滚轮缩放。

废话不多说，先上代码：

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<meta
			name="viewport"
			content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
		/>
		<title>three-tile最小化应用</title>
	</head>
	<style>
		html,
		body {
			background-color: #333;
			height: 100%;
			width: 100%;
			padding: 0;
			margin: 0;
			display: flex;
		}
		#map {
			flex: 1;
		}
	</style>

	<!-- 因three@v0.150+废弃了普通导入方式，需要改为使用importmap导入 -->
	<script type="importmap">
		{
			"imports": {
				"three": "https://unpkg.com/three@0.165.0/build/three.module.js",
				"three-tile": "https://unpkg.com/three-tile@0.6.1/dist/three-tile.js"
			}
		}
	</script>

	<body>
		<div id="map"></div>
		<script type="module">
			import * as THREE from "three";
			import * as tt from "three-tile";

			console.log(`three-tile v${tt.version} start!`);

			// MapBoxToken 请更换为你自己申请的key
			const MAPBOXKEY =
				"pk.eyJ1Ijoic3ZjLW9rdGEtbWFwYm94LXN0YWZmLWFjY2VzcyIsImEiOiJjbG5sMnBoMm0xeWZzMmtyaWl0b2wyN2FuIn0.-zx1KP3Oy-7YzWcvhbv22Q";

			// mapbox影像数据源
			const mapBoxImgSource = new tt.plugin.MapBoxSource({
				token: MAPBOXKEY,
				dataType: "image",
				style: "mapbox.satellite",
			});
			// mapbox地形数据源
			const mapBoxDemSource = new tt.plugin.MapBoxSource({
				token: MAPBOXKEY,
				dataType: "terrain-rgb",
				style: "mapbox.terrain-rgb",
				maxLevel: 15,
			});

			// 创建地图
			const map = tt.TileMap.create({
				// 影像数据源
				imgSource: mapBoxImgSource,
				// 地形数据源
				demSource: mapBoxDemSource,
				// 地图投影中心经度
				lon0: 90,
				// 最小缩放级别
				minLevel: 2,
				// 最大缩放级别
				maxLevel: 18,
			});
			// 地图旋转到xz平面
			map.rotateX(-Math.PI / 2);

			// 地图中心坐标(经度，纬度，高度)
			const centerGeo = new THREE.Vector3(105, 30, 0);
			// 摄像坐标(经度，纬度，高度)
			const camersGeo = new THREE.Vector3(105, 0, 5000);
			// 地图中心转为世界坐标
			const centerPostion = map.localToWorld(map.geo2pos(centerGeo));
			// 摄像机转为世界坐标
			const cameraPosition = map.localToWorld(map.geo2pos(camersGeo));
			// 初始化场景
			const viewer = new tt.plugin.GLViewer("#map", { centerPostion, cameraPosition });

			// 地图添加到场景
			viewer.scene.add(map);
		</script>
	</body>
</html>

将上面代码保存为html文件，不需要web服务，用浏览器打开即可运行。由于地图数据在墙外，加载可能有点慢，多等一会。

演示如下：

代码比较简单，要理解，需要一些threejs或opengl基础知识，没学过也不要紧，我会后面会慢慢讲解。

1. 引入three和three-tile

three-tile是基于threejs开发，先引入这两个包：

<!-- 因three@v0.150+废弃了普通导入方式，需要改为使用importmap导入 -->
<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three@0.165.0/build/three.module.js",
			"three-tile": "https://unpkg.com/three-tile@0.6.1/dist/three-tile.js"
		}
	}
</script>

npm方式安装：

npm i three-tile -S

2. 创建数据源

既然是瓦片地图，那肯定先要定义数据源，three-tile内建了mapbox、bing、google、天地图、高德等等数据源定义，这里我们选用mapboxe的：

			// MapBoxToken 请更换为你自己申请的key
			const MAPBOXKEY =
				"pk.eyJ1Ijoic3ZjLW9rdGEtbWFwYm94LXN0YWZmLWFjY2VzcyIsImEiOiJjbG5sMnBoMm0xeWZzMmtyaWl0b2wyN2FuIn0.-zx1KP3Oy-7YzWcvhbv22Q";

			// mapbox影像数据源
			const mapBoxImgSource = new tt.plugin.MapBoxSource({
				token: MAPBOXKEY,
				dataType: "image",
				style: "mapbox.satellite",
			});
			// mapbox地形数据源
			const mapBoxDemSource = new tt.plugin.MapBoxSource({
				token: MAPBOXKEY,
				dataType: "terrain-rgb",
				style: "mapbox.terrain-rgb",
				maxLevel: 15,
			});

不明白啥意思？没关系，抄上就行，后面会讲解，需要注意的是，mapbox的token最好自己申请，不要用我上面的，用的人多超出限额大家都没得玩了。

3. 创建地图

// 创建地图
const map = tt.TileMap.create({
	// 影像数据源
	imgSource: mapBoxImgSource,
	// 地形数据源
	demSource: mapBoxDemSource,
	// 地图投影中心经度
	lon0: 90,
	// 最小缩放级别
	minLevel: 2,
	// 最大缩放级别
	maxLevel: 18,
});
// 地图旋转到xz平面
map.rotateX(-Math.PI / 2);

这里，用three-tile的TileMap.create函数，创建了一个地图模型，类型是threejs的Mesh，然后把模型旋转-90°到xz平面，函数参数把刚创建的地图数据源传进去，其它参数先照抄，后面讲解。

4. 初始化三维场景并添加地图

三维场景的初始化，就是threejs套路，创建场景、渲染器、摄像机、控制器、灯光等等，你从threejs中抄过来就行，但为了降低使用难度，three-tile内置了一个GLViewer类封装了这些操作，你只需要传入参数即可：

// 地图中心坐标(经度，纬度，高度)
const centerGeo = new THREE.Vector3(105, 30, 0);
// 摄像坐标(经度，纬度，高度)
const camersGeo = new THREE.Vector3(105, 0, 5000);
// 地图中心转为世界坐标
const centerPostion = map.localToWorld(map.geo2pos(centerGeo));
// 摄像机转为世界坐标
const cameraPosition = map.localToWorld(map.geo2pos(camersGeo));
// 初始化场景
const viewer = new tt.plugin.GLViewer("#map", { centerPostion, cameraPosition });

// 地图添加到场景
viewer.scene.add(map);

GLViewer构造参数需要在网页上放置地图的dom的ID，这里是"#map"，对应的html中那唯一的一个div，另外，需要地图中心坐标和摄像机坐标，用来控制地图的位置、缩放和旋转，这两坐标需要传入三维场景坐标，我们通过将经纬度高度转换得来:

centerGeo：地图中心经纬度高度，就是地图以哪个点为中心(105°E，30°N，0km)

cameraGeo：摄像机的经纬度高度，就是你站点哪个位置看地图（105°E，0°，5000km）

这两参数为可选参数，如果不清楚耶可以省略。

最后，将地图加入三维场景中，OK，保存看看效果。

第一讲，不需要读懂，复制过去能运行出来就行，后面将持续更新。