添加标绘编辑功能

package.json

@@ -42,7 +42,7 @@
     "sass-loader": "^7.1.0",
     "strip-pragma-loader": "^1.0.0",
     "style-loader": "^0.23.1",
-    "uglifyjs-webpack-plugin": "^2.1.2",
+    "uglifyjs-webpack-plugin": "^2.2.0",
     "url-loader": "^1.1.2",
     "webpack": "^4.29.6",
     "webpack-cli": "^3.3.0",

src/plugins/overlay/DC.CustomBillboard.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-02-12 21:44:24
  * @Last Modified by: Caven
- * @Last Modified time: 2020-03-05 22:43:08
+ * @Last Modified time: 2020-03-17 16:57:19
  */
 import Cesium from '@/namespace'
 import '@/core/overlay/base/DC.Billboard'

src/plugins/plot/DC.Plot.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-01-31 15:51:32
  * @Last Modified by: Caven
- * @Last Modified time: 2020-02-20 13:45:36
+ * @Last Modified time: 2020-03-17 18:02:24
  */
 import Cesium from '@/namespace'
 import DrawPoint from './draw/DrawPoint'
@@ -10,6 +10,7 @@ import DrawPolyline from './draw/DrawPolyline'
 import DrawPolygon from './draw/DrawPolygon'
 import DrawCircle from './draw/DrawCircle'
 import DrawRect from './draw/DrawRect'
+import EditPoint from './edit/EditPoint'
 
 DC.Plot = class {
   constructor(viewer) {
@@ -65,6 +66,17 @@ DC.Plot = class {
       plotEvent: this._plotEvent,
       layer: this._layer
     }
+    if (overlay.type === DC.OverlayType.POINT) {
+      this._editWorker = new EditPoint(info, style)
+    } else if (type === DC.OverlayType.POLYLINE) {
+      this._drawWorker = new DrawPolyline(info, style)
+    } else if (type === DC.OverlayType.POLYGON) {
+      this._drawWorker = new DrawPolygon(info, style)
+    } else if (type === DC.OverlayType.CIRCLE) {
+      this._drawWorker = new DrawCircle(info, style)
+    } else if (type === DC.OverlayType.RECT) {
+      this._drawWorker = new DrawRect(info, style)
+    }
   }
 
   draw(type, callback, style) {
@@ -74,7 +86,10 @@ DC.Plot = class {
     this._drawWorker.start()
   }
 
-  edit(overlay, clallback) {
+  edit(overlay, callback) {
+    this._viewer.tooltip.enable = true
     this._bindEvent(callback)
+    this._createEditWorker(overlay)
+    this._editWorker.start()
   }
 }

src/plugins/plot/draw/DrawPoint.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-01-31 16:25:29
  * @Last Modified by: Caven
- * @Last Modified time: 2020-02-01 13:41:39
+ * @Last Modified time: 2020-03-17 15:52:30
  */
 import Cesium from '@/namespace'
 import Draw from './Draw'
@@ -24,14 +24,23 @@ class DrawPoint extends Draw {
   }
 
   _mouseClickHandler(movement) {
-    this._position = this._viewer.delegate.scene.camera.pickEllipsoid(movement.position, Cesium.Ellipsoid.WGS84)
+    this._position = this._viewer.delegate.scene.camera.pickEllipsoid(
+      movement.position,
+      Cesium.Ellipsoid.WGS84
+    )
     this._unbindEnvet()
-    this._plotEvent.raiseEvent({ type: DC.OverlayType.POINT, points: [DC.T.transformCartesianToWSG84(this._position)] })
+    this._plotEvent.raiseEvent({
+      type: DC.OverlayType.POINT,
+      points: [DC.T.transformCartesianToWSG84(this._position)]
+    })
   }
 
   _mouseMoveHandler(movement) {
     this._viewer.tooltip.setContent('单击选择点位')
-    this._position = this._viewer.delegate.scene.camera.pickEllipsoid(movement.endPosition, Cesium.Ellipsoid.WGS84)
+    this._position = this._viewer.delegate.scene.camera.pickEllipsoid(
+      movement.endPosition,
+      Cesium.Ellipsoid.WGS84
+    )
     this._viewer.tooltip.setPosition(this._position)
   }
 

src/plugins/plot/edit/Edit.js

@@ -0,0 +1,49 @@
+/*
+ * @Author: Caven
+ * @Date: 2020-03-17 16:19:15
+ * @Last Modified by: Caven
+ * @Last Modified time: 2020-03-17 20:17:37
+ */
+import Cesium from '@/namespace'
+
+class Edit {
+  constructor(plotInfo) {
+    this._viewer = plotInfo.viewer
+    this._handler = plotInfo.handler
+    this._plotEvent = plotInfo.plotEvent
+    this._layer = plotInfo._layer
+    this._overlay = plotInfo.overlay
+    this._editMarkers = []
+  }
+
+  _bindEvent() {
+    this._handler.setInputAction(movement => {
+      this._mouseClickHandler && this._mouseClickHandler(movement)
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+
+    this._handler.setInputAction(movement => {
+      this._mouseMoveHandler && this._mouseMoveHandler(movement)
+    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+
+    this._handler.setInputAction(movement => {
+      this._mouseDbClickHandler && this._mouseDbClickHandler(movement)
+    }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
+  }
+
+  _unbindEnvet() {
+    this._handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
+    this._handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+    this._handler.removeInputAction(
+      Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
+    )
+  }
+
+  _prepareMarkers() {}
+
+  start() {
+    this._bindEvent()
+    this._prepareMarkers()
+  }
+}
+
+export default Edit

src/plugins/plot/edit/EditCircle.js

@@ -0,0 +1,29 @@
+/*
+ * @Author: Caven
+ * @Date: 2020-03-17 18:23:25
+ * @Last Modified by: Caven
+ * @Last Modified time: 2020-03-17 18:40:12
+ */
+import Edit from './Edit'
+
+class EditCircle extends Edit {
+  constructor(plotInfo) {
+    super(plotInfo)
+    this._center = this._overlay.center
+    this._radius = this._overlay.radius
+  }
+
+  _computeRadius(src, dest) {
+    let srcCartographic = Cesium.Cartographic.fromCartesian(src)
+    let destCartographic = Cesium.Cartographic.fromCartesian(dest)
+    let geodesic = new Cesium.EllipsoidGeodesic()
+    geodesic.setEndPoints(srcCartographic, destCartographic)
+    let s = geodesic.surfaceDistance
+    this._radius = Math.sqrt(
+      Math.pow(s, 2) +
+        Math.pow(destCartographic.height - srcCartographic.height, 2)
+    )
+  }
+
+  _prepareMarkers() {}
+}

src/plugins/plot/edit/EditPoint.js

@@ -0,0 +1,37 @@
+/*
+ * @Author: Caven
+ * @Date: 2020-03-17 17:52:29
+ * @Last Modified by: Caven
+ * @Last Modified time: 2020-03-17 18:00:14
+ */
+import Edit from './Edit'
+
+class EditPoint extends Edit {
+  constructor(plotInfo) {
+    super(plotInfo)
+    this._position = this._overlay.position
+  }
+
+  _mouseClickHandler(movement) {
+    this._position = this._viewer.delegate.scene.camera.pickEllipsoid(
+      movement.position,
+      Cesium.Ellipsoid.WGS84
+    )
+    this._unbindEnvet()
+    this._plotEvent.raiseEvent({
+      type: DC.OverlayType.POINT,
+      points: [DC.T.transformCartesianToWSG84(this._position)]
+    })
+  }
+
+  _mouseMoveHandler(movement) {
+    this._viewer.tooltip.setContent('单击选择点位')
+    this._position = this._viewer.delegate.scene.camera.pickEllipsoid(
+      movement.endPosition,
+      Cesium.Ellipsoid.WGS84
+    )
+    this._viewer.tooltip.setPosition(this._position)
+  }
+}
+
+export default EditPoint

webpack.conf.js

@@ -2,7 +2,7 @@
  * @Author: Caven
  * @Date: 2020-01-18 18:22:23
  * @Last Modified by: Caven
- * @Last Modified time: 2020-03-13 12:12:55
+ * @Last Modified time: 2020-03-17 20:56:12
  */
 
 const path = require('path')
@@ -10,6 +10,7 @@ const webpack = require('webpack')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const CopywebpackPlugin = require('copy-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 const cesiumBuild = './libs/cesium/Build/Cesium'
 const cesiumSource = './libs/cesium/Source'
 
@@ -131,6 +132,22 @@ module.exports = env => {
         }
       ]
     },
+    optimization: {
+      minimize: IS_PROD,
+      minimizer: [
+        new UglifyJsPlugin({
+          uglifyOptions: {
+            output: {
+              comments: false
+            },
+            compress: {
+              drop_debugger: true,
+              drop_console: true
+            }
+          }
+        })
+      ]
+    },
     resolve: {
       extensions: ['.js', '.json', '.css'],
       alias: {

webpack.plugins.conf.js

@@ -2,13 +2,14 @@
  * @Author: Caven
  * @Date: 2020-01-18 18:22:23
  * @Last Modified by: Caven
- * @Last Modified time: 2020-03-07 21:34:45
+ * @Last Modified time: 2020-03-17 20:56:18
  */
 
 const path = require('path')
 const webpack = require('webpack')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
 function resolve(dir) {
   return path.join(__dirname, '.', dir)
@@ -94,6 +95,22 @@ module.exports = env => {
         }
       ]
     },
+    optimization: {
+      minimize: IS_PROD,
+      minimizer: [
+        new UglifyJsPlugin({
+          uglifyOptions: {
+            output: {
+              comments: false
+            },
+            compress: {
+              drop_debugger: true,
+              drop_console: true
+            }
+          }
+        })
+      ]
+    },
     resolve: {
       extensions: ['.js', '.json', '.css'],
       alias: {

yarn.lock

@@ -5994,7 +5994,7 @@ uglify-js@^3.6.0:
     commander "~2.20.3"
     source-map "~0.6.1"
 
-uglifyjs-webpack-plugin@^2.1.2:
+uglifyjs-webpack-plugin@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-2.2.0.tgz#e75bc80e7f1937f725954c9b4c5a1e967ea9d0d7"
   integrity sha512-mHSkufBmBuJ+KHQhv5H0MXijtsoA1lynJt1lXOaotja8/I0pR4L9oGaPIZw+bQBOFittXZg9OC1sXSGO9D9ZYg==