import * as Cesium from 'cesium'
|
import { MapTooltip } from '@ztzf/utils'
|
import { ToolBase } from '../ToolBase'
|
import { buildEllipsePositions } from '../shapeUtils'
|
|
const DEFAULT_STYLE = {
|
fill: Cesium.Color.fromBytes(45, 140, 240, 99),
|
outline: Cesium.Color.fromBytes(45, 140, 240, 255),
|
}
|
const resolveStyle = style => ({
|
fill: style?.fill || DEFAULT_STYLE.fill,
|
outline: style?.outline || DEFAULT_STYLE.outline,
|
})
|
|
export class DrawEllipseTool extends ToolBase {
|
constructor(viewer, options = {}) {
|
super(viewer)
|
this.tooltip = new MapTooltip(viewer)
|
this.dataSource = null
|
this.ellipseEntity = null
|
this.centerCartesian = null
|
this.majorPoint = null
|
this.minorPoint = null
|
this.semiMajor = 0
|
this.semiMinor = 0
|
this.isDrawing = false
|
this.drawStep = 0
|
this.isCompleted = false
|
this.style = resolveStyle(options?.style)
|
}
|
|
start() {
|
this.dataSource = new Cesium.CustomDataSource('draw-ellipse')
|
this.viewer.dataSources.add(this.dataSource)
|
this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
|
this.handler.setInputAction(click => this.handleLeftClick(click), Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
this.handler.setInputAction(movement => this.handleMouseMove(movement), Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
this.drawStep = 0
|
this.isCompleted = false
|
this.tooltip.hide()
|
}
|
|
handleLeftClick(click) {
|
if (this.isCompleted) return
|
const position = this.getPositionFromScreen(click.position)
|
if (!position) return
|
if (this.drawStep === 0) {
|
this.centerCartesian = position
|
this.semiMajor = 1
|
this.semiMinor = 1
|
this.isDrawing = true
|
this.drawStep = 1
|
this.createEntities()
|
this.tooltip.show('单击设置长轴', click.position)
|
return
|
}
|
if (this.drawStep === 1) {
|
this.majorPoint = position
|
this.semiMajor = Math.max(1, this.getSurfaceDistance(this.centerCartesian, this.majorPoint))
|
this.semiMinor = this.semiMajor
|
this.drawStep = 2
|
this.tooltip.show('单击设置短轴', click.position)
|
return
|
}
|
if (this.drawStep === 2) {
|
this.minorPoint = position
|
const minorRadius = Math.max(1, this.getSurfaceDistance(this.centerCartesian, this.minorPoint))
|
this.semiMinor = Math.min(minorRadius, this.semiMajor)
|
this.isDrawing = false
|
this.drawStep = 0
|
this.isCompleted = true
|
const positions = buildEllipsePositions(this.centerCartesian, this.semiMajor, this.semiMinor)
|
this.notify('getPolygonPositions', {
|
positions,
|
meta: {
|
center: this.centerCartesian,
|
majorPoint: this.majorPoint,
|
minorPoint: this.minorPoint,
|
semiMajor: this.semiMajor,
|
semiMinor: this.semiMinor,
|
},
|
})
|
this.tooltip.hide()
|
this.clearPreviewEntities()
|
}
|
}
|
|
handleMouseMove(movement) {
|
if (this.isCompleted) return
|
const tipText = this.drawStep === 0
|
? '单击设置中心点'
|
: this.drawStep === 1
|
? '单击设置长轴'
|
: '单击设置短轴'
|
if (!this.tooltip?.isVisible) {
|
this.tooltip.show(tipText, movement.endPosition)
|
} else {
|
this.tooltip.show(tipText)
|
this.tooltip.move(movement.endPosition)
|
}
|
if (!this.isDrawing) return
|
const position = this.getPositionFromScreen(movement.endPosition)
|
if (!position) return
|
if (this.drawStep === 1) {
|
const radius = Math.max(1, this.getSurfaceDistance(this.centerCartesian, position))
|
this.semiMajor = radius
|
this.semiMinor = radius
|
return
|
}
|
if (this.drawStep === 2) {
|
const minorRadius = Math.max(1, this.getSurfaceDistance(this.centerCartesian, position))
|
this.semiMinor = Math.min(minorRadius, this.semiMajor)
|
}
|
}
|
|
createEntities() {
|
if (this.ellipseEntity) return
|
this.ellipseEntity = this.dataSource.entities.add({
|
position: new Cesium.CallbackProperty(() => this.centerCartesian, false),
|
ellipse: {
|
semiMajorAxis: new Cesium.CallbackProperty(() => this.semiMajor, false),
|
semiMinorAxis: new Cesium.CallbackProperty(() => this.semiMinor, false),
|
material: this.style.fill,
|
outline: true,
|
outlineColor: this.style.outline,
|
outlineWidth: 2,
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
},
|
})
|
}
|
|
getSurfaceDistance(startCartesian, endCartesian) {
|
const start = Cesium.Cartographic.fromCartesian(startCartesian)
|
const end = Cesium.Cartographic.fromCartesian(endCartesian)
|
const geodesic = new Cesium.EllipsoidGeodesic(start, end)
|
return geodesic.surfaceDistance
|
}
|
|
clearPreviewEntities() {
|
if (!this.dataSource) return
|
this.dataSource.entities.removeAll()
|
this.ellipseEntity = null
|
}
|
|
getPositionFromScreen(screenPosition) {
|
const scene = this.viewer.scene
|
const cartesian = scene.pickPosition(screenPosition)
|
if (cartesian) return cartesian
|
return scene.camera.pickEllipsoid(screenPosition, scene.globe.ellipsoid)
|
}
|
|
setStyle(style) {
|
this.style = resolveStyle(style)
|
if (this.ellipseEntity?.ellipse) {
|
this.ellipseEntity.ellipse.material = this.style.fill
|
this.ellipseEntity.ellipse.outlineColor = this.style.outline
|
}
|
}
|
|
destroy() {
|
if (this.dataSource) {
|
this.dataSource.entities.removeAll()
|
this.viewer.dataSources.remove(this.dataSource)
|
this.dataSource = null
|
}
|
if (this.handler) {
|
this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
this.handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
this.handler.destroy()
|
this.handler = null
|
}
|
this.tooltip?.destroy()
|
this.tooltip = null
|
this.centerCartesian = null
|
this.majorPoint = null
|
this.minorPoint = null
|
this.isDrawing = false
|
this.drawStep = 0
|
this.isCompleted = false
|
}
|
}
|
