Cesium双击放大地图

实现效果

注册鼠标点击事件

javascript 复制代码

import * as Cesium from "cesium";
import ZoomControl from "./zoomControl";

export default function initHandler(viewer) {
  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  let lastClickTime = 0;
  const doubleClickThreshold = 300; // 双击时间间隔（毫秒）

  handler.setInputAction((event) => {
    const currentTime = Date.now();

    // 移动端自定义双击事件
    if (currentTime - lastClickTime < doubleClickThreshold) {
      // 获取双击位置的笛卡尔坐标
      const cartesian = viewer.camera.pickEllipsoid(
        event.position,
        viewer.scene.globe.ellipsoid
      );
      ZoomControl.doubleClickZoomIn(viewer, cartesian);
    }

    lastClickTime = currentTime;
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}

zoomControl.js

js 复制代码

import { defined, Ray, IntersectionTests, Cartesian3, SceneMode } from "cesium";

let focus;
const rayScratch = new Ray();
var cartesian3Scratch = new Cartesian3();
export default class ZoomControl {
  static zoomIn(viewer) {
    this.zoom(viewer, 1 / 2);
  }

  static zoomOut(viewer) {
    this.zoom(viewer, 2);
  }

  static doubleClickZoomIn(viewer, cartesian) {
    focus = cartesian;
    this.zoomIn(viewer);
  }

  static zoom(viewer, dire) {
    const scene = viewer.scene;
    const sscc = scene.screenSpaceCameraController;

    if (!sscc.enableInputs || !sscc.enableZoom) {
      return;
    }

    const camera = scene.camera;
    let orientation;

    switch (scene.mode) {
      case SceneMode.MORPHING:
        break;
      case SceneMode.SCENE2D:
        camera.zoomIn(camera.positionCartographic.height * (1 - dire));
        break;
      default:
        if (defined(viewer.trackedEntity)) {
          focus = new Cartesian3();
        } else {
          if (!defined(focus)) {
            // 获取相机焦点
            rayScratch.origin = camera.positionWC;
            rayScratch.direction = camera.directionWC;

            let result = new Cartesian3();
            scene.globe.pick(rayScratch, scene, result);

            result = camera.worldToCameraCoordinatesPoint(result, result);

            focus = result;
          }
        }

        if (!defined(focus)) {
          //相机方向不指向地球仪，因此使用椭球地平线点作为焦点。
          var ray = new Ray(
            camera.worldToCameraCoordinatesPoint(
              scene.globe.ellipsoid.cartographicToCartesian(
                camera.positionCartographic
              )
            ),
            camera.directionWC
          );
          focus = IntersectionTests.grazingAltitudeLocation(
            ray,
            scene.globe.ellipsoid
          );

          orientation = {
            heading: camera.heading,
            pitch: camera.pitch,
            roll: camera.roll,
          };
        } else {
          orientation = {
            direction: camera.direction,
            up: camera.up,
          };
        }

        if (camera.position.z >= 406944828719368.56) {
          return;
        }

        var direction = Cartesian3.subtract(
          camera.position,
          focus,
          cartesian3Scratch
        );
        var movementVector = Cartesian3.multiplyByScalar(
          direction,
          dire,
          direction
        );
        var endPosition = Cartesian3.add(focus, movementVector, focus);

        if (
          defined(viewer.trackedEntity) ||
          scene.mode === SceneMode.COLUMBUS_VIEW
        ) {
          camera.position = endPosition;
        } else {
          camera.flyTo({
            destination: endPosition,
            orientation: orientation,
            duration: 0.5,
            convert: false,
          });
        }

        break;
    }
  }
}