取得鼠标处经纬度海拔高度

loading

three-tile 插件提供辅助函数，简化取得鼠标位置信息

function showLocation(viewer, map, id) {
  const pointer = new THREE.Vector2();
  viewer.container.addEventListener("pointermove", (evt) => {
    // 取得鼠标所指位置经纬度海拔高度信息
    const lonlat = plugin.getLocalFromMouse(evt, map, viewer.camera);
    if (lonlat) {
      const el = document.querySelector(id);
      el.innerHTML = `经度:${lonlat.x.toFixed(6)}° 纬度:${lonlat.y.toFixed(6)}° 海拔:${lonlat.z.toFixed(6)}m`;
    }
  });
}
showLocation(viewer, map, "#local-info");

three-tile 提供多种取得地面信息的方法，包括通过屏幕坐标、经纬度、世界坐标取得地面信息（地形采样）：

1. 根据屏幕坐标取得地面信息

通过 TileMap.getLocalInfoFromScreen()屏幕坐标处的地图经纬度以及海拔高度，鼠标在地图上移动时，取得屏幕坐标再调用它取得地面信息。函数的定义如下：

/**
 * 获取指定屏幕坐标的地面信息
 * @param camera 摄像机
 * @param pointer 点的屏幕坐标（-0.5~0.5）
 * @returns 位置信息（经纬度、高度等）
 */
getLocalInfoFromScreen(camera: Camera, pointer: Vector2): LocationInfo | undefined;

返回类型为 LocationInfo，类型定义如下：

• distance —— 射线投射原点和相交部分之间的距离。
• point —— 相交部分的点（世界坐标）
• face —— 相交的面
• faceIndex —— 相交的面的索引
• object —— 相交的物体
• uv —— 相交部分的点的 UV 坐标。
• uv1 —— 相交部分的点的第二组 UV 坐标
• normal - 交点处的内插法向量
• instanceId – 与 InstancedMesh 物体相交时的 instance 索引
• location: Verctor3 —— 经纬度信息（经度、纬度、高度[米]）

最后一项 location 即为经纬度海拔高度信息，其中 x 为经度、y 为纬度、z 为海拔高度(m)。

主要代码代码：

// 显示地理位置信息

function showLocation(viewer, map, id) {
  const pointer = new THREE.Vector2();
  viewer.container.addEventListener("pointermove", (evt) => {
    // 计算屏幕坐标（-0.5到+0.5范围）
    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 el = document.querySelector(id);
      el.innerHTML = `经度:${info.location.x.toFixed(6)}° 纬度:${info.location.y.toFixed(6)}° 海拔:${info.location.z.toFixed(1)}m`;
    }
  });
}
showLocation(viewer, map, "#local-info");

2. 根据经纬度取得地面信息

类似的，TileMap.getLocalInfoFromGeo()根据经纬度取得地面信息：

 /**
 * Get the ground infomation from latitude and longitude
 * 获取指定经纬度的地面信息（法向量、高度等）
 * @param geo 地理坐标
 * @returns 地面信息
 */
getLocalInfoFromGeo(geo: Vector3): LocationInfo | undefined;

3. 根据海拔高度取得地面信息

同样，TileMap.getLocalInfoFromWorld()根据世界坐标取得地面信息：

/**
 * Get loacation infomation from world position
 * 获取指定世界坐标的地面信息
 * @param pos 世界坐标
 * @returns 地面信息
 */
getLocalInfoFromWorld(pos: Vector3): LocationInfo | undefined;

4. 应用场景

• 实时显示鼠标处的经纬度、海拔高度、世界坐标、法向量（可以计算坡向）等
• 取得指定经纬度的海拔高度、世界坐标、法向量等
• 取得指定世界坐标处的经纬度和海拔高度等
• 鼠标点击放置模型到地面

TIP

这几个函数是通过计算射线与地形交点取得，所以需要等地形瓦片加载完毕后才能取得，否则会返回空值。