调整地图位置和缩放
地图创建部分已讲过,地图的中心位置和缩放需要通过调整摄像机位置和姿态来实现。
loading
1. 跳转到地图指定位置:
ts
/**
* 跳转到指定经纬度
* @param x 经度
* @param y 纬度
* @param z 高度(m)
*/
window.goto = function (x, y, z) {
const lonlat = new THREE.Vector3(x, y, z);
console.log("goto", lonlat);
// 地图中心经纬度高度(m)转为世界坐标
const centerPostion = map.geo2world(lonlat);
// 摄像机经纬度高度(m)转为世界坐标
const cameraPosition = map.geo2world(new THREE.Vector3(lonlat.x, lonlat.y - 0.1, lonlat.z + 10000));
// 飞行漫游到指定位置
viewer.flyTo(centerPostion, cameraPosition);
};
viewer.flyTo 是 GLViewer 的一个方法,animate 参数为 true 时使用 Tween 动画平滑漫游,函数很简单,如果动画效果不符合你的需求,可以参照下面代码自己写一个。
ts
/**
* Fly to a position
* @param centerPostion Map center target position
* @param cameraPostion Camera target position
* @param animate animate or not
*/
public flyTo(centerPostion: Vector3, cameraPostion: Vector3, animate = true) {
this.controls.target.copy(centerPostion);
if (animate) {
const start = this.camera.position;
new Tween(start)
// fly to 10000
.to({ y: 10000*1000, z: 0 }, 500)
// to target
.chain(new Tween(start).to(cameraPostion, 2000).easing(TWEEN.Easing.Quintic.Out))
.start();
} else {
this.camera.position.copy(cameraPostion);
}
}
2. 取得和恢复地图位置状态
threejs 的控制器 OrbitControls 和 MapControls 提供了 saveState 和 reset 方法( https://threejs.org/docs/index.html?q=orb#examples/zh/controls/OrbitControls.reset ),可以用来保存地图当前状态和恢复之前的状态,即保存和恢复地图姿态视角。