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;
    }
  }
}
相关推荐
shoa_top1 小时前
JavaScript 数组方法总结
javascript
鱼樱前端1 小时前
让人头痛的原型和原型链知识
前端·javascript
lianghj1 小时前
前端高手必备:深度解析高频场景解决方案与性能优化实战
前端·javascript·面试
OpenIM1 小时前
Electron Demo 的快速编译与启动
前端·javascript·electron
拿我格子衫来2 小时前
图形编辑器基于Paper.js教程27:对图像描摹的功能实现,以及参数调整
开发语言·前端·javascript·图像处理·编辑器·图形渲染
末日的狂欢姐2 小时前
AXUI - 极致原生体验的零依赖的国产 Web UI 框架,欢迎体验和共建!
javascript·前端框架·vue·网站建设·ui设计
取个好名称2 小时前
在线查看【免费】 txt, xml(渲染), md(渲染), java, php, py, js, css 文件格式网站
xml·javascript·php
日日行不惧千万里2 小时前
Node.js和js到底什么关系
开发语言·javascript·node.js
武清伯MVP2 小时前
TS学习笔记之数组、元组
javascript·typescript
pikapi2 小时前
奇怪的‘’函数同时作为对象使用“?你知道吗 ,一种奇怪的使用方法记录
前端·javascript·面试