Merge remote-tracking branch 'origin/dev' into dev-cbwu

src/components/map/BottomBar.vue

@@ -5,10 +5,9 @@
 -->
 <script setup lang="ts">
 import { Angle } from '@/utils/map/angle.ts'
-import {ScreenSpaceEventHandler, Math, ScreenSpaceEventType, Cartesian3, Cartographic} from 'cesium'
+import {ScreenSpaceEventHandler, Math, ScreenSpaceEventType, Cartographic} from 'cesium'
 import {onMounted, ref} from "vue";
 import {cartesian2ToCartesian3} from "@/utils/map/coordinate.ts";
-import {elevationProfile} from "@/utils/map/SpatialAnalysis.ts";
 let nowLatStr: string, nowLonStr: string
 let lonlatStr = ref('')
 let isDecimal = ref(true)
@@ -53,7 +52,6 @@ function lonlatClick() {
     lonlatStr.value = `经度: ${nowLonStr}°, 纬度: ${nowLatStr}°, 高度` + elevStr
   }
   isDecimal.value = !isDecimal.value
-  elevationProfile(window.viewer, Cartesian3.fromDegrees(119.0,30.05),Cartesian3.fromDegrees(119.05,30.0),500)
 }
 </script>
 

src/components/map/SceneViewer.vue

@@ -2,7 +2,7 @@
  * @Author: cbwu 504-wuchengbo@htsdfp.com
  * @Date: 2024-03-07 14:15:35
  * @LastEditors: cbwu
- * @LastEditTime: 2024-04-16 10:01:28
+ * @LastEditTime: 2024-04-16 19:06:50
  * @Description:
 -->
 <template>
