From fc4c74e21aa00fb89a551481f63ad44eeb073a5d Mon Sep 17 00:00:00 2001 From: cbwu <504-wuchengbo@htsdfp.com> Date: Mon, 22 Apr 2024 11:41:48 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=BB=98=E5=88=B6?= =?UTF-8?q?=E8=88=AA=E7=BA=BF=E5=8F=8C=E5=87=BB=E7=BB=93=E6=9D=9F=E5=88=A4?= =?UTF-8?q?=E5=AE=9A=E9=80=BB=E8=BE=91=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/map/draw/drawPolyline.ts | 65 +++++++------ src/utils/map/geometry/baseGeometry.ts | 8 +- src/utils/map/geometry/textLabel.ts | 123 +++++++++++++++---------- 3 files changed, 116 insertions(+), 80 deletions(-) diff --git a/src/utils/map/draw/drawPolyline.ts b/src/utils/map/draw/drawPolyline.ts index 3ea84af..9482c4a 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 19:00:18 + * @LastEditTime: 2024-04-22 11:23:47 * @Description: 绘制Polyline类 */ import { @@ -14,6 +14,7 @@ import { Entity, CallbackProperty, PolylineDashMaterialProperty, + Cartesian2, HeightReference, } from 'cesium' import { @@ -27,17 +28,8 @@ 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 - show?: boolean - pixelSize?: number - color?: Color - fillColor?: Color - fill?: boolean - width?: number - outlineWidth?: number -} +import { EntityOptions } from '@/types/entityoptions.ts' + export default class CreatePolyline { viewer: Viewer handler: ScreenSpaceEventHandler @@ -57,6 +49,9 @@ export default class CreatePolyline { clickTimeout: any altitudeOffset: number = 20 //相对高度 vDashLinePosition: Cartesian3[][] = [] //垂直辅助线坐标数组 + // 存储第一次点击的信息 + firstClickPosition: Cartesian2 | null = null + firstClickTime: number | null = null // layer: CustomDataSource defaultStyle: EntityOptions = { // id: 'Polyline' + String(PolylineEntity.id), @@ -111,17 +106,9 @@ export default class CreatePolyline { private leftClickCallBack = ( event: ScreenSpaceEventHandler.PositionedEvent, ) => { - const pickedObject = this.viewer.scene.pick(event.position) - if (pickedObject) { - //点击同一位置，返回 - if ( - pickedObject.id.id === - this.polyline?.controlPointsID[this.positions.length - 1] - ) { - console.log('********click the same point') - return - } - } + //根据屏幕坐标判断是否为同一点 + if (this.isSamplePosition(event.position.clone())) return + let cartesian3 = cartesian2ToCartesian3(this.viewer, event.position) if (cartesian3 != undefined) { if (!this.polyline) { @@ -152,24 +139,24 @@ export default class CreatePolyline { this.viewer.scene.requestRender() //刷新 // 计算2点距离 if (this.positions.length >= 2 && this.bMeasure) { - let distance = getDistance( + const distance = getDistance( this.positions[this.positions.length - 1], this.positions[this.positions.length - 2], ) this.totalDistance += distance // 计算2点方位角 - let azimuth = Angle.getAzimuth( + const azimuth = Angle.getAzimuth( this.positions[this.positions.length - 2], this.positions[this.positions.length - 1], ) // 计算2点的中间点 - let midPoint = Cartesian3.midpoint( + const 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}°` + const labelText = `距离: ${distance.toFixed(2)}km, 方位角: ${azimuth}°` new TextLabel(this.viewer, midPoint, labelText) } } @@ -272,4 +259,28 @@ export default class CreatePolyline { }, }) } + //判断点击是否同一位置 + isSamplePosition(clickPosition: Cartesian2) { + if (this.firstClickPosition) { + const dist = Cartesian2.distance(this.firstClickPosition, clickPosition) + if (dist <= 3) { + console.log('********click the same point0') + return true + } + } + this.firstClickPosition = clickPosition + + // const pickedObject = this.viewer.scene.pick(clickPosition) + // if (pickedObject) { + // //点击同一位置，返回 + // if ( + // pickedObject.id.id === + // this.polyline?.controlPointsID[this.positions.length - 1] + // ) { + // console.log('********click the same point') + // return + // } + // } + return false + } } diff --git a/src/utils/map/geometry/baseGeometry.ts b/src/utils/map/geometry/baseGeometry.ts index 2099c6c..2474505 100644 --- a/src/utils/map/geometry/baseGeometry.ts +++ b/src/utils/map/geometry/baseGeometry.ts @@ -2,7 +2,7 @@ * @Author: cbwu 504-wuchengbo@htsdfp.com * @Date: 2024-03-28 16:22:58 * @LastEditors: cbwu - * @LastEditTime: 2024-04-13 10:45:37 + * @LastEditTime: 2024-04-22 11:32:00 * @Description: 几何类抽象基类 */ import { @@ -41,7 +41,11 @@ export abstract class BaseGeometry extends CustomDataSource { * @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 index 0fc91bb..ca467cb 100644 --- a/src/utils/map/geometry/textLabel.ts +++ b/src/utils/map/geometry/textLabel.ts @@ -1,4 +1,20 @@ -import {Cartesian3, Entity, Color, Viewer, Cartesian2, HorizontalOrigin, VerticalOrigin, HeightReference} from "cesium"; +/* + * @Author: cbwu 504-wuchengbo@htsdfp.com + * @Date: 2024-04-16 18:59:56 + * @LastEditors: cbwu + * @LastEditTime: 2024-04-22 09:11:33 + * @Description: + */ +import { + Cartesian3, + Entity, + Color, + Viewer, + Cartesian2, + HorizontalOrigin, + VerticalOrigin, + HeightReference, +} from 'cesium' /** 文件描述：文本标注 @@ -6,59 +22,64 @@ import {Cartesian3, Entity, Color, Viewer, Cartesian2, HorizontalOrigin, Vertica 创建人：Zhaipeixiu */ export type textLabelOptions = { - showBackground?: boolean, //显示背景 - backgroundColor?: Color, //背景色 - backgroundPadding?: any, //padding值 - fillColor: Color, - horizontalOrigin?: any, //水平对齐方式 - verticalOrigin?: any, //竖直对齐方式 - outlineColor?: any, - outlineWidth?: any + 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 +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} + // 构造函数，新建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) - } + this._cesiumLabel = new Entity({ + position: position, + name: 'default', + label: { + text: text, + scale: 0.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) - } + //移除label + public remove() { + if (this._cesiumLabel !== undefined && this._viewer !== null) + this._viewer.entities.remove(this._cesiumLabel) + } }