【杨琨】【颜色修改】

Author: killer1992

src/service/3DPlot/Draw/DrawPoint.js

@@ -12,13 +12,16 @@ import {PrimitiveFactory} from "../Primitive/PrimitiveFactory";
 import {CesiumUtil} from "../Utils/CesiumUtil";
 
 export default class DrawPoint extends DrawObject {
-    constructor(viewer, symbol, plotLayer) {
+    constructor(viewer, symbol, plotLayer, options) {
         super();
         this._viewer = viewer;
         this._symbol = symbol;
         this.m_coords = [];
         this._primitive = null;
         this._plotLayer = plotLayer;
+        //绘制完成回调函数
+        const {addedPlot} = options;
+        this._addedPlot = addedPlot;
     }
 
     addHooks() {
@@ -35,20 +38,20 @@ export default class DrawPoint extends DrawObject {
             if (!worldPos) return;
 
             symbol.getElement().then(function (res) {
-                const {classificationType, id} = that._symbol;
+                const {classificationType} = that._symbol;
                 res.classificationType = classificationType;
                 const {style} = that._symbol;
                 if(style && style.nodeStyles){
                     res.initNodeStyles(style.nodeStyles);
                 }
-                if(id){
-                    res.featureId = id;
-                }
                 that._primitive = PrimitiveFactory.createInstance(symbol.type, {
                     positions: that.m_coords,
                     element: res
                 });
-                that._primitive.id = id;
+                that._primitive.id = res.featureId;
+                if(that._addedPlot){
+                    that._addedPlot(that._primitive);
+                }
                 const lnglat = CesiumUtil.cartesian3ToDegrees(
                     viewer.scene.globe.ellipsoid,
                     worldPos
@@ -67,8 +70,9 @@ export default class DrawPoint extends DrawObject {
 
     removeHooks() {
         const handler = this._handler;
-        // handler.removeInputAction();
         handler.destroy();
         this._handler = null;
+        this._isAdded = false;
+        this.m_coords = [];
     }
 }

src/service/3DPlot/Draw/DrawPolyline.js

@@ -32,7 +32,7 @@ function look(viewer, center, offset) {
 }
 
 export default class DrawPolyline extends DrawObject {
-  constructor(viewer, symbol, plotLayer) {
+  constructor(viewer, symbol, plotLayer, options) {
     super();
     this.m_coords = [];
     this._viewer = viewer;
@@ -41,14 +41,22 @@ export default class DrawPolyline extends DrawObject {
     this._isAdded = false;
     this._plotLayer = plotLayer;
     this.uuid = Math.random() * 10000000;
+    //绘制完成回调函数
+    const {addedPlot} = options;
+    this._addedPlot = addedPlot;
   }
 
+  /**
+   * @description 添加点击事件
+   * @private
+   */
   addHooks() {
     const viewer = this._viewer;
     const symbol = this._symbol;
     const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
     let that = this;
 
+    //单击事件，开始绘制图元
     handler.setInputAction((event) => {
       const worldPos = viewer.scene.globe.pick(
         viewer.camera.getPickRay(event.position),
@@ -58,23 +66,27 @@ export default class DrawPolyline extends DrawObject {
       if (!worldPos) return;
 
       symbol.getElement().then(function (res) {
-        if (!that._isAdded) {
-          const {classificationType, id} = that._symbol;
+        if (!that._isAdded && that._handler) {
+          const {classificationType} = that._symbol;
           res.classificationType = classificationType;
           const {style} = that._symbol;
           if(style && style.nodeStyles){
             res.initNodeStyles(style.nodeStyles);
           }
-          if(id){
-            res.featureId = id;
-          }
           that._primitive = PrimitiveFactory.createInstance(symbol.type, {
             positions: that.m_coords,
             element: res,
           });
-          that._primitive.id = id;
+          that._primitive.id = res.featureId;
           that._isAdded = true;
           that._plotLayer._primitiveCollection.add(that._primitive);
+          if(that._addedPlot){
+            that._addedPlot(that._primitive);
+          }
+        }
+
+        if(!that._handler){
+          return;
         }
 
         const lnglat = CesiumUtil.cartesian3ToDegrees(
@@ -102,6 +114,7 @@ export default class DrawPolyline extends DrawObject {
       });
     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
 
+    //双击事件，结束绘制图元
     handler.setInputAction((event) => {
       this.fireFinishEvent({ plotObj3D: this._primitive });
       this.disable();
@@ -117,8 +130,9 @@ export default class DrawPolyline extends DrawObject {
       look(this.viewer, this.m_coords[this.m_coords.length - 1], 1000);
     }
 
-    // handler.removeInputAction();
     handler.destroy();
     this._handler = null;
+    this._isAdded = false;
+    this.m_coords = [];
   }
 }

src/service/3DPlot/Draw/DrawTool.js

@@ -4,55 +4,75 @@ import {DrawPlotObjectFactory3D} from "./DrawPlotObjectFactory3D";
  * @class module:3DPlot.DrawTool
  * @description 行业标绘绘制工具
  * @author 基础平台-杨琨
- * @param {PlotLayer3D} layer
+ * @param {PlotLayer3D} layer 标绘图层
+ * @param {Object} options 绘制参数
  */
 class DrawTool {
-  constructor(layer) {
-    //标绘图层
-    this._plotLayer = layer;
-    //绘制工具
-    this._drawTool = undefined;
-  }
-
-  /**
-   * @function module:3DPlot.DrawTool.setLayer
-   * @description 设置要作用的标绘图层
-   * @param layer - {PlotLayer3D} 必选项，标绘图层
-   */
-  setLayer(layer) {
-    this._plotLayer = layer;
-  }
-
-  /**
-   * @function module:3DPlot.DrawTool.drawPlot
-   * @description 绘制标绘图元
-   * @param symbol - {Object} 必选项，标绘图元的符号对象
-   */
-  drawPlot(symbol) {
-    if (!this._drawTool) {
-      this._drawTool = DrawPlotObjectFactory3D.createInstance(
-        symbol.type,
-        this._plotLayer._viewer,
-        symbol,
-        this._plotLayer
-      );
+    constructor(layer, options) {
+        //标绘图层
+        this._plotLayer = layer;
+        //绘制工具
+        this._drawTool = undefined;
+        //SVG的url
+        this._symbolUrl = undefined;
+        //绘制参数
+        this._options = options;
+    }
 
+    /**
+     * @function module:3DPlot.DrawTool.setLayer
+     * @description 设置要作用的标绘图层
+     * @param layer - {PlotLayer3D} 必选项，标绘图层
+     */
+    setLayer(layer) {
+        this._plotLayer = layer;
     }
 
-    this._drawTool.enable();
-  }
+    /**
+     * @function module:3DPlot.DrawTool.drawPlot
+     * @description 绘制标绘图元
+     * @param symbol - {Object} 必选项，标绘图元的符号对象
+     */
+    drawPlot(symbol) {
+        //一直是原有符号
+        if (!this._drawTool) {
+            this._symbolUrl = symbol.src;
+            this._drawTool = DrawPlotObjectFactory3D.createInstance(
+                symbol.type,
+                this._plotLayer._viewer,
+                symbol,
+                this._plotLayer,
+                this._options
+            );
+        }
+
+        //换新符号
+        if (symbol.should !== this._symbolUrl) {
+            this._symbolUrl = symbol.src;
+            this._drawTool = DrawPlotObjectFactory3D.createInstance(
+                symbol.type,
+                this._plotLayer._viewer,
+                symbol,
+                this._plotLayer,
+                this._options
+            );
+        }
 
-  /**
-   * @function module:3DPlot.DrawTool.stopDraw
-   * @description 停止绘制
-   */
-  stopDraw() {
-    if (this._drawTool) {
-      this._drawTool.disable();
+        //开始绘制
+        this._drawTool.enable();
     }
 
-    this._drawTool = undefined;
-  }
+    /**
+     * @function module:3DPlot.DrawTool.stopDraw
+     * @description 停止绘制
+     */
+    stopDraw() {
+        if (this._drawTool) {
+            this._drawTool.disable();
+        }
+
+        this._drawTool = undefined;
+    }
 }
 
 export default DrawTool;