Skip to main content

Zoom 地图放大缩小

一、案例效果 （Zoom组件）​

效果图

二、代码下载​

可以下载源码工程，进行本地调试。

  1. 下载vue3版本
  2. 下载react版本

三、组件调用​

使用THEngine.widgets.Zoom组件，可以控制地图视角缩放。

import { THEngine } from "@/engine/THEngine";
const viewPoint = {
  position: [113.32681, 23.18890199999999, 15000],
  heading: 0,
  pitch: -45,
  roll: 0,
};
const zoom = new THEngine.widgets.Zoom(viewer, viewPoint);
//视角拉近
function zoomIn() {
  zoom.zoomIn();
}
//视角拉远
function zoomOut() {
  zoom.zoomOut();
}
//回到默认视角
function flyHome() {
  zoom.flyHome();
}

四、组件接口​

构造函数​

constructor(viewer, homeViewPoint)​
  • 功能：初始化 Zoom 类的实例。
  • 参数：
    参数名类型描述
    viewerObjectCesium Viewer 实例，用于操作地图视角。
    homeViewPointObject初始视角的位置信息，用于复位操作。

实例方法​

zoomIn(level = 10)​
  • 功能：实现视角拉近操作。
  • 参数：
    参数名类型描述默认值
    levelnumber缩放级别，用于控制每次拉近的幅度。10
  • 详细说明：该方法会获取当前相机的高度，然后根据 level 计算出每次拉近的移动距离，最后调用相机的 moveForward 方法使相机向前移动相应距离，达到视角拉近的效果。
zoomOut(level = 10)​
  • 功能：实现视角放远操作。
  • 参数：
    参数名类型描述默认值
    levelnumber缩放级别，用于控制每次放远的幅度。10
  • 详细说明：此方法会获取当前相机的高度，依据 level 计算每次放远的移动距离，接着调用相机的 moveBackward 方法使相机向后移动相应距离，实现视角放远。
flyHome()​
  • 功能：将视角恢复到初始位置。
  • 参数：无
  • 详细说明：该方法会检查是否存在初始视角的位置信息，如果存在，则调用 TQCamera 模块的 flyTo 方法，将视角移动到初始位置。