import * as Cesium from 'cesium'
|
import { MapTooltip } from '@ztzf/utils'
|
import { ToolBase } from '../ToolBase'
|
import {
|
getBoundsFromLngLats,
|
getCenterFromBounds,
|
getMetersBetween,
|
buildEllipsePositions,
|
cartesianToLocal,
|
} 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,
|
})
|
|
const normalizePoints = points =>
|
(points || []).map(point => ({
|
lng: point.lng ?? point.longitude,
|
lat: point.lat ?? point.latitude,
|
}))
|
|
const resolveLngLat = point => {
|
if (!point) return null
|
const lng = point.lng ?? point.longitude
|
const lat = point.lat ?? point.latitude
|
if (Number.isFinite(lng) && Number.isFinite(lat)) {
|
return { lng: Number(lng), lat: Number(lat), height: Number(point.height) || 0 }
|
}
|
return null
|
}
|
|
const resolveCartesian = point => {
|
if (!point) return null
|
if (Number.isFinite(point.x) && Number.isFinite(point.y) && Number.isFinite(point.z)) {
|
return new Cesium.Cartesian3(point.x, point.y, point.z)
|
}
|
const lngLat = resolveLngLat(point)
|
if (!lngLat) return null
|
return Cesium.Cartesian3.fromDegrees(lngLat.lng, lngLat.lat, lngLat.height || 0)
|
}
|
|
const resolveCartographic = point => {
|
if (!point) return null
|
if (Number.isFinite(point.x) && Number.isFinite(point.y) && Number.isFinite(point.z)) {
|
return Cesium.Cartographic.fromCartesian(point)
|
}
|
const lngLat = resolveLngLat(point)
|
if (!lngLat) return null
|
return Cesium.Cartographic.fromDegrees(lngLat.lng, lngLat.lat, lngLat.height || 0)
|
}
|
|
export class EditEllipseTool extends ToolBase {
|
constructor(viewer, options = {}) {
|
super(viewer)
|
this.tooltip = new MapTooltip(viewer)
|
this.dataSource = null
|
this.centerCartesian = null
|
this.semiMajor = 0
|
this.semiMinor = 0
|
this.dragType = null
|
this.centerEntity = null
|
this.majorEntity = null
|
this.minorEntity = null
|
this.ellipseEntity = null
|
this.style = resolveStyle(options?.style)
|
}
|
|
start(data = []) {
|
const inputPoints = Array.isArray(data?.points) ? data.points : data
|
const meta = data?.meta || null
|
const metaCenter = resolveCartesian(meta?.center)
|
if (metaCenter) {
|
this.centerCartesian = metaCenter
|
const centerCarto = Cesium.Cartographic.fromCartesian(metaCenter)
|
const majorFromMeta = Number.isFinite(meta?.semiMajor) ? Number(meta.semiMajor) : 0
|
const minorFromMeta = Number.isFinite(meta?.semiMinor) ? Number(meta.semiMinor) : 0
|
const majorPoint = resolveCartographic(meta?.majorPoint)
|
const minorPoint = resolveCartographic(meta?.minorPoint)
|
const majorDistance = majorFromMeta || (majorPoint ? getMetersBetween(centerCarto, majorPoint) : 0)
|
const minorDistance = minorFromMeta || (minorPoint ? getMetersBetween(centerCarto, minorPoint) : 0)
|
if (majorDistance > 0) this.semiMajor = Math.max(1, majorDistance)
|
if (minorDistance > 0) this.semiMinor = Math.max(1, minorDistance)
|
if (this.semiMinor > this.semiMajor) this.semiMinor = this.semiMajor
|
}
|
|
if (!this.centerCartesian || !this.semiMajor || !this.semiMinor) {
|
const normalized = normalizePoints(inputPoints)
|
const bounds = getBoundsFromLngLats(normalized)
|
const center = getCenterFromBounds(bounds)
|
if (!center) return
|
this.centerCartesian = Cesium.Cartesian3.fromRadians(center.longitude, center.latitude)
|
const eastWest = getMetersBetween(
|
new Cesium.Cartographic(bounds.west, center.latitude),
|
new Cesium.Cartographic(bounds.east, center.latitude)
|
)
|
const northSouth = getMetersBetween(
|
new Cesium.Cartographic(center.longitude, bounds.south),
|
new Cesium.Cartographic(center.longitude, bounds.north)
|
)
|
this.semiMajor = Math.max(1, eastWest / 2)
|
this.semiMinor = Math.max(1, northSouth / 2)
|
}
|
|
this.dataSource = new Cesium.CustomDataSource('edit-ellipse')
|
this.viewer.dataSources.add(this.dataSource)
|
this.createEntities()
|
this.initHandler()
|
}
|
|
initHandler() {
|
this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
|
this.handler.setInputAction(evt => this.handleLeftDown(evt), Cesium.ScreenSpaceEventType.LEFT_DOWN)
|
this.handler.setInputAction(evt => this.handleMouseMove(evt), Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
this.handler.setInputAction(() => this.handleLeftUp(), Cesium.ScreenSpaceEventType.LEFT_UP)
|
this.tooltip.hide()
|
}
|
|
handleLeftDown(evt) {
|
const picked = this.viewer.scene.pick(evt.position)?.id
|
if (!picked) return
|
if (picked.customType === 'ellipse-center') this.dragType = 'center'
|
if (picked.customType === 'ellipse-major') this.dragType = 'major'
|
if (picked.customType === 'ellipse-minor') this.dragType = 'minor'
|
if (this.dragType) this.disableMapControl()
|
}
|
|
handleMouseMove(evt) {
|
if (!this.tooltip?.isVisible) {
|
this.tooltip.show('拖动控制点编辑', evt.endPosition)
|
} else {
|
this.tooltip.show('拖动控制点编辑')
|
this.tooltip.move(evt.endPosition)
|
}
|
if (!this.dragType) return
|
const position = this.getPositionFromScreen(evt.endPosition)
|
if (!position) return
|
|
if (this.dragType === 'center') {
|
this.centerCartesian = position
|
this.updateAxisPoints()
|
return
|
}
|
|
const local = cartesianToLocal(this.centerCartesian, position)
|
if (this.dragType === 'major') {
|
this.semiMajor = Math.max(1, Math.abs(local.x))
|
if (this.semiMajor < this.semiMinor) {
|
this.semiMajor = this.semiMinor
|
}
|
}
|
if (this.dragType === 'minor') {
|
this.semiMinor = Math.max(1, Math.abs(local.y))
|
if (this.semiMinor > this.semiMajor) {
|
this.semiMinor = this.semiMajor
|
}
|
}
|
this.updateAxisPoints()
|
}
|
|
handleLeftUp() {
|
if (!this.dragType) return
|
this.dragType = null
|
this.enableMapControl()
|
const positions = buildEllipsePositions(this.centerCartesian, this.semiMajor, this.semiMinor)
|
this.notify('getPolygonPositions', {
|
positions,
|
meta: {
|
center: this.centerCartesian,
|
majorPoint: this.getAxisPoint(this.semiMajor, 0),
|
minorPoint: this.getAxisPoint(0, this.semiMinor),
|
semiMajor: this.semiMajor,
|
semiMinor: this.semiMinor,
|
},
|
})
|
}
|
|
createEntities() {
|
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,
|
},
|
})
|
|
this.centerEntity = this.dataSource.entities.add({
|
position: new Cesium.CallbackProperty(() => this.centerCartesian, false),
|
point: {
|
pixelSize: 12,
|
color: Cesium.Color.WHITE,
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
},
|
customType: 'ellipse-center',
|
})
|
|
this.majorEntity = this.dataSource.entities.add({
|
position: new Cesium.CallbackProperty(() => this.getAxisPoint(this.semiMajor, 0), false),
|
point: {
|
pixelSize: 10,
|
color: Cesium.Color.fromBytes(255, 255, 255, 200),
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
},
|
customType: 'ellipse-major',
|
})
|
|
this.minorEntity = this.dataSource.entities.add({
|
position: new Cesium.CallbackProperty(() => this.getAxisPoint(0, this.semiMinor), false),
|
point: {
|
pixelSize: 10,
|
color: Cesium.Color.fromBytes(255, 255, 255, 200),
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
},
|
customType: 'ellipse-minor',
|
})
|
}
|
|
updateAxisPoints() {
|
if (!this.majorEntity || !this.minorEntity) return
|
this.majorEntity.position = this.getAxisPoint(this.semiMajor, 0)
|
this.minorEntity.position = this.getAxisPoint(0, this.semiMinor)
|
}
|
|
getPositions() {
|
if (!this.centerCartesian) return []
|
return {
|
positions: buildEllipsePositions(this.centerCartesian, this.semiMajor, this.semiMinor),
|
meta: {
|
center: this.centerCartesian,
|
majorPoint: this.getAxisPoint(this.semiMajor, 0),
|
minorPoint: this.getAxisPoint(0, this.semiMinor),
|
semiMajor: this.semiMajor,
|
semiMinor: this.semiMinor,
|
},
|
}
|
}
|
|
getAxisPoint(eastMeters, northMeters) {
|
const frame = Cesium.Transforms.eastNorthUpToFixedFrame(this.centerCartesian)
|
const local = new Cesium.Cartesian3(eastMeters, northMeters, 0)
|
return Cesium.Matrix4.multiplyByPoint(frame, local, new Cesium.Cartesian3())
|
}
|
|
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
|
}
|
}
|
|
disableMapControl() {
|
const controller = this.viewer.scene.screenSpaceCameraController
|
controller.enableRotate = false
|
controller.enableTranslate = false
|
controller.enableZoom = false
|
}
|
|
enableMapControl() {
|
const controller = this.viewer.scene.screenSpaceCameraController
|
controller.enableRotate = true
|
controller.enableTranslate = true
|
controller.enableZoom = true
|
}
|
|
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_DOWN)
|
this.handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP)
|
this.handler.destroy()
|
this.handler = null
|
}
|
this.tooltip?.destroy()
|
this.tooltip = null
|
this.centerCartesian = null
|
this.semiMajor = 0
|
this.semiMinor = 0
|
this.dragType = null
|
}
|
}
|
