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)})`;}}});
}