From a78e0b11d593606ef5bc991ff3169556e11dc450 Mon Sep 17 00:00:00 2001
From: cbwu <504-wuchengbo@htsdfp.com>
Date: Wed, 10 Apr 2024 14:01:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=BB=98=E5=88=B6?=
=?UTF-8?q?=E6=A0=87=E8=AE=B0=E7=82=B9=E5=B7=A5=E5=85=B7=E7=B1=BB=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/App.vue | 2 +-
src/components/map/BottomBar.vue | 55 ++++++++++++++++------------
src/components/map/SceneViewer.vue | 2 +-
src/utils/map/TDTProvider.ts | 4 +-
src/utils/map/angle.ts | 57 +++++++++++++++++------------
src/utils/map/coordinate.ts | 2 +-
src/utils/map/draw/drawPoint.ts | 44 +++++++++++++++++++++-
src/utils/map/geocomputation.ts | 1 -
src/utils/map/geometry/billboard.ts | 13 +++++--
9 files changed, 123 insertions(+), 57 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index c16d9a9..e030980 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,7 +7,7 @@
diff --git a/src/components/map/SceneViewer.vue b/src/components/map/SceneViewer.vue
index 113ec1c..34baaba 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-10 11:29:48
+ * @LastEditTime: 2024-04-10 13:59:42
* @Description:
-->
diff --git a/src/utils/map/TDTProvider.ts b/src/utils/map/TDTProvider.ts
index c7baacb..a65b86f 100644
--- a/src/utils/map/TDTProvider.ts
+++ b/src/utils/map/TDTProvider.ts
@@ -11,7 +11,7 @@ import {
GeographicTilingScheme,
WebMercatorTilingScheme,
} from 'cesium'
-import axios from "axios"
+import axios from 'axios'
//地图服务枚举类型：_c为墨卡托投影，_w为经纬度投影
enum TDTLayerType {
@@ -108,7 +108,7 @@ export function Geocoder(word: string) {
* @param lon 经度
* @param lat 纬度
*/
-export function reverseGeocoder(lon:number, lat: number ) {
+export function reverseGeocoder(lon: number, lat: number) {
let url = `http://api.tianditu.gov.cn/geocoder?postStr={'lon':${lon},'lat':${lat},'ver':1}&type=geocode&tk=`
return axios.get(url + TDT_tk)
}
diff --git a/src/utils/map/angle.ts b/src/utils/map/angle.ts
index c3d48e6..10170f1 100644
--- a/src/utils/map/angle.ts
+++ b/src/utils/map/angle.ts
@@ -1,30 +1,39 @@
class Angle {
- constructor() {}
+ constructor() {}
- /**
- * 十进制经纬度转度分秒，精确至毫秒
- * @param decimal_var 十进制经纬度
- * @constructor
- */
- static DecimalDegree2DMS(decimal_var: number|string){
- if(!decimal_var.toString().includes('.'))
- return decimal_var.toString() + '°0\'0\'\''
- let decimalStr = decimal_var.toString().split('.')
- let degreeStr = decimalStr[0]
- if (decimalStr[1]){
- let minutes = Number(decimalStr[1]) / Math.pow(10,decimalStr[1].length) * 60
- if(!minutes.toString().includes('.'))
- return degreeStr + '°'+ minutes.toString() +'\'0\'\''
- let minuteSecondsStr = minutes.toString().split('.')
- if (minuteSecondsStr[1]){
- let secondStr = Number(minuteSecondsStr[1]) / Math.pow(10,minuteSecondsStr[1].length) * 60
- return degreeStr + '°'+ minuteSecondsStr[0] +'\'' + secondStr.toFixed(3) + '\'\''
- }
- }
- return ''
+ /**
+ * 十进制经纬度转度分秒，精确至毫秒
+ * @param decimal_var 十进制经纬度
+ * @constructor
+ */
+ static DecimalDegree2DMS(decimal_var: number | string) {
+ if (!decimal_var.toString().includes('.'))
+ return decimal_var.toString() + "°0'0''"
+ let decimalStr = decimal_var.toString().split('.')
+ let degreeStr = decimalStr[0]
+ if (decimalStr[1]) {
+ let minutes =
+ (Number(decimalStr[1]) / Math.pow(10, decimalStr[1].length)) * 60
+ if (!minutes.toString().includes('.'))
+ return degreeStr + '°' + minutes.toString() + "'0''"
+ let minuteSecondsStr = minutes.toString().split('.')
+ if (minuteSecondsStr[1]) {
+ let secondStr =
+ (Number(minuteSecondsStr[1]) /
+ Math.pow(10, minuteSecondsStr[1].length)) *
+ 60
+ return (
+ degreeStr +
+ '°' +
+ minuteSecondsStr[0] +
+ "'" +
+ secondStr.toFixed(3) +
+ "''"
+ )
+ }
}
+ return ''
+ }
}
-
-
export { Angle }
diff --git a/src/utils/map/coordinate.ts b/src/utils/map/coordinate.ts
index d9a8ebc..899a6b1 100644
--- a/src/utils/map/coordinate.ts
+++ b/src/utils/map/coordinate.ts
@@ -47,4 +47,4 @@ function cartesian3ToWGS84(pos: Cartesian3) {
return []
}
-export { cartesian2ToCartesian3, cartesian2ToWGS84, cartesian3ToWGS84 }
+export { cartesian2ToCartesian3, cartesian2ToWGS84, cartesian3ToWGS84 }
diff --git a/src/utils/map/draw/drawPoint.ts b/src/utils/map/draw/drawPoint.ts
index 4d7b7b6..b5b3164 100644
--- a/src/utils/map/draw/drawPoint.ts
+++ b/src/utils/map/draw/drawPoint.ts
@@ -2,6 +2,48 @@
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-27 09:51:04
* @LastEditors: cbwu
- * @LastEditTime: 2024-03-27 09:51:07
+ * @LastEditTime: 2024-04-10 13:53:42
* @Description: 绘制点类
*/
+import {
+ Viewer,
+ ScreenSpaceEventHandler,
+ Cartesian3,
+ Color,
+ ScreenSpaceEventType,
+ Entity,
+ CallbackProperty,
+ PolylineDashMaterialProperty,
+} from 'cesium'
+import { BillBoard } from '../geometry/billboard'
+import { cartesian2ToCartesian3 } from '../coordinate'
+export default class DrawPoint {
+ viewer: Viewer
+ handler: ScreenSpaceEventHandler
+ constructor(viewer: Viewer) {
+ this.viewer = viewer
+ this.handler = new ScreenSpaceEventHandler(this.viewer.scene.canvas)
+ }
+ //开始绘制
+ public start() {
+ this.handler.setInputAction(
+ this.leftClickCallBack,
+ ScreenSpaceEventType.LEFT_CLICK,
+ )
+ }
+ //结束绘制
+ public end() {
+ this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
+ this.handler.destroy()
+ }
+ //左键Click事件
+ private leftClickCallBack = (
+ event: ScreenSpaceEventHandler.PositionedEvent,
+ ) => {
+ const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
+ if (cartesian3) {
+ this.viewer.entities.add(new BillBoard(cartesian3))
+ this.viewer.scene.requestRender()
+ }
+ }
+}
diff --git a/src/utils/map/geocomputation.ts b/src/utils/map/geocomputation.ts
index 1569ba6..364fcd4 100644
--- a/src/utils/map/geocomputation.ts
+++ b/src/utils/map/geocomputation.ts
@@ -84,5 +84,4 @@ function isOnLineSegment(
*/
}
-
export { getClosestPoint, isOnLineSegment }
diff --git a/src/utils/map/geometry/billboard.ts b/src/utils/map/geometry/billboard.ts
index cf7e6b4..a6a1465 100644
--- a/src/utils/map/geometry/billboard.ts
+++ b/src/utils/map/geometry/billboard.ts
@@ -2,19 +2,26 @@
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-04-10 08:53:12
* @LastEditors: cbwu
- * @LastEditTime: 2024-04-10 09:20:34
+ * @LastEditTime: 2024-04-10 13:55:27
* @Description: 广告牌对象
*/
-import { Entity, Cartesian3, Color } from 'cesium'
+import { Entity, Cartesian3, Color, HeightReference } from 'cesium'
+import { getMapAssetsFile } from '@/utils/getAssets'
export class BillBoard extends Entity {
+ static ID: number = 0
+ public subId: number = 0 //用于作为其他几何体的控制点时标记节点号
constructor(position: Cartesian3) {
super({
position: position,
billboard: {
show: true,
- image: '@/assets/map/marker.svg',
+ image: getMapAssetsFile('marker.svg'),
width: 32,
height: 32,
+ scale: 1,
+ // 设置实体贴地
+ heightReference: HeightReference.CLAMP_TO_GROUND,
+ // disableDepthTestDistance: Number.POSITIVE_INFINITY, // 可能会提高在不同角度下的清晰度
},
})
}