diff --git a/src/components/map/BottomBar.vue b/src/components/map/BottomBar.vue
index 0d96607..d66961e 100644
--- a/src/components/map/BottomBar.vue
+++ b/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>
diff --git a/src/components/map/SceneViewer.vue b/src/components/map/SceneViewer.vue
index 0124341..77b365c 100644
--- a/src/components/map/SceneViewer.vue
+++ b/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>()
diff --git a/src/components/toolbar.vue b/src/components/toolbar.vue
new file mode 100644
index 0000000..30040a3
--- /dev/null
+++ b/src/components/toolbar.vue
@@ -0,0 +1,16 @@
+<!--
+ 文件描述：工具条
+ 创建时间：2024/4/16 10:54
+ 创建人：Zhaipeixiu
+-->
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/utils/map/draw/drawPolygon.ts b/src/utils/map/draw/drawPolygon.ts
index 91f3a89..d9febe4 100644
--- a/src/utils/map/draw/drawPolygon.ts
+++ b/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)
+ }
}
diff --git a/src/utils/map/draw/drawPolyline.ts b/src/utils/map/draw/drawPolyline.ts
index de96eb1..3ea84af 100644
--- a/src/utils/map/draw/drawPolyline.ts
+++ b/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)
diff --git a/src/utils/map/geocomputation.ts b/src/utils/map/geocomputation.ts
index 674d083..9134727 100644
--- a/src/utils/map/geocomputation.ts
+++ b/src/utils/map/geocomputation.ts
@@ -88,7 +88,7 @@ function isOnLineSegment(
/**
- * 计算距离，单位米
+ * 计算距离，单位千米
* @param p1 起点
* @param p2 终点
*/
diff --git a/src/utils/map/geometry/baseGeometry.ts b/src/utils/map/geometry/baseGeometry.ts
index 58fb8ab..2099c6c 100644
--- a/src/utils/map/geometry/baseGeometry.ts
+++ b/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)
diff --git a/src/utils/map/geometry/textLabel.ts b/src/utils/map/geometry/textLabel.ts
new file mode 100644
index 0000000..0fc91bb
--- /dev/null
+++ b/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)
+ }
+}