Skip to content

调整地图位置和缩放

地图创建部分已讲过,地图的中心位置和缩放需要通过调整摄像机位置和姿态来实现。

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 ),可以用来保存地图当前状态和恢复之前的状态,即保存和恢复地图姿态视角。


Released under the MIT License.