Cesium 自定义Primitive-绘制圆

一、创作来源

��       1、cesium的entity绘制圆

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

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

二、编写步骤

1、创建绘制线的类

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

        

import { Viewer, ScreenSpaceEventHandler, ScreenSpaceEventType } from "cesium";import { pickPosition } from "@/components/MilitaryPlot/utils/PlotUtils";import CustomPolylinePrimitive from "@/components/entity/CustomPolylinePrimitive";import CustomCirclePrimitive from "@/components/samples/CustomCirclePrimitive";export default class DrawCircleTool {  /**   * 构造函数   * @param {Viewer} viewer   */  constructor(viewer) {    /**     * 地球视图     * @type {Viewer}     * @private     */    this._viewer = viewer;    /**     * 线对象     * @type {CustomCirclePrimitive}     * @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、代码实现

        1、屏幕坐标转地球坐标

/** * 获取地图点位 * @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);};

        2、鼠标事件代码

/**   * 绘图   */  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);  }

          3、渲染线代码

/**   * 绘图   */  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 CustomCirclePrimitive({});          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);  }

         4、测试

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

三、实现效果

四、代码

import { Viewer, ScreenSpaceEventHandler, ScreenSpaceEventType } from "cesium";import { pickPosition } from "@/components/MilitaryPlot/utils/PlotUtils";import CustomPolylinePrimitive from "@/components/entity/CustomPolylinePrimitive";import CustomCirclePrimitive from "@/components/samples/CustomCirclePrimitive";export default class DrawCircleTool {  /**   * 构造函数   * @param {Viewer} viewer   */  constructor(viewer) {    /**     * 地球视图     * @type {Viewer}     * @private     */    this._viewer = viewer;    /**     * 线对象     * @type {CustomCirclePrimitive}     * @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 CustomCirclePrimitive({});          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;    }  }}