Cesium 自定义Primitive - 绘制矩形

最新推荐文章于 2025-04-25 14:49:03 发布

生活真难

最新推荐文章于 2025-04-25 14:49:03 发布

阅读量1.5k

点赞数 9

CC 4.0 BY-SA版权

分类专栏： Cesium 文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/anglestar2012/article/details/136495265

Cesium 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何在Cesium中使用CustomRectanglePrimitive和ScreenSpaceEventHandler实现一个动态绘制矩形的工具，包括创建绘制类、处理鼠标点击和移动事件，以及屏幕坐标到地球坐标的转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、创作来源

1、cesium的entity绘制矩形

2、不使用entity的情况下，使用自定义的primitive来动态绘制矩形

3、结合上一篇文章的矩形，执行动态矩形的更新

二、编写步骤

1、创建绘制矩形的类

包括构造函数、绘图函数以及销毁函数

import { Viewer, ScreenSpaceEventHandler, ScreenSpaceEventType } from "cesium";
import { pickPosition } from "@/components/MilitaryPlot/utils/PlotUtils";
import CustomRectanglePrimitive from "@/components/samples/CustomRectanglePrimitive";
export default class DrawRectangleTool {
  /**
   * 构造函数
   * @param {Viewer} viewer
   */
  constructor(viewer) {
    /**
     * 地球视图
     * @type {Viewer}
     * @private
     */
    this._viewer = viewer;
    /**
     * 线对象
     * @type {CustomRectanglePrimitive}
     * @private
     */
    this._primitive = undefined;
    /**
     * 事件
     * @type {ScreenSpaceEventHandler}
     * @private
     */
    this._handler = undefined;
  }

  /**
   * 绘图
   */
  draw() {
  }
  /**
   * 销毁
   */
  destroy() {
    if (this._handler) {
      this._handler.isDestroyed() && this._handler.destroy();
      this._handler = null;
    }
  }
}

2、事件确认

鼠标点击事件、移动事件

  /**
   * 绘图
   */
  draw() {
    this._handler = new ScreenSpaceEventHandler(this._viewer.canvas);
    let positions = [];
    let flag = this;
    this._handler.setInputAction((event) => {
      console.log("左键单机事件");
    }, ScreenSpaceEventType.LEFT_CLICK);
    this._handler.setInputAction((event) => {
      console.log("鼠标移动事件");
    }, ScreenSpaceEventType.MOUSE_MOVE);
  }

3、点位变动逻辑

=>初始为空的数组

=>点击后当为空时直接push,当有两个点时，结束编辑

=>移动：当只有一个点时直接push,当点位数大于1的时候，先移除后push

4、屏幕坐标转地球坐标

/**
 * 获取地图点位
 * @param {Cartesian2} screenPosition 屏幕坐标
 * @param {Viewer} viewer 地图
 * @returns {Cartesian3} 地图三维坐标
 */
export const pickPosition = (screenPosition, viewer) => {
  let ray = viewer.camera.getPickRay(screenPosition);
  return viewer.scene.globe.pick(ray, viewer.scene);
};

5、鼠标事件代码

/**
   * 绘图
   */
  draw() {
    this._handler = new ScreenSpaceEventHandler(this._viewer.canvas);
    let positions = [];
    let flag = this;
    this._handler.setInputAction((event) => {
      console.log("左键单机事件");
      let position = pickPosition(event.position, flag._viewer);
      if (position) {
        if (positions.length === 0) {
          positions.push(position);
        } else {
          positions.pop();
          positions.push(position);
        }
      }
    }, ScreenSpaceEventType.LEFT_CLICK);
    this._handler.setInputAction((event) => {
      console.log("鼠标移动事件");
      let position = pickPosition(event.endPosition, flag._viewer);
      if (position) {
        if (positions.length === 1) {
          positions.push(position);
        } else if (positions.length > 1) {
          positions.pop();
          positions.push(position);
        }
      }
    }, ScreenSpaceEventType.MOUSE_MOVE);
  }

6、渲染矩形代码

/**
   * 绘图
   */
  draw() {
    this._handler = new ScreenSpaceEventHandler(this._viewer.canvas);
    let positions = [];
    let flag = this;
    this._handler.setInputAction((event) => {
      console.log("左键单机事件");
      let position = pickPosition(event.position, flag._viewer);
      if (position) {
        if (positions.length === 0) {
          positions.push(position);
          flag._primitive = new CustomRectanglePrimitive({});
          this._viewer.scene.primitives.add(this._primitive);
        } else {
          positions.pop();
          positions.push(position);
          flag._primitive.updateProperty({
            positions: [...positions],
            complete: false,
          });
          this._primitive = undefined;
          positions = [];
        }
      }
    }, ScreenSpaceEventType.LEFT_CLICK);
    this._handler.setInputAction((event) => {
      console.log("鼠标移动事件");
      let position = pickPosition(event.endPosition, flag._viewer);
      if (position) {
        if (positions.length === 1) {
          positions.push(position);
        } else if (positions.length > 1) {
          positions.pop();
          positions.push(position);
        }
        if (flag._primitive) {
          flag._primitive.updateProperty({
            positions: [...positions],
            complete: false,
          });
        }
      }
    }, ScreenSpaceEventType.MOUSE_MOVE);
  }

7、测试

let tool = new DrawRectangleTool(viewer);
tool.draw();

三、实现效果

四、代码

import { Viewer, ScreenSpaceEventHandler, ScreenSpaceEventType } from "cesium";
import { pickPosition } from "@/components/MilitaryPlot/utils/PlotUtils";
import CustomRectanglePrimitive from "@/components/samples/CustomRectanglePrimitive";
export default class DrawRectangleTool {
  /**
   * 构造函数
   * @param {Viewer} viewer
   */
  constructor(viewer) {
    /**
     * 地球视图
     * @type {Viewer}
     * @private
     */
    this._viewer = viewer;
    /**
     * 线对象
     * @type {CustomRectanglePrimitive}
     * @private
     */
    this._primitive = undefined;
    /**
     * 事件
     * @type {ScreenSpaceEventHandler}
     * @private
     */
    this._handler = undefined;
  }

  /**
   * 绘图
   */
  draw() {
    this._handler = new ScreenSpaceEventHandler(this._viewer.canvas);
    let positions = [];
    let flag = this;
    this._handler.setInputAction((event) => {
      console.log("左键单机事件");
      let position = pickPosition(event.position, flag._viewer);
      if (position) {
        if (positions.length === 0) {
          positions.push(position);
          flag._primitive = new CustomRectanglePrimitive({});
          this._viewer.scene.primitives.add(this._primitive);
        } else {
          positions.pop();
          positions.push(position);
          flag._primitive.updateProperty({
            positions: [...positions],
            complete: false,
          });
          this._primitive = undefined;
          positions = [];
        }
      }
    }, ScreenSpaceEventType.LEFT_CLICK);
    this._handler.setInputAction((event) => {
      console.log("鼠标移动事件");
      let position = pickPosition(event.endPosition, flag._viewer);
      if (position) {
        if (positions.length === 1) {
          positions.push(position);
        } else if (positions.length > 1) {
          positions.pop();
          positions.push(position);
        }
        if (flag._primitive) {
          flag._primitive.updateProperty({
            positions: [...positions],
            complete: false,
          });
        }
      }
    }, ScreenSpaceEventType.MOUSE_MOVE);
  }
  /**
   * 销毁
   */
  destroy() {
    if (this._handler) {
      this._handler.isDestroyed() && this._handler.destroy();
      this._handler = null;
    }
  }
}