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;
    }
  }
}
相关推荐
ElasticPDF_新国产PDF编辑器18 分钟前
React 项目 PDF 批注插件库在线版 API 示例教程
javascript
不是鱼19 分钟前
XSS 和 CSRF 为什么值得你的关注?
前端·javascript
顺遂时光23 分钟前
微信小程序——解构赋值与普通赋值
前端·javascript·vue.js
WebInfra1 小时前
Rspack 1.3 发布:内存大幅优化,生态加速发展
前端·javascript·github
zoahxmy09291 小时前
Canvas 实现单指拖动、双指拖动和双指缩放
前端·javascript
花花鱼1 小时前
vue3 动态组件 实例的说明,及相关的代码的优化
前端·javascript·vue.js
Riesenzahn1 小时前
CSS的伪类和伪对象有什么不同?
前端·javascript
Riesenzahn1 小时前
请描述下null和undefined的区别是什么?这两者分别运用在什么场景?
前端·javascript
__不想说话__1 小时前
前端视角下的AI应用:技术融合与工程实践指南
前端·javascript·aigc
niusir1 小时前
使用 useCallback 和 useMemo 进行 React 性能优化
前端·javascript·react.js