three-tile开发: 5. 取得地图的地面信息

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

项目地址：GitHub - sxguojf/three-tile: 3D tile map using threejs

示例地址：GitHub - sxguojf/three-tile-example: three-tile Examples

接上节：https://blog.csdn.net/HZGJF/article/details/140414739

在地图操作中，我们常需要获取地图的地面信息，如鼠标拾取经纬度、点击放置物体到地面、测量某点距地高度等，一般使用threejs的射线法实现Raycaster – three.js docs (threejs.org)，但因此类操作十分常用，three-tile对此功能进行了封装。

1. 射线法回顾和应用

 三维程序开发中，模型的拾取一般使用射线法，即由沿摄像机方向发出一条射线，计算射线与模型的交点，返回交点信息。

threejs提供Raycaster类来完成此过程，其实Raycaster类并不局限于沿摄像机发出射线，它可以从任意原点和方向发出，通过此特性，不仅能实现拾取，还能实现地面信息的测量。

Raycaster返回的交点包含如下信息：

distance —— 射线投射原点和相交部分之间的距离。
point —— 相交部分的点（世界坐标）
face —— 相交的面
faceIndex —— 相交的面的索引
object —— 相交的物体
uv —— 相交部分的点的UV坐标。
uv1 —— 相交部分的点的第二组UV坐标
normal - 交点处的内插法向量
instanceId – 与InstancedMesh物体相交时的instance索引

其中，最重要的为point属性，它包含了射线与模型的交点的世界坐标。当我们计算的是射线与地图模型的交点时，这点就是地面信息。

为了方便使用，three-tile对该交点进行扩展，增加了经纬度海拔高度属性location：

export interface LocationInfo extends Intersection {
	/** （经纬度海拔高度） */
	location: Vector3;
}

TileMap的几个成员函数均返回此类型

名称	参数	返回	功能
getLocalInfoFromGeo(geo: Vector3)	geo: 地理坐标（经纬度）	LocationInfo：它继承于THREE.Intersection，除了交点信息，增加了location属性，包含地理坐标（经度、纬度、高度）	通过射线法获取指定地理坐标的地面信息（法向量、高度等）
getLocalInfoFromWorld(pos: Vector3)	pos: 世界坐标	LocationInfo：它继承于THREE.Intersection，除了交点信息，增加了location属性，包含地理坐标（经度、纬度、高度）	通过射线法获取指定世界坐标的地面信息（法向量、高度等）
getLocalInfoFromScreen(camera: Camera, pointer: Vector2)	camera: 摄像机 ,pointer:屏幕坐标	LocationInfo：它继承于THREE.Intersection，除了交点信息，增加了location属性，包含地理坐标（经度、纬度、高度）	通过射线法获取指定屏幕坐标的地面信息（法向量、高度等）

2. 鼠标拾取地面信息

鼠标拾取使用TileMap.getLocalInfoFromScreen()，它通过传入摄像机和屏幕坐标取得地面信息。一般用于取得鼠标光标处的经纬度。

// 状态栏显示地理位置信息
export function showLocation(viewer: tt.plugin.GLViewer, map: tt.TileMap): void {
	const pointer = new Vector2();
	viewer.container.addEventListener("pointermove", (evt) => {
		pointer.x = (evt.clientX / viewer.renderer.domElement.clientWidth) * 2 - 1;
		pointer.y = -(evt.clientY / viewer.renderer.domElement.clientHeight) * 2 + 1;

		const info = map.getLocalInfoFromScreen(viewer.camera, pointer);
		if (info) {
			const dom = document.querySelector("#location")!;
			if (dom) {
				const lonlat = info?.location;
				dom.innerHTML = `${lonlat.x.toFixed(6)}°E, 
                    ${lonlat.y.toFixed(6)}°N, ${(lonlat.z * 1000).toFixed(0)}m, (${info.normal?.x.toFixed(
					2,
				)}, ${info.normal?.y.toFixed(2)}, ${info.normal?.z.toFixed(2)})`;
			}
		}
	});
}

3. 取得指定经纬度的地面信息

有的时候，我们需要向地面贴地放置一个模型，但仅知道它的经纬度，不想指定它的海拔高度，那可以用getLocalInfoFromGeo()取得指定经纬度的地面信息，然后将物体的position调整为返回的信息中的point，物体就贴地了。

4. 取得指定世界坐标的地面信息

还有一些情况，比如想在地上放一辆开动的汽车、放一个奔跑的人，它需要贴地运动，就可以在车、人运动过程中调用getLocalInfoFromWorld()，取得地面高度来调整模型的高度。

5. 其它应用

取得地面信息中，还包括normal成员，它是地面的法向量，即该点地面的朝向，通过它可以计算坡向、坡度等信息，这在一些测量类程序中十分有用。

6. 存在问题

three-tile的数据是动态加载的，如果瓦片没有加载就无法获取地面信息。所以使用时需要注意2点：

1. 如果你在程序刚启动就取地面信息，会返回空。比如程序启动就取地面信息在上面放物体。
2. 由于各级瓦片地形精度不一样，不同缩放倍数取得的地面高度也会大不一样。

为了避免上面两种情况的发生，可以在TileMap的loading-complete事件中获取并调整模型位置。loading-complete在每次瓦片加载完成发生。如果地图上模型很多，可能会影响程序性能，那只能是手工指定模型的高度。

本节介绍的几个函数实质上为threejs本身功能的再封装，熟悉threejs的完全可以自己写。