@@ -22,7 +22,7 @@ import {
 import { initViewer, perfViewer, showNavigator } from '@/utils/map/sceneViewer'
 import { flyToChina } from '@/utils/map/camera'
 import CreatePolyline from '@/utils/map/draw/drawPolyline'
-import {inputGeoJson} from "@/utils/DataIO.ts";
+import { inputGeoJson } from '@/utils/DataIO.ts'
 // import DrawPoint from '@/utils/map/draw/drawPoint'
 import { DrawPolygon } from '@/utils/map/draw/drawPolygon'
 const viewerDivRef = ref<HTMLDivElement>()

src/components/toolbar.vue

@@ -0,0 +1,16 @@
+<!--
+  文件描述：工具条
+  创建时间：2024/4/16 10:54
+  创建人：Zhaipeixiu
+-->
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

src/utils/map/draw/drawPolygon.ts

@@ -6,19 +6,20 @@
  * @Description: 绘制多边形
  */
 import {
-  Viewer,
-  ScreenSpaceEventHandler,
+  CallbackProperty,
   Cartesian3,
   Color,
-  ScreenSpaceEventType,
   Entity,
-  CallbackProperty,
   PolylineDashMaterialProperty,
+  Rectangle,
+  ScreenSpaceEventHandler,
+  ScreenSpaceEventType,
+  Viewer,
 } from 'cesium'
-import { cartesian2ToCartesian3 } from '@/utils/map/coordinate'
-import { PolygonEntity } from '../geometry/polygonEntity'
-import { PointEntity } from '@/utils/map/geometry/pointEntity'
-import EditGeometry from '@/utils/map/draw/editGeometry'
+import {cartesian2ToCartesian3} from '@/utils/map/coordinate'
+import {PolygonEntity} from '../geometry/polygonEntity'
+import {getPolygonArea} from "@/utils/map/geocomputation.ts";
+import {TextLabel} from "@/utils/map/geometry/textLabel.ts";
 
 export class DrawPolygon {
   viewer: Viewer
@@ -28,9 +29,11 @@ export class DrawPolygon {
   trackingLine: Entity | null
   trackingLinePositions: Cartesian3[] = []
   bMove: boolean = false
+  bMeasure = false
   bLongClick: boolean = false
-  constructor(viewer: Viewer) {
+  constructor(viewer: Viewer, isMeasure: boolean=false) {
     this.viewer = viewer
+    this.bMeasure = isMeasure
     this.handler = new ScreenSpaceEventHandler(viewer.scene.canvas)
     this.polygon = null
     this.trackingLine = null
@@ -130,17 +133,22 @@ export class DrawPolygon {
       }
     }
   }
+
   //左双击回调事件
-  private leftDoubleClickCallBack = (
-    event: ScreenSpaceEventHandler.PositionedEvent,
-  ) => {
+  private leftDoubleClickCallBack = (event: ScreenSpaceEventHandler.PositionedEvent) => {
     if (!this.polygon) return
-    console.log('**************************** double click')
     this.bMove = false
     //移除多余的点
     this.polygon.removePoint(-1)
     this.polygon.removePoint(-1)
+    if(this.bMeasure){
+      //计算面积
+      let area = getPolygonArea(this.positions)
+      //添加label
+      new TextLabel(this.viewer,this.getCenter(),`面积: ${(area/1000000).toFixed(2)}k㎡`)
+    }
   }
+
   //创建追踪线
   createTrackingLine(positions: Cartesian3[]) {
     return new Entity({
@@ -157,4 +165,15 @@ export class DrawPolygon {
       },
     })
   }
+
+  // 获取多边形的外接矩形
+  public getRectangle(): Rectangle {
+    return Rectangle.fromCartesianArray(this.positions)
+  }
+
+  // 获取几何中心
+  public getCenter(): Cartesian3 {
+    let rec = this.getRectangle()
+    return Cartesian3.fromRadians((rec.east + rec.west) / 2, (rec.south + rec.north) / 2)
+  }
 }

src/utils/map/draw/drawPolyline.ts

@@ -2,7 +2,7 @@
  * @Author: cbwu 504-wuchengbo@htsdfp.com
  * @Date: 2024-03-27 08:43:44
  * @LastEditors: cbwu
- * @LastEditTime: 2024-04-16 14:25:43
+ * @LastEditTime: 2024-04-16 19:00:18
  * @Description: 绘制Polyline类
  */
 import {
@@ -24,6 +24,9 @@ import {
 import { PolylineEntity } from '../geometry/polylineEntity'
 import { PointEntity } from '@/utils/map/geometry/pointEntity'
 import EditGeometry from '@/utils/map/draw/editGeometry'
+import { getDistance } from '@/utils/map/geocomputation.ts'
+import { Angle } from '@/utils/map/angle.ts'
+import { TextLabel } from '@/utils/map/geometry/textLabel.ts'
 type EntityOptions = {
   id?: string
   name?: string
@@ -48,6 +51,8 @@ export default class CreatePolyline {
   moveSelectedPoint: PointEntity | null = null
   positions: Cartesian3[] = []
   bMove: boolean = false
+  bMeasure: boolean | undefined = false //是否处于测距模式
+  totalDistance: number = 0
   bLongClick: boolean = false
   clickTimeout: any
   altitudeOffset: number = 20 //相对高度
@@ -60,13 +65,18 @@ export default class CreatePolyline {
     width: 2,
     color: Color.GREEN,
   }
-  constructor(viewer: Viewer, options?: EntityOptions) {
+  constructor(
+    viewer: Viewer,
+    bMeasure: boolean = false,
+    options?: EntityOptions,
+  ) {
     this.viewer = viewer
+    this.bMeasure = bMeasure
     this.handler = new ScreenSpaceEventHandler(this.viewer.scene.canvas)
     this.polyline = null
     this.trackingLine = null
     this.dashLine = null
-
+    this.totalDistance = 0
     this.controlPoints = []
     this.defaultStyle = { ...this.defaultStyle, ...options }
   }
@@ -96,12 +106,12 @@ export default class CreatePolyline {
   public end() {
     this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
   }
+
   //左单击回调事件
   private leftClickCallBack = (
     event: ScreenSpaceEventHandler.PositionedEvent,
   ) => {
     const pickedObject = this.viewer.scene.pick(event.position)
-    // console.log(pickedObject)
     if (pickedObject) {
       //点击同一位置，返回
       if (
@@ -139,8 +149,29 @@ export default class CreatePolyline {
       const groundControlPoint = new PointEntity(this.vDashLinePosition[n][0])
       this.viewer.entities.add(groundControlPoint)
       this.bMove = true
-
       this.viewer.scene.requestRender() //刷新
+      // 计算2点距离
+      if (this.positions.length >= 2 && this.bMeasure) {
+        let distance = getDistance(
+          this.positions[this.positions.length - 1],
+          this.positions[this.positions.length - 2],
+        )
+        this.totalDistance += distance
+        // 计算2点方位角
+        let azimuth = Angle.getAzimuth(
+          this.positions[this.positions.length - 2],
+          this.positions[this.positions.length - 1],
+        )
+        // 计算2点的中间点
+        let midPoint = Cartesian3.midpoint(
+          this.positions[this.positions.length - 1],
+          this.positions[this.positions.length - 2],
+          new Cartesian3(),
+        )
+        // 添加label
+        let labelText = `距离: ${distance.toFixed(2)}km, 方位角: ${azimuth}°`
+        new TextLabel(this.viewer, midPoint, labelText)
+      }
     }
   }
   // 移动回调事件
@@ -170,10 +201,7 @@ export default class CreatePolyline {
   private leftDoubleClickCallBack = (
     event: ScreenSpaceEventHandler.PositionedEvent,
   ) => {
-    // 清除可能已经设置的单击定时器
-    // clearTimeout(this.clickTimeout)
     if (!this.polyline) return
-    console.log('**************************** double click')
     this.bMove = false
     const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
     if (cartesian3 != undefined) {
@@ -183,6 +211,14 @@ export default class CreatePolyline {
       }
     }
 
+    if (this.bMeasure) {
+      // 添加总距离label
+      new TextLabel(
+        this.viewer,
+        this.positions[this.positions.length - 1],
+        `总距离: ${this.totalDistance.toFixed(2)}km`,
+      )
+    }
     this.clearEvent()
     console.log('end:' + this.positions.length.toString())
     console.log(this.positions)
@@ -201,7 +237,8 @@ export default class CreatePolyline {
       this.viewer.entities.remove(this.controlPoints.pop() as Entity)
     }
   }
-  clearEvent() {
+
+  private clearEvent() {
     this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
     this.handler.removeInputAction(ScreenSpaceEventType.MOUSE_MOVE)
     this.handler.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK)

src/utils/map/geocomputation.ts

@@ -88,7 +88,7 @@ function isOnLineSegment(
 
 
 /**
- * 计算距离，单位米
+ * 计算距离，单位千米
  * @param p1 起点
  * @param p2 终点
  */

src/utils/map/geometry/baseGeometry.ts

@@ -38,13 +38,10 @@ export abstract class BaseGeometry extends CustomDataSource {
    * 新增一个节点,默认插入在尾部，
    * @param pos 点坐标
    * @param index 插入的位置，0起步
+   * @param bAddControlPoint
    * @bAddControlPoint 是否添加控制点
    */
-  public addPoint(
-    pos: Cartesian3,
-    index: number = -1,
-    bAddControlPoint: boolean = true,
-  ) {
+  public addPoint(pos: Cartesian3, index: number = -1, bAddControlPoint: boolean = true,) {
     if (index === -1) {
       //插入尾部
       this.positions.push(pos)

src/utils/map/geometry/textLabel.ts

@@ -0,0 +1,64 @@
+import {Cartesian3, Entity, Color, Viewer, Cartesian2, HorizontalOrigin, VerticalOrigin, HeightReference} from "cesium";
+
+/**
+ 文件描述：文本标注
+ 创建时间：2024/4/16 11:44
+ 创建人：Zhaipeixiu
+ */
+export type textLabelOptions = {
+ showBackground?: boolean,  //显示背景
+ backgroundColor?: Color, //背景色
+ backgroundPadding?: any,   //padding值
+ fillColor: Color,
+ horizontalOrigin?: any, //水平对齐方式
+ verticalOrigin?: any,   //竖直对齐方式
+ outlineColor?: any,
+ outlineWidth?: any
+}
+
+export class TextLabel{
+ _viewer: Viewer|undefined = undefined
+ _defaultStyle: textLabelOptions = {
+  showBackground: true, //显示背景
+  backgroundColor: Color.BLACK, //背景色
+  backgroundPadding: new Cartesian2(10, 10), //padding值
+  fillColor: Color.WHITE,
+  outlineColor: Color.WHITESMOKE,
+  outlineWidth: 1.0,
+  horizontalOrigin: HorizontalOrigin.CENTER,//对齐方式
+  verticalOrigin: VerticalOrigin.CENTER,
+ }
+ _cesiumLabel: Entity|undefined = undefined
+
+ // 构造函数，新建label并显示
+ constructor(viewer: Viewer, position: Cartesian3, text: string, options?: textLabelOptions) {
+  this._viewer = viewer
+  this._defaultStyle = {...this._defaultStyle, ...options}
+
+  this._cesiumLabel = new Entity({
+   position: position,
+   name: 'default',
+   label: {
+    text: text,
+    scale: .6,
+    pixelOffset:  new Cartesian2(20, -20),
+    showBackground: this._defaultStyle.showBackground, //显示背景
+    backgroundColor: this._defaultStyle.backgroundColor, //背景色
+    backgroundPadding: this._defaultStyle.backgroundPadding, //padding值
+    fillColor: this._defaultStyle.fillColor,
+    outlineColor: this._defaultStyle.outlineColor,
+    outlineWidth: this._defaultStyle.outlineWidth,
+    horizontalOrigin: this._defaultStyle.horizontalOrigin, //对齐方式
+    verticalOrigin: this._defaultStyle.verticalOrigin,
+    heightReference: HeightReference.CLAMP_TO_GROUND
+   }
+  })
+  this._viewer.entities.add(this._cesiumLabel)
+ }
+
+ //移除label
+ public remove(){
+  if(this._cesiumLabel !== undefined && this._viewer!==null)
+   this._viewer.entities.remove(this._cesiumLabel)
+ }
+}