DEJA_VU3D - Cesium功能集 之 026-态势标绘系列完整组件

前言

编写这个专栏主要目的是对工作之中基于Cesium实现过的功能进行整合，有自己琢磨实现的，也有参考其他大神后整理实现的，初步算了算现在有实现120个左右的功能，后续也会不断的追加，所以暂时打算一周2-3更的样子来更新本专栏（每篇博文都会奉上完整demo的源代码，尽可能把代码简洁一些）。博文内容如存在错误或者有可改进之处，也希望在这里和各位大佬交流提高一下。

介绍

专栏内容本着尽可能简洁的原则，本篇博文是我们态势标绘系列的最终篇。前面我们总共用了16篇文章来介绍并实现了16类共计20余种几何对象的绘制。本篇便是对之前实现的所有标绘功能进行集成，并编写成一个完整的态势标绘组件。因为涉及到的文件太多，所以用资源的形式进行了上传，文章最后会附上资源下载地址，包括所有源代码，有需要的客官可以进行下载。实现效果如图

更多内容/样例/demo说明：​ DEJA_VU3D完整功能目录

考虑到涉及到的文件太多，这里就只贴出来整合后的主类文件代码：

态势标绘组件主类代码

/*
 * 态势标绘组件主类
 * @Author: Wang jianLei
 * @Date: 2022-04-14 21:51:24
 * @Last Modified by: Wang JianLei
 * @Last Modified time: 2022-05-09 00:07:13
 */
