three-tile开发: 4. 地图坐标转换

 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/140398295

three-tile的坐标转换很简单，上篇以介绍过一些，但在地图类开发中，坐标转换又是那么的重要，在地图上放置物体、拾取经纬度、调整摄像机位置等都要用它，所以单独开一节。

1.  地理坐标与模型坐标相互转换

转换主要靠TileMap的这两个函数：

名称	参数	返回	功能
geo2pos(geo: Vector3)	geo: 地理坐标	Vector3：地图模型坐标	地理坐标转地图模型坐标
pos2geo(pos: Vector3)	pos: 地图模型坐标	Vector3：地理坐标	地图模型坐标转地理坐标

它们的参数、返回值都是THREE的Vector3类型，地理坐标xyz分别为经度、纬度、高度，地图模型坐标的xyz为TileMap模型东、北、高度坐标。 这两个函数是互逆的。

// 经度、纬度、海拔高度转换为模型坐标
const pos = map.geo2pos(new Vector3(107.9, 34.0, 7.8);
// 模型坐标转换为经纬度
const geo = map.pos2geo(pos);
console.log(pos,geo);
// 创建一个箭头
const arrow = new ArrowHelper(dir, new Vector3(pos.x, pos.y, 0), 50);
// 添加进地图模型
map.add(arrow);

2. 模型坐标转换为世界坐标

注意，上面的坐标转换函数均是基于地图模型坐标的，如果你的Object是作为地图模型的子模型添加的，那没有问题，但如果Object是添加到Scene中的，那还要将模型坐标转换为世界坐标，这个是threejs的基础知识，但很多同学反映坐标转换老不对，这里再强调一下。

我们在代码中常看到这样的写法：

// 地图中心坐标(经度，纬度，高度)
const centerGeo = new Vector3(110, 30, 0);
// 摄像坐标(经度，纬度，高度)
const camersGeo = new Vector3(110, 0, 10000);
// 地图中心转为世界坐标
const centerPostion = map.localToWorld(map.geo2pos(centerGeo));
// 摄像机转为世界坐标
const cameraPosition = map.localToWorld(map.geo2pos(camersGeo));

map.localToWorld()，它是THREE.Object3D类的方法，实现模型局部坐标向世界坐标转换，还有worldToLocal(),是这个过程的反转，即世界坐标转为模型局部坐标。不熟悉的可以复习一下：Object3D#localToWorld – three.js docs (threejs.org)