feat: 新增绘制标记点工具类。

pull/5/head
cbwu 1 year ago
parent bc9fa04169
commit a78e0b11d5

@ -7,7 +7,7 @@
<script setup lang="ts"> <script setup lang="ts">
import SceneViewer from './components/map/SceneViewer.vue' import SceneViewer from './components/map/SceneViewer.vue'
import BottomBar from "@/components/map/BottomBar.vue"; import BottomBar from '@/components/map/BottomBar.vue'
</script> </script>
<style> <style>

@ -6,7 +6,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { Angle } from '@/utils/map/angle.ts' import { Angle } from '@/utils/map/angle.ts'
import { ScreenSpaceEventHandler, Math, ScreenSpaceEventType } from 'cesium' import { ScreenSpaceEventHandler, Math, ScreenSpaceEventType } from 'cesium'
import {onMounted, ref} from "vue"; import { onMounted, ref } from 'vue'
let nowLatStr: string, nowLonStr: string let nowLatStr: string, nowLonStr: string
let lonlatStr = ref('') let lonlatStr = ref('')
let isDecimal = ref(true) let isDecimal = ref(true)
@ -19,24 +19,31 @@ onMounted(()=>{
// //
let position: any = _viewer.scene.pickPosition(e.endPosition) let position: any = _viewer.scene.pickPosition(e.endPosition)
if (!position) { if (!position) {
position = _viewer.scene.camera.pickEllipsoid(e.startPosition, _viewer.scene.globe.ellipsoid) position = _viewer.scene.camera.pickEllipsoid(
e.startPosition,
_viewer.scene.globe.ellipsoid,
)
} }
if (position) { if (position) {
// //
let cartographic = _viewer.scene.globe.ellipsoid.cartesianToCartographic(position); let cartographic =
_viewer.scene.globe.ellipsoid.cartesianToCartographic(position)
try { try {
// //
nowLatStr = Math.toDegrees(cartographic.latitude).toFixed(7) // nowLatStr = Math.toDegrees(cartographic.latitude).toFixed(7) //
nowLonStr = Math.toDegrees(cartographic.longitude).toFixed(7) // nowLonStr = Math.toDegrees(cartographic.longitude).toFixed(7) //
let camera_alt = (_viewer.camera.positionCartographic.height / 1000) // let camera_alt = _viewer.camera.positionCartographic.height / 1000 //
// 250-80 // 250-80
let needElevation: boolean = camera_alt < 250 && (_viewer.camera.pitch < -(Math.PI/180)*80) let needElevation: boolean =
let elevStr = needElevation? _viewer.scene.globe.getHeight(cartographic)?.toFixed(2)?? '' : '' // camera_alt < 250 && _viewer.camera.pitch < -(Math.PI / 180) * 80
let elevStr = needElevation
? _viewer.scene.globe.getHeight(cartographic)?.toFixed(2) ?? ''
: '' //
if(isDecimal.value) { // if (isDecimal.value) {
//
lonlatStr.value = `经度:${nowLonStr} , 纬度:${nowLatStr} , 海拔(m)${elevStr}` lonlatStr.value = `经度:${nowLonStr} , 纬度:${nowLatStr} , 海拔(m)${elevStr}`
} } else {
else {
lonlatStr.value = `经度:${Angle.DecimalDegree2DMS(nowLonStr)} , 纬度:${Angle.DecimalDegree2DMS(nowLatStr)} , 海拔(m)${elevStr}` lonlatStr.value = `经度:${Angle.DecimalDegree2DMS(nowLonStr)} , 纬度:${Angle.DecimalDegree2DMS(nowLatStr)} , 海拔(m)${elevStr}`
} }
} catch (e) {} } catch (e) {}
@ -47,10 +54,12 @@ onMounted(()=>{
function lonlatClick() { function lonlatClick() {
let elevStr = lonlatStr.value.split('海拔')[1] let elevStr = lonlatStr.value.split('海拔')[1]
if (isDecimal.value) { if (isDecimal.value) {
lonlatStr.value = `经度:${Angle.DecimalDegree2DMS(nowLonStr)} , 纬度:${Angle.DecimalDegree2DMS(nowLatStr)} , 海拔(m)` + elevStr lonlatStr.value =
} `经度:${Angle.DecimalDegree2DMS(nowLonStr)} , 纬度:${Angle.DecimalDegree2DMS(nowLatStr)} , 海拔(m)` +
else { elevStr
lonlatStr.value = `经度:${nowLonStr} , 纬度:${nowLatStr} , 海拔(m)` + elevStr } else {
lonlatStr.value =
`经度:${nowLonStr} , 纬度:${nowLatStr} , 海拔(m)` + elevStr
} }
isDecimal.value = !isDecimal.value isDecimal.value = !isDecimal.value
} }
@ -84,8 +93,8 @@ function lonlatClick() {
margin-left: 2rem; margin-left: 2rem;
background: none; background: none;
border: none; border: none;
color: #FFFFFF; color: #ffffff;
font-size: .8rem; font-size: 0.8rem;
} }
#lonlatText:hover { #lonlatText:hover {
cursor: pointer; cursor: pointer;

@ -2,7 +2,7 @@
* @Author: cbwu 504-wuchengbo@htsdfp.com * @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-07 14:15:35 * @Date: 2024-03-07 14:15:35
* @LastEditors: cbwu * @LastEditors: cbwu
* @LastEditTime: 2024-04-10 11:29:48 * @LastEditTime: 2024-04-10 13:59:42
* @Description: * @Description:
--> -->
<template> <template>

@ -11,7 +11,7 @@ import {
GeographicTilingScheme, GeographicTilingScheme,
WebMercatorTilingScheme, WebMercatorTilingScheme,
} from 'cesium' } from 'cesium'
import axios from "axios" import axios from 'axios'
//地图服务枚举类型_c为墨卡托投影_w为经纬度投影 //地图服务枚举类型_c为墨卡托投影_w为经纬度投影
enum TDTLayerType { enum TDTLayerType {

@ -8,23 +8,32 @@ class Angle {
*/ */
static DecimalDegree2DMS(decimal_var: number | string) { static DecimalDegree2DMS(decimal_var: number | string) {
if (!decimal_var.toString().includes('.')) if (!decimal_var.toString().includes('.'))
return decimal_var.toString() + '°0\'0\'\'' return decimal_var.toString() + "°0'0''"
let decimalStr = decimal_var.toString().split('.') let decimalStr = decimal_var.toString().split('.')
let degreeStr = decimalStr[0] let degreeStr = decimalStr[0]
if (decimalStr[1]) { if (decimalStr[1]) {
let minutes = Number(decimalStr[1]) / Math.pow(10,decimalStr[1].length) * 60 let minutes =
(Number(decimalStr[1]) / Math.pow(10, decimalStr[1].length)) * 60
if (!minutes.toString().includes('.')) if (!minutes.toString().includes('.'))
return degreeStr + '°'+ minutes.toString() +'\'0\'\'' return degreeStr + '°' + minutes.toString() + "'0''"
let minuteSecondsStr = minutes.toString().split('.') let minuteSecondsStr = minutes.toString().split('.')
if (minuteSecondsStr[1]) { if (minuteSecondsStr[1]) {
let secondStr = Number(minuteSecondsStr[1]) / Math.pow(10,minuteSecondsStr[1].length) * 60 let secondStr =
return degreeStr + '°'+ minuteSecondsStr[0] +'\'' + secondStr.toFixed(3) + '\'\'' (Number(minuteSecondsStr[1]) /
Math.pow(10, minuteSecondsStr[1].length)) *
60
return (
degreeStr +
'°' +
minuteSecondsStr[0] +
"'" +
secondStr.toFixed(3) +
"''"
)
} }
} }
return '' return ''
} }
} }
export { Angle } export { Angle }

@ -2,6 +2,48 @@
* @Author: cbwu 504-wuchengbo@htsdfp.com * @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-27 09:51:04 * @Date: 2024-03-27 09:51:04
* @LastEditors: cbwu * @LastEditors: cbwu
* @LastEditTime: 2024-03-27 09:51:07 * @LastEditTime: 2024-04-10 13:53:42
* @Description: * @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()
}
}
}

@ -84,5 +84,4 @@ function isOnLineSegment(
*/ */
} }
export { getClosestPoint, isOnLineSegment } export { getClosestPoint, isOnLineSegment }

@ -2,19 +2,26 @@
* @Author: cbwu 504-wuchengbo@htsdfp.com * @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-04-10 08:53:12 * @Date: 2024-04-10 08:53:12
* @LastEditors: cbwu * @LastEditors: cbwu
* @LastEditTime: 2024-04-10 09:20:34 * @LastEditTime: 2024-04-10 13:55:27
* @Description: 广 * @Description: 广
*/ */
import { Entity, Cartesian3, Color } from 'cesium' import { Entity, Cartesian3, Color, HeightReference } from 'cesium'
import { getMapAssetsFile } from '@/utils/getAssets'
export class BillBoard extends Entity { export class BillBoard extends Entity {
static ID: number = 0
public subId: number = 0 //用于作为其他几何体的控制点时标记节点号
constructor(position: Cartesian3) { constructor(position: Cartesian3) {
super({ super({
position: position, position: position,
billboard: { billboard: {
show: true, show: true,
image: '@/assets/map/marker.svg', image: getMapAssetsFile('marker.svg'),
width: 32, width: 32,
height: 32, height: 32,
scale: 1,
// 设置实体贴地
heightReference: HeightReference.CLAMP_TO_GROUND,
// disableDepthTestDistance: Number.POSITIVE_INFINITY, // 可能会提高在不同角度下的清晰度
}, },
}) })
} }

Loading…
Cancel
Save