import CreateLineArrow from "./lib/CreateLineArrow";
import CreateSwallowtailArrow from "./lib/CreateSwallowtailArrow";
import CreateRightAngleArrow from "./lib/CreateRightAngleArrow";
import CreateRoundRectangle from "./lib/CreateRoundRectangle";
import CreateSector from "./lib/CreateSector";
import CreateBow from "./lib/CreateBow";
import CreatePincerArrow from "./lib/CreatePincerArrow";
import CreateAttackArrow from "./lib/CreateAttackArrow";
import CreateStagingArea from "./lib/CreateStagingArea";
import CreateFlag from "./lib/CreateFlag";
import CreateFreeLine from "./lib/CreateFreeLine";
import CreatePolyline from "./lib/CreatePolyline";
import CreateCurve from "./lib/CreateCurve";
import CreateFreePolygon from "./lib/CreateFreePolygon";
import CreatePolygon from "./lib/CreatePolygon";
import CreateRegularPolygon from "./lib/CreateRegularPolygon";
class MilitaryPlotting {
  constructor(viewer) {
    if (!viewer) throw new Error("no viewer object!");
    this.viewer = viewer;
    this.resultObject = {
      lineArrow: [], //简单箭头Entity集合
      swallowtailArrow: [], //燕尾箭头Entity集合
      rightAngleArrow: [], //直角箭头Entity集合
      roundRectangle: [], //圆角矩形Entity集合
      sector: [], //扇形Entity集合
      bow: [], //弓形Entity集合
      pincerArrow: [], //钳击箭头Entity集合
      attackArrow: [], //进攻箭头Entity集合
      stagingArea: [], //集结地Entity集合
      flag: [], //旗标Entity集合
      freeLine: [], //自由线Entity集合
      polyline: [], //折线Entity集合
      curve: [], //圆滑曲线Entity集合
      freePolygon: [], //自由面Entity集合
      polygon: [], //多边形Entity集合
      regularPolygon: [], //正多边形Entity集合
    };
  }
  /**
   * 创建正多边形
   * @param {*} options 参数{id，color，num}
   * @param {*} callBack 回调函数，可直接引用创建的对象
   */
  CreateRegularPolygon(options, callBack) {
    CreateRegularPolygon(
      this.viewer,
      this.resultObject.regularPolygon,
      options,
      callBack
    );
  }
  /**
   * 创建多边形
   * @param {*} options 参数{id，color}
   * @param {*} callBack 回调函数，可直接引用创建的对象
   */
  CreatePolygon(options, callBack) {
    CreatePolygon(this.viewer, this.resultObject.polygon, options, callBack);
  }
  /**
   * 创建自由面
   * @param {*} options 参数{id，color}
   * @param {*} callBack 回调函数，可直接引用创建的对象
   */
  CreateFreePolygon(options, callBack) {
    CreateFreePolygon(
      this.viewer,
      this.resultObject.freePolygon,
      options,
      callBack
    );
  }
  /**
   * 创建圆滑曲线
   * @param {*} options 参数{id，color，width}
   * @param {*} callBack 回调函数，可直接引用创建的对象
   */
  CreateCurve(options, callBack) {
    CreateCurve(this.viewer, this.resultObject.curve, options, callBack);
  }
  /**
   * 创建笔直折线
   * @param {*} options 参数{id，color，width}
   * @param {*} callBack 回调函数，可直接引用创建的对象
   */
  CreatePolyline(options, callBack) {
    CreatePolyline(this.viewer, this.resultObject.polyline, options, callBack);
  }
  /**
   * 创建自由曲线
   * @param {*} options 参数{id，color，width}
   * @param {*} callBack 回调函数，可直接引用创建的对象
   */
  CreateFreeLine(options, callBack) {
    CreateFreeLine(this.viewer, this.resultObject.freeLine, options, callBack);
  }
  /**
   * 创建倒三角旗标
   * @param {*} options 参数{id，color，type}
   * @param {*} callBack 回调函数，可直接引用创建的对象
   */
  CreateFlag(options, callBack) {
    CreateFlag(this.viewer, this.resultObject.flag, options, callBack);
  }
  /**
   * 创建集结地
   * @param {*} options 参数{id，color}
   * @param {*} callBack 回调函数，可直接引用创建的对象
   */
  CreateStagingArea(options, callBack) {
    CreateStagingArea(
      this.viewer,
      this.resultObject.stagingArea,
      options,
      callBack
    );
  }
  /**
   * 创建进攻箭头
   * @param {*} options 参数{id，color}
   * @param {*} callBack 回调函数，可直接引用创建的对象
   */
  CreateAttackArrow(options, callBack) {
    CreateAttackArrow(
      this.viewer,
      this.resultObject.attackArrow,
      options,
      callBack
    );
  }
  /**
   * 创建钳击箭头
   * @param {*} options 参数{id，color}
   * @param {*} callBack 回调函数，可直接引用创建的对象
   */
  CreatePincerArrow(options, callBack) {
    CreatePincerArrow(
      this.viewer,
      this.resultObject.pincerArrow,
      options,
      callBack
    );
  }
  /**
   * 创建弓形
   * @param {*} options 参数{id，color}
   * @param {*} callBack 回调函数，可直接引用创建的对象
   */
  CreateBow(options, callBack) {
    CreateBow(this.viewer, this.resultObject.bow, options, callBack);
  }
  /**
   * 创建扇形
   * @param {*} options 参数{id，color}
   * @param {*} callBack 回调函数，可直接引用创建的对象
   */
  CreateSector(options, callBack) {
    CreateSector(this.viewer, this.resultObject.sector, options, callBack);
  }
  /**
   * 创建圆角矩形
   * @param {*} options 参数{id，color}
   * @param {*} callBack 回调函数，可直接引用创建的对象
   */
  CreateRoundRectangle(options, callBack) {
    CreateRoundRectangle(
      this.viewer,
      this.resultObject.roundRectangle,
      options,
      callBack
    );
  }
  /**
   * 创建直角箭头
   * @param {*} options 参数{id，color}
   * @param {*} callBack 回调函数，可直接引用创建的对象
   */
  CreateRightAngleArrow(options, callBack) {
    CreateRightAngleArrow(
      this.viewer,
      this.resultObject.rightAngleArrow,
      options,
      callBack
    );
  }
  /**
   * 创建简单箭头-直线Or曲线
   * @param {*} options {color，id，width，straight}
   * @param {*} callback 回调函数，可直接引用创建的对象
   */
  CreateLineArrow(options, callback) {
    CreateLineArrow(
      this.viewer,
      this.resultObject.lineArrow,
      options,
      callback
    );
  }
  /**
   * 创建燕尾箭头
   * @param {*} options {id，color}
   * @param {*} callBack 回调函数，可直接引用创建的对象
   */
  CreateSwallowtailArrow(options, callBack) {
    CreateSwallowtailArrow(
      this.viewer,
      this.resultObject.swallowtailArrow,
      options,
      callBack
    );
  }
  /**
   * 清除所有创建的对象
   */
  clearAll() {
    for (const key in this.resultObject) {
      if (Object.hasOwnProperty.call(this.resultObject, key)) {
        const element = this.resultObject[key];
        for (let index = 0; index < element.length; index++) {
          const el = element[index];
          this.viewer.entities.remove(el);
          element.splice(index, 1);
          index -= 1;
        }
      }
    }
  }
}
export default MilitaryPlotting;

完整态势标绘组件资源下载地址：Cesium/VUE态势标绘组件完整源代码（未加密+可直接运行）

综上！

如果客官您有问题，可以在本文下留言！

如果客官您有什么建议意见，可以在本文下留言！

如果客官您有批评指正，可以在本文下沟通讨论！

如果实例demo有数据缺失，评论留下您的邮箱地址！

如果客官您有其他的功能需求，可以在本文下留言，不管能不能实现，总会给出回复！