feat: added VcMeasurementRectangle

packages/components/drawings/src/drawing.types.ts

@@ -1,3 +1,11 @@
+/*
+ * @Author: zouyaoji@https://github.com/zouyaoji
+ * @Date: 2021-10-11 09:17:22
+ * @LastEditTime: 2021-10-11 15:42:09
+ * @LastEditors: zouyaoji
+ * @Description:
+ * @FilePath: \vue-cesium@next\packages\components\drawings\src\drawing.types.ts
+ */
 import { VcFabAction } from '@vue-cesium/components/ui'
 import { CSSProperties, Ref } from 'vue'
 import {
@@ -28,6 +36,8 @@ interface PolygonDrawing {
   drawStatus: number
   height?: number
   radius?: number
+  area?: number
+  labels?: Array<any>
 }
 
 interface DrawingInstanceOpts {

packages/components/drawings/src/rectangle/index.ts

@@ -1,7 +1,7 @@
 /*
  * @Author: zouyaoji@https://github.com/zouyaoji
  * @Date: 2021-09-16 09:28:13
- * @LastEditTime: 2021-09-26 17:06:36
+ * @LastEditTime: 2021-10-11 15:04:12
  * @LastEditors: zouyaoji
  * @Description:
  * @FilePath: \vue-cesium@next\packages\components\drawings\src\rectangle\index.ts
@@ -396,7 +396,7 @@ export default defineComponent({
     }
 
     const onPrimitiveCollectionReady = ({ cesiumObject }) => {
-      cesiumObject._vcId = 'VcDrawingRegularPolygon'
+      cesiumObject._vcId = 'VcDrawingRectangle'
     }
 
     // expose public methods

packages/components/measurements/src/defaultProps.ts

@@ -184,6 +184,10 @@ const pointActionDefault = Object.assign({}, actionOptions, {
   icon: 'vc-icons-measure-point-coordinates'
 })
 
+const rectangleActionDefault = Object.assign({}, actionOptions, {
+  icon: 'vc-icons-drawing-rectangle'
+})
+
 const polylineMeasurementDefault = {
   show: true,
   measureUnits: new MeasureUnits(),
@@ -448,6 +452,27 @@ const pointMeasurementDefault = {
   heightReference: 1
 }
 
+const rectangleMeasurementDefault = Object.assign({}, areaMeasurementDefault, {
+  pointOpts: Object.assign({}, pointOptsDefault, {
+    show: false
+  }),
+  drawtip: {
+    show: true,
+    pixelOffset: [32, 32]
+  },
+  editorOpts: {
+    pixelOffset: [16, -8],
+    delay: 1000,
+    hideDelay: 1000,
+    move: Object.assign({}, editorOptsDefault),
+    removeAll: Object.assign({}, editorOptsDefault, {
+      icon: 'vc-icons-delete'
+    })
+  },
+  edge: 4,
+  regular: false // regular
+})
+
 const clearActionDefault = Object.assign({}, actionOptions, {
   icon: 'vc-icons-clear',
   color: 'red'
@@ -462,7 +487,7 @@ const defaultProps = {
   },
   measurements: {
     type: Array as PropType<Array<string>>,
-    default: () => ['distance', 'component-distance', 'polyline', 'horizontal', 'vertical', 'height', 'area', 'point']
+    default: () => ['distance', 'component-distance', 'polyline', 'horizontal', 'vertical', 'height', 'area', 'point', 'rectangle']
   },
   activeColor: {
     type: String,
@@ -540,6 +565,14 @@ const defaultProps = {
     type: Object as PropType<typeof pointMeasurementDefault>,
     default: () => pointMeasurementDefault
   },
+  rectangleActionOpts: {
+    type: Object as PropType<typeof rectangleActionDefault>,
+    default: () => rectangleActionDefault
+  },
+  rectangleMeasurementOpts: {
+    type: Object as PropType<typeof rectangleMeasurementDefault>,
+    default: () => rectangleMeasurementDefault
+  },
   clearActionOpts: {
     type: Object as PropType<typeof clearActionDefault>,
     default: () => clearActionDefault
@@ -567,5 +600,7 @@ export {
   areaMeasurementDefault,
   pointActionDefault,
   pointMeasurementDefault,
+  rectangleActionDefault,
+  rectangleMeasurementDefault,
   clearActionDefault
 }

packages/components/measurements/src/index.ts

@@ -31,7 +31,9 @@ import {
   areaActionDefault,
   areaMeasurementDefault,
   pointActionDefault,
-  pointMeasurementDefault
+  pointMeasurementDefault,
+  rectangleActionDefault,
+  rectangleMeasurementDefault
 } from './defaultProps'
 import { useCommon, useHandler } from '@vue-cesium/composables'
 import { camelize } from '@vue-cesium/utils/util'
@@ -52,6 +54,7 @@ import VcMeasurementVertical from './vertical'
 import VcMeasurementHeight from './height'
 import VcMeasurementPoint from './point'
 import VcMeasurementArea from './area'
+import VcMeasurementRectangle from './rectangle'
 
 export default defineComponent({
   name: 'VcMeasurements',
@@ -120,6 +123,12 @@ export default defineComponent({
     const pointMeasurementOpts = reactive<typeof pointMeasurementDefault>(
       Object.assign({}, defaultOptions.pointMeasurementOpts, props.pointMeasurementOpts)
     )
+    const rectangleActionOpts = reactive<typeof rectangleActionDefault>(
+      Object.assign({}, defaultOptions.rectangleActionOpts, props.rectangleActionOpts)
+    )
+    const rectangleMeasurementOpts = reactive<typeof rectangleMeasurementDefault>(
+      Object.assign({}, defaultOptions.rectangleMeasurementOpts, props.rectangleMeasurementOpts)
+    )
 
     const clearActionOpts = reactive<typeof clearActionDefault>(Object.assign({}, defaultOptions.clearActionOpts, props.clearActionOpts))
 
@@ -139,6 +148,8 @@ export default defineComponent({
     options.areaMeasurementOpts = areaMeasurementOpts
     options.pointActionOpts = pointActionOpts
     options.pointMeasurementOpts = pointMeasurementOpts
+    options.rectangleActionOpts = rectangleActionOpts
+    options.rectangleMeasurementOpts = rectangleMeasurementOpts
     options.clearActionOpts = clearActionOpts
 
     const measurementsOptions: Array<MeasurementInstanceOpts> = props.measurements.map(measurement => ({
@@ -153,6 +164,7 @@ export default defineComponent({
         | typeof VcMeasurementHeight
         | typeof VcMeasurementArea
         | typeof VcMeasurementPoint
+        | typeof VcMeasurementRectangle
         | null
       >(null),
       measurementOpts: options[`${camelize(measurement)}MeasurementOpts`],
@@ -274,6 +286,8 @@ export default defineComponent({
           return VcMeasurementPoint
         case 'area':
           return VcMeasurementArea
+        case 'rectangle':
+          return VcMeasurementRectangle
         default:
           return null
       }

packages/components/measurements/src/measure.types.ts

@@ -18,7 +18,9 @@ import {
   polylineActionDefault,
   polylineMeasurementDefault,
   verticalActionDefault,
-  verticalMeasurementDefault
+  verticalMeasurementDefault,
+  rectangleActionDefault,
+  rectangleMeasurementDefault
 } from './defaultProps'
 import VcMeasurementDistance from './distance'
 import VcMeasurementPolyline from './polyline'
@@ -27,6 +29,7 @@ import VcMeasurementVertical from './vertical'
 import VcMeasurementHeight from './height'
 import VcMeasurementPoint from './point'
 import VcMeasurementArea from './area'
+import VcMeasurementRectangle from './rectangle'
 
 interface PointMeasurement {
   position: Cesium.Cartesian3
@@ -117,6 +120,7 @@ interface MeasurementInstanceOpts {
     | typeof heightActionDefault
     | typeof areaActionDefault
     | typeof pointActionDefault
+    | typeof rectangleActionDefault
     | typeof clearActionDefault
   measurementRef: Ref<
     | typeof VcMeasurementDistance
@@ -126,6 +130,7 @@ interface MeasurementInstanceOpts {
     | typeof VcMeasurementHeight
     | typeof VcMeasurementArea
     | typeof VcMeasurementPoint
+    | typeof VcMeasurementRectangle
     | null
   >
   measurementOpts:
@@ -137,6 +142,7 @@ interface MeasurementInstanceOpts {
     | typeof heightMeasurementDefault
     | typeof areaMeasurementDefault
     | typeof pointMeasurementDefault
+    | typeof rectangleMeasurementDefault
   actionStyle?: CSSProperties
   actionClass?: string
   tip?: string
@@ -148,6 +154,7 @@ interface MeasurementInstanceOpts {
     | typeof VcMeasurementHeight
     | typeof VcMeasurementArea
     | typeof VcMeasurementPoint
+    | typeof VcMeasurementRectangle
     | null
   isActive: boolean
 }

packages/components/measurements/src/rectangle/defaultProps.ts

@@ -0,0 +1,27 @@
+/*
+ * @Author: zouyaoji@https://github.com/zouyaoji
+ * @Date: 2021-10-11 14:51:24
+ * @LastEditTime: 2021-10-11 15:41:07
+ * @LastEditors: zouyaoji
+ * @Description:
+ * @FilePath: \vue-cesium@next\packages\components\measurements\src\rectangle\defaultProps.ts
+ */
+import { enableMouseEvent } from '@vue-cesium/utils/cesium-props'
+
+export default {
+  ...enableMouseEvent,
+  editable: Boolean,
+  show: Boolean,
+  measureUnits: Object,
+  drawtip: Object,
+  pointOpts: Object,
+  polylineOpts: Object,
+  polygonOpts: Object,
+  labelOpts: Object,
+  labelsOpts: Object,
+  locale: String,
+  decimals: Object,
+  editorOpts: Object,
+  clampToGround: Boolean,
+  mode: Number
+}