Compare commits

...

7 Commits

@ -11,7 +11,7 @@ import BottomBar from '@/components/map/BottomBar.vue'
</script>
<style>
@import 'components/styles/cesium-compass.css';
@import 'styles/cesium-compass.css';
#map {
width: 100vw;
height: 100vh;

@ -7,7 +7,7 @@
import { Angle } from '@/utils/map/angle.ts'
import { ScreenSpaceEventHandler, Math, ScreenSpaceEventType } from 'cesium'
import { onMounted, ref } from 'vue'
import { cartesian2ToCartesian3 } from '@/utils/map/coordinate'
import { cartesian2ToCartesian3 } from '@/utils/map/coordinate.ts'
let nowLatStr: string, nowLonStr: string
let lonlatStr = ref('')
let isDecimal = ref(true)
@ -16,15 +16,8 @@ onMounted(() => {
let _viewer = window.viewer
let canvas = _viewer.scene.canvas
let handler = new ScreenSpaceEventHandler(canvas)
handler.setInputAction((e: ScreenSpaceEventHandler.MotionEvent) => {
handler.setInputAction((e: any) => {
//
// let position: any = _viewer.scene.pickPosition(e.endPosition)
// if (!position) {
// position = _viewer.scene.camera.pickEllipsoid(
// e.startPosition,
// _viewer.scene.globe.ellipsoid,
// )
// }
let position = cartesian2ToCartesian3(_viewer, e.endPosition)
if (position) {
//
@ -39,14 +32,15 @@ onMounted(() => {
let needElevation: boolean =
camera_alt < 250 && _viewer.camera.pitch < -(Math.PI / 180) * 80
let elevStr = needElevation
? _viewer.scene.globe.getHeight(cartographic)?.toFixed(2) ?? ''
: '' //
? _viewer.scene.globe.getHeight(cartographic)?.toFixed(2) + 'm' ?? ''
: '高度过高'
if (isDecimal.value) {
//
lonlatStr.value = `经度${nowLonStr} , 纬度:${nowLatStr} , 海拔(m)${elevStr}`
lonlatStr.value = `经度: ${nowLonStr}°, 纬度: ${nowLatStr}°, 高度: ${elevStr}`
} else {
lonlatStr.value = `经度:${Angle.DecimalDegree2DMS(nowLonStr)} , 纬度:${Angle.DecimalDegree2DMS(nowLatStr)} , 海拔(m)${elevStr}`
lonlatStr.value = `经度: ${Angle.DecimalDegree2DMS(nowLonStr)}, 纬度: ${Angle.DecimalDegree2DMS(nowLatStr)},
高度: ${elevStr}`
}
} catch (e) {}
}
@ -54,14 +48,14 @@ onMounted(() => {
})
function lonlatClick() {
let elevStr = lonlatStr.value.split('海拔')[1]
let elevStr = lonlatStr.value.split('高度')[1]
console.log(elevStr)
if (isDecimal.value) {
lonlatStr.value =
`经度${Angle.DecimalDegree2DMS(nowLonStr)} , 纬度:${Angle.DecimalDegree2DMS(nowLatStr)} , 海拔(m)` +
`经度: ${Angle.DecimalDegree2DMS(nowLonStr)}, 纬度: ${Angle.DecimalDegree2DMS(nowLatStr)}, 高度` +
elevStr
} else {
lonlatStr.value =
`经度:${nowLonStr} , 纬度:${nowLatStr} , 海拔(m)` + elevStr
lonlatStr.value = `经度: ${nowLonStr}°, 纬度: ${nowLatStr}°, 高度` + elevStr
}
isDecimal.value = !isDecimal.value
}
@ -81,7 +75,7 @@ function lonlatClick() {
bottom: 1px;
left: 0;
width: 100vw;
height: 2.3rem;
height: 1.7rem;
background-color: rgba(47, 53, 60, 0.8);
color: #fff;
font-size: 0.7rem;
@ -90,9 +84,9 @@ function lonlatClick() {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
#lonlatText {
margin-left: 2rem;
background: none;
border: none;
color: #ffffff;

@ -2,7 +2,7 @@
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-07 14:15:35
* @LastEditors: cbwu
* @LastEditTime: 2024-04-11 09:11:25
* @LastEditTime: 2024-04-12 09:22:20
* @Description:
-->
<template>
@ -23,6 +23,7 @@ import { initViewer, perfViewer, showNavigator } from '@/utils/map/sceneViewer'
import { flyToChina } from '@/utils/map/camera'
import CreatePolyline from '@/utils/map/draw/drawPolyline'
// import DrawPoint from '@/utils/map/draw/drawPoint'
import { DrawPolygon } from '@/utils/map/draw/drawPolygon'
const viewerDivRef = ref<HTMLDivElement>()
let viewer: Viewer
window.CESIUM_BASE_URL = 'node_modules/cesium/Build/Cesium/'
@ -39,7 +40,7 @@ Ion.defaultAccessToken =
// 60.0, //
// )
onMounted(async () => {
onMounted(() => {
//
viewer = initViewer(viewerDivRef.value as HTMLElement)
//
@ -61,7 +62,7 @@ onMounted(async () => {
viewer.terrainProvider = getTDTTerrainProvider()
//
const markerLayer = new CustomDataSource('Marker')
await viewer.dataSources.add(markerLayer)
viewer.dataSources.add(markerLayer)
// window
window.viewer = viewer
@ -69,6 +70,8 @@ onMounted(async () => {
//
// const drawPolyline = new CreatePolyline(viewer)
// drawPolyline.start()
const drawPolygon = new DrawPolygon(viewer)
drawPolygon.start()
})
</script>

@ -17,8 +17,7 @@
display: inline-block;
font-family: 'Roboto', sans-serif;
padding-left: .5rem;
font-size: .9rem;
line-height: 1rem;
font-size: .8rem;
color: #FFFFFF;
width: 7.5rem;
text-align: center;

@ -0,0 +1,5 @@
/*
* @Author: zhaipx
* @Date: {2024/4/11}
* @Description:
*/

@ -1,3 +1,6 @@
import { getAzimuth } from '@/utils/map/geocomputation.ts'
import { Cartesian3 } from 'cesium'
class Angle {
constructor() {}
@ -34,6 +37,31 @@ class Angle {
}
return ''
}
/**
*
* @param p1
* @param p2
* @param digits 1
*/
static getAzimuth(p1: Cartesian3, p2: Cartesian3, digits = 1) {
return getAzimuth(p1, p2, digits)
}
/**
*
* @param degree
*/
static degree2rad(degree: number): number {
return (Math.PI / 180) * degree
}
/**
*
* @param rad
*/
static rad2degree(rad: number): number {
return (180 / Math.PI) * rad
}
}
export { Angle }

@ -8,8 +8,8 @@ function flyToChina(viewer: Viewer) {
viewer.camera.flyTo({
destination: Cartesian3.fromDegrees(103.84, 31.15, 10350000),
orientation: {
heading: Math.toRadians(348.4202942851978),
pitch: Math.toRadians(-89.74026687972041),
heading: Math.toRadians(0),
pitch: Math.toRadians(-90),
roll: Math.toRadians(0),
},
complete: function callback() {

@ -0,0 +1,160 @@
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-04-11 13:53:40
* @LastEditors: cbwu
* @LastEditTime: 2024-04-12 15:18:40
* @Description:
*/
import {
Viewer,
ScreenSpaceEventHandler,
Cartesian3,
Color,
ScreenSpaceEventType,
Entity,
CallbackProperty,
PolylineDashMaterialProperty,
} 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'
export class DrawPolygon {
viewer: Viewer
handler: ScreenSpaceEventHandler
polygon: PolygonEntity | null
positions: Cartesian3[] = []
trackingLine: Entity | null
trackingLinePositions: Cartesian3[] = []
bMove: boolean = false
bLongClick: boolean = false
constructor(viewer: Viewer) {
this.viewer = viewer
this.handler = new ScreenSpaceEventHandler(viewer.scene.canvas)
this.polygon = null
this.trackingLine = null
}
public start() {
// 左单击加点
this.handler.setInputAction(
this.leftClickCallBack,
ScreenSpaceEventType.LEFT_CLICK,
)
// 移动动态绘制
this.handler.setInputAction(
this.moveCallBack,
ScreenSpaceEventType.MOUSE_MOVE,
)
// 左双击结束
this.handler.setInputAction(
this.leftDoubleClickCallBack,
ScreenSpaceEventType.LEFT_DOUBLE_CLICK,
)
}
//左单击回调事件
private leftClickCallBack = (
event: ScreenSpaceEventHandler.PositionedEvent,
) => {
const pickedObject = this.viewer.scene.pick(event.position)
// console.log(pickedObject)
if (pickedObject) {
//点击同一位置,返回
if (
pickedObject.id.id ===
this.polygon?.controlPointsID[this.positions.length - 1]
) {
console.log('********click the same point')
return
}
}
console.log('****************leftClick!')
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
if (cartesian3 != undefined) {
if (this.positions.length <= 2) {
this.positions.push(cartesian3)
this.trackingLinePositions.push(cartesian3)
} else {
this.polygon!.modifyPoint(cartesian3, -1)
this.polygon!.showControlPoint(-1, true)
//多创建一个点,用于鼠标移动实时变化
this.polygon!.addPoint(cartesian3, -1)
this.polygon!.showControlPoint(-1, false)
this.trackingLinePositions[2] = cartesian3
}
this.bMove = true
this.viewer.scene.requestRender() //刷新
}
}
//移动回调事件
private moveCallBack = (event: ScreenSpaceEventHandler.MotionEvent) => {
if (this.bMove) {
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.endPosition)
if (cartesian3 != undefined) {
if (this.positions.length === 1) {
//更新追踪线坐标
this.trackingLinePositions[1] = cartesian3
// this.positions[1] = cartesian3
if (!this.trackingLine) {
//创建追踪线对象
this.trackingLine = this.createTrackingLine(
this.trackingLinePositions,
)
this.viewer.entities.add(this.trackingLine)
}
}
if (this.positions.length === 2) {
//移除追踪直线
if (this.trackingLine) {
this.viewer.entities.remove(this.trackingLine)
}
this.positions.push(cartesian3)
console.log(
'*********PositionsLength:' + this.positions.length.toString(),
)
//创建多边形
if (!this.polygon) {
this.polygon = new PolygonEntity(this.positions)
this.viewer.dataSources.add(this.polygon)
// 实时移动不显示控制点
this.polygon.showControlPoint(-1, false)
}
}
//实时改变多边形
if (this.positions.length >= 3) {
this.polygon!.modifyPoint(cartesian3, -1)
}
this.viewer.scene.requestRender() //刷新
}
}
}
//左双击回调事件
private leftDoubleClickCallBack = (
event: ScreenSpaceEventHandler.PositionedEvent,
) => {
if (!this.polygon) return
console.log('**************************** double click')
this.bMove = false
//移除多余的点
this.polygon.removePoint(-1)
this.polygon.removePoint(-1)
}
//创建追踪线
createTrackingLine(positions: Cartesian3[]) {
return new Entity({
polyline: {
positions: new CallbackProperty(() => {
return positions
}, false),
width: 2,
material: new PolylineDashMaterialProperty({
color: Color.GREEN,
dashLength: 15, //短划线长度
}),
clampToGround: true,
},
})
}
}

@ -2,7 +2,7 @@
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-27 08:43:44
* @LastEditors: cbwu
* @LastEditTime: 2024-04-02 13:33:25
* @LastEditTime: 2024-04-12 09:06:27
* @Description: Polyline
*/
import {
@ -178,7 +178,7 @@ export default class CreatePolyline {
this.handler.removeInputAction(ScreenSpaceEventType.MOUSE_MOVE)
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
}
//创建追踪线
createTrackingLine(positions: Cartesian3[]) {
return new Entity({
polyline: {

@ -1,231 +0,0 @@
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-28 09:14:45
* @LastEditors: cbwu
* @LastEditTime: 2024-03-28 17:40:14
* @Description:
*/
import {
Entity,
EntityCollection,
Cartesian3,
Color,
PrimitiveCollection,
PointPrimitiveCollection,
PolylineGeometry,
PointGraphics,
Property,
PositionProperty,
LabelGraphics,
PolylineGraphics,
PolygonGraphics,
Cartesian2,
ConstantPositionProperty,
CallbackProperty,
} from 'cesium'
type EntityOptions = {
id?: string
name?: string
show?: boolean
pixelSize?: number
outlineColor?: Color
color?: Color
fillColor?: Color
fill?: boolean
width?: number
outlineWidth?: number
text?: string
font?: string
pixelOffset?: Cartesian2
}
// 点
class PointEntity extends Entity {
static ID: number = 0
public subId: number = 0 //用于作为其他几何体的控制点时标记节点号
options: EntityOptions = {
id: 'Point' + String(PointEntity.ID),
name: 'Point' + String(PointEntity.ID + 1),
show: true,
pixelSize: 10,
color: Color.GREEN,
outlineWidth: 0,
}
constructor(
position: PositionProperty | Cartesian3,
options?: EntityOptions,
) {
super({
position: position,
})
this.options = { ...this.options, ...options }
//点对象
this.point = new PointGraphics({
pixelSize: this.options.pixelSize,
color: this.options.color,
outlineColor: this.options.outlineColor,
outlineWidth: this.options.outlineWidth,
})
// 标注对象
this.label = new LabelGraphics({
text: this.options.text,
font: this.options.font,
pixelOffset: this.options.pixelOffset,
})
PointEntity.ID++
}
}
// 线
class PolylineEntity extends EntityCollection {
static ID: number = 0
positions: Cartesian3[] = []
controlPointsID: string[] = []
options: EntityOptions = {
id: 'Polyline' + String(PolylineEntity.ID),
name: 'Polyline' + String(PolylineEntity.ID + 1),
show: true,
width: 2,
color: Color.GREEN,
}
constructor(ptArr: Cartesian3[], options?: EntityOptions) {
super()
this.options = { ...this.options, ...options }
this.positions = ptArr
const polyline = new Entity({
name: this.options.name,
polyline: {
positions: new CallbackProperty(() => {
return this.positions
}, false),
show: this.options.show,
width: this.options.width,
material: this.options.color,
},
})
this.add(polyline)
ptArr.forEach((pt, index) => {
this.createPoint(pt, index)
})
PolylineEntity.ID++
}
/**
* ,
* @param pos
* @param index 0
*/
public addPoint(pos: Cartesian3, index: number = -1) {
if (index === -1) {
//插入尾部
this.positions.push(pos)
this.createPoint(pos, this.positions.length - 1)
} else if (index >= 0 && index < this.positions.length) {
this.positions.splice(index, 0, pos)
this.createPoint(pos, index)
} else {
return
}
}
/**
*
* @param index
* @returns
*/
public removePoint(index: number = -1) {
if (index === -1 || index === this.positions.length - 1) {
//移除尾部元素
this.positions.pop()
} else if (index >= 0 && index < this.positions.length) {
this.positions.splice(index, 1)
this.removeById(this.controlPointsID[index])
this.controlPointsID.splice(index, 1)
} else {
return
}
}
/**
*
* @param pos
* @param index
*/
public modifyPoint(pos: Cartesian3, index: number) {
if (index >= 0 && index < this.positions.length) {
this.positions.splice(index, 1, pos)
//修改控制点坐标
const point = this.getById(this.controlPointsID[index])
if (point) {
point.position = new ConstantPositionProperty(pos)
}
}
}
/**
*
* @param pos
* @param index ,0
*/
createPoint(pos: Cartesian3, index: number) {
const point = new PointEntity(pos)
point.subId = index + 1
this.add(point)
this.controlPointsID.splice(index, 0, point.id)
}
}
// 多边形
class PolygonEntity extends Entity {
static id: number = 0
options: EntityOptions = {
id: 'Polygon' + String(PolygonEntity.id),
name: 'Polygon' + String(PolygonEntity.id + 1),
show: true,
width: 2,
color: Color.RED,
fillColor: Color.RED.withAlpha(0.5),
fill: true,
}
constructor(ptArr: Cartesian3[] | Property, options?: EntityOptions) {
super({
// id: options?.id || String(PolygonEntity.id),
})
this.options = { ...this.options, ...options }
this.name = this.options.name
this.polygon = new PolygonGraphics({
show: this.options.show,
hierarchy: ptArr,
material: this.options.fillColor, //填充颜色
fill: this.options.fill, //是否填充
outlineWidth: this.options.width, //线宽
outlineColor: this.options.color, //线颜色
})
PolygonEntity.id++
}
}
// 线
class Polyline extends PrimitiveCollection {
constructor(ptArr: Cartesian3[]) {
super()
this.add(this.createPoints(ptArr))
this.add(this.createPolyline(ptArr))
// this.id
}
private createPoints(posArr: Cartesian3[]) {
const points = new PointPrimitiveCollection()
for (const pos in posArr) {
points.add({
position: pos,
color: Color.RED,
pixelSize: 10,
})
}
return points
}
private createPolyline(posArr: Cartesian3[]) {
return new PolylineGeometry({
positions: posArr,
width: 2,
colors: new Array(posArr.length).fill(Color.fromCssColorString('green')),
})
}
}
export { PointEntity, Polyline, PolylineEntity, PolygonEntity }

@ -2,7 +2,7 @@
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-15 08:43:26
* @LastEditors: cbwu
* @LastEditTime: 2024-03-26 14:20:32
* @LastEditTime: 2024-04-12 10:30:36
* @FilePath: \GCSMap\src\utils\drawer.ts
* @Description:
*/

@ -5,7 +5,14 @@
* @LastEditTime: 2024-04-01 14:05:43
* @Description:
*/
import { Cartesian3, Math as Cesium_Math } from 'cesium'
import {
Cartesian3,
Cartographic,
EllipsoidGeodesic,
Math as Cesium_Math,
Matrix4,
Transforms,
} from 'cesium'
/**
* 线
* @param lineStart 线[longitude1, latitude1, height1]
@ -84,4 +91,73 @@ function isOnLineSegment(
*/
}
export { getClosestPoint, isOnLineSegment }
/**
*
* @param p1
* @param p2
*/
function getDistance(p1: Cartesian3, p2: Cartesian3): number {
let point1cartographic = Cartographic.fromCartesian(p1)
let point2cartographic = Cartographic.fromCartesian(p2)
/**根据经纬度计算出距离**/
let geodesic = new EllipsoidGeodesic()
geodesic.setEndPoints(point1cartographic, point2cartographic)
return geodesic.surfaceDistance / 1000
}
/**
*
* @param p1
* @param p2
* @param digits 1
*/
function getAzimuth(p1: Cartesian3, p2: Cartesian3, digits = 1): string {
// 建立局部坐标系北为y东为xp1为原点
const localMatrix = Transforms.eastNorthUpToFixedFrame(p1)
//求世界坐标到局部坐标的变换矩阵
const worldToLocalMatrix = Matrix4.inverse(localMatrix, new Matrix4())
//p1在局部坐标系的位置即局部坐标原点
const localPosition1 = Matrix4.multiplyByPoint(
worldToLocalMatrix,
p1,
new Cartesian3(),
)
//p2在局部坐标系的位置
const localPosition2 = Matrix4.multiplyByPoint(
worldToLocalMatrix,
p2,
new Cartesian3(),
)
//弧度
const angle = Math.atan2(
localPosition2.x - localPosition1.x,
localPosition2.y - localPosition1.y,
)
//转为角度
let theta = angle * (180 / Math.PI)
theta = theta < 0 ? theta + 360 : theta
return theta.toFixed(digits)
}
/**
*
* @param vertexs
*/
function getPolygonArea(vertexs: Cartesian3[]) {
let area = 0
for (let i = 0; i < vertexs.length; i++) {
let j = (i + 1) % vertexs.length
area += vertexs[i].x * vertexs[j].y
area -= vertexs[i].y * vertexs[j].x
}
area /= 2
return Math.abs(area)
}
export {
getClosestPoint,
isOnLineSegment,
getDistance,
getAzimuth,
getPolygonArea,
}

@ -2,7 +2,7 @@
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-28 16:22:58
* @LastEditors: cbwu
* @LastEditTime: 2024-04-02 14:09:15
* @LastEditTime: 2024-04-12 14:57:49
* @Description:
*/
import {
@ -37,16 +37,21 @@ export abstract class BaseGeometry extends CustomDataSource {
* ,
* @param pos
* @param index 0
* @bAddControlPoint
*/
public addPoint(pos: Cartesian3, index: number = -1) {
public addPoint(
pos: Cartesian3,
index: number = -1,
bAddControlPoint: boolean = true,
) {
if (index === -1) {
//插入尾部
this.positions.push(pos)
// console.log(this.positions.length)
this.createPoint(pos, this.positions.length - 1)
if (bAddControlPoint)
this.createControlPoint(pos, this.positions.length - 1)
} else if (index >= 0 && index < this.positions.length) {
this.positions.splice(index, 0, pos)
this.createPoint(pos, index)
if (bAddControlPoint) this.createControlPoint(pos, index)
} else {
return
}
@ -62,11 +67,11 @@ export abstract class BaseGeometry extends CustomDataSource {
this.positions.pop()
} else if (index >= 0 && index < this.positions.length) {
this.positions.splice(index, 1)
this.entities.removeById(this.controlPointsID[index])
this.controlPointsID.splice(index, 1)
} else {
return
}
//移除控制点
this.removeControlPoint(index)
}
/**
*
@ -74,8 +79,12 @@ export abstract class BaseGeometry extends CustomDataSource {
* @param index
*/
public modifyPoint(pos: Cartesian3, index: number) {
if (index === -1) {
index = this.positions.length - 1
}
if (index >= 0 && index < this.positions.length) {
this.positions.splice(index, 1, pos)
if (this.controlPointsID[index]) {
//修改控制点坐标
const point = this.entities.getById(this.controlPointsID[index])
if (point) {
@ -83,12 +92,13 @@ export abstract class BaseGeometry extends CustomDataSource {
}
}
}
}
/**
*
* @param pos
* @param index ,0
*/
createPoint(pos: Cartesian3, index: number) {
public createControlPoint(pos: Cartesian3, index: number) {
// if (this.geometry) {
const point = new PointEntity(pos)
point.parent = this.geometry!
@ -97,6 +107,17 @@ export abstract class BaseGeometry extends CustomDataSource {
this.controlPointsID.splice(index, 0, point.id)
// }
}
/**
*
* @param index
*/
public removeControlPoint(index: number) {
if (index === -1) index = this.controlPointsID.length - 1
if (this.controlPointsID[index]) {
this.entities.removeById(this.controlPointsID[index])
this.controlPointsID.splice(index, 1)
}
}
/**
*
*/
@ -106,4 +127,16 @@ export abstract class BaseGeometry extends CustomDataSource {
})
this.controlPointsID = []
}
/**
*
* @param index
* @param bShow
*/
showControlPoint(index: number, bShow: boolean) {
if (index === -1) index = this.controlPointsID.length - 1
if (this.controlPointsID[index]) {
const point = this.entities.getById(this.controlPointsID[index])
if (point) point.show = bShow
}
}
}

@ -2,7 +2,7 @@
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-28 16:35:33
* @LastEditors: cbwu
* @LastEditTime: 2024-03-30 22:06:23
* @LastEditTime: 2024-04-12 15:43:49
* @Description:
*/
import {
@ -39,8 +39,9 @@ class PointEntity extends Entity {
id: 'Point' + String(PointEntity.ID),
name: 'Point' + String(PointEntity.ID + 1),
show: true,
pixelSize: 10,
color: Color.GREEN,
pixelSize: 8,
color: Color.WHITE,
outlineColor: Color.GREEN,
outlineWidth: 0,
}
constructor(position: Cartesian3, options?: EntityOptions) {

@ -0,0 +1,56 @@
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-04-11 09:26:56
* @LastEditors: cbwu
* @LastEditTime: 2024-04-12 15:34:45
* @Description: Polygon
*/
import {
Entity,
Cartesian3,
Color,
CallbackProperty,
PolygonHierarchy,
} from 'cesium'
import { BaseGeometry } from './baseGeometry'
import { type EntityOptions } from './pointEntity'
export class PolygonEntity extends BaseGeometry {
static ID: number = 0
// positions: Cartesian3[] = []
controlPointsID: string[] = []
options: EntityOptions = {
id: 'Polygon' + String(PolygonEntity.ID),
name: 'Polygon' + String(PolygonEntity.ID + 1),
show: true,
width: 2,
color: Color.RED,
fillColor: Color.RED.withAlpha(0.5),
fill: true,
}
constructor(ptArr: Cartesian3[], options?: EntityOptions) {
super()
this.positions = ptArr
this.options = { ...this.options, ...options }
this.geometry = new Entity({
show: this.options.show,
name: this.options.name,
polygon: {
hierarchy: new CallbackProperty(() => {
return new PolygonHierarchy(this.positions)
}, false),
material: this.options.fillColor, //填充颜色
fill: this.options.fill, //是否填充
outline: true,
// outlineWidth: this.options.width, //线宽
outlineColor: this.options.color, //线颜色
},
})
this.entities.add(this.geometry)
// 添加控制点
ptArr.forEach((pt, index) => {
this.createControlPoint(pt, index)
})
PolygonEntity.ID++
}
}

@ -2,7 +2,7 @@
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-28 16:49:02
* @LastEditors: cbwu
* @LastEditTime: 2024-04-01 17:04:55
* @LastEditTime: 2024-04-12 14:27:12
* @Description: Polyline
*/
import { Entity, Cartesian3, Color, CallbackProperty } from 'cesium'
@ -40,7 +40,7 @@ export class PolylineEntity extends BaseGeometry {
this.entities.add(this.geometry)
// 添加控制点
ptArr.forEach((pt, index) => {
this.createPoint(pt, index)
this.createControlPoint(pt, index)
})
PolylineEntity.ID++

@ -53,14 +53,14 @@ function initViewer(container: string | Element): Viewer {
const creditContainer = viewer.cesiumWidget.creditContainer as HTMLDivElement
creditContainer.style.display = 'none'
// 开启深度检测
viewer.scene.globe.depthTestAgainstTerrain = true
viewer.scene.globe.depthTestAgainstTerrain = false
// 水雾特效
viewer.scene.globe.showGroundAtmosphere = true
// 设置更高的缩放惯性以使缩放操作更平滑
viewer.scene.screenSpaceCameraController.inertiaZoom = 0.9
// 限制相机缩放
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 200 //相机的高度的最小值
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000000 //相机高度的最大值
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 10350000 //相机高度的最大值
// 设置设备像素比,可能会影响渲染性能
// viewer.resolutionScale = window.devicePixelRatio
// 视图重绘后确保清晰度

Loading…
Cancel
Save