import * as Cesium from 'cesium'
|
import { MapTooltip } from '@ztzf/utils'
|
import { ToolBase } from '../ToolBase'
|
|
const POINT_ENTITY_NAME = 'draw-polygon-point'
|
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 DrawPolygonTool extends ToolBase {
|
constructor(viewer, options = {}) {
|
super(viewer)
|
this.tooltip = new MapTooltip(viewer)
|
this.dataSource = null
|
this.polygonEntity = null
|
this.polylineEntity = null
|
this.positions = []
|
this.floatPosition = null
|
this.isDrawing = false
|
this.lastMousePosition = null
|
this.style = resolveStyle(options?.style)
|
}
|
|
start() {
|
this.dataSource = new Cesium.CustomDataSource('draw-polygon')
|
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(click => this.handleRightClick(click), Cesium.ScreenSpaceEventType.RIGHT_CLICK)
|
this.handler.setInputAction(movement => this.handleMouseMove(movement), Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
this.isDrawing = true
|
this.tooltip.hide()
|
}
|
|
handleLeftClick(click) {
|
if (!this.isDrawing) return
|
|
const pickedEntity = this.viewer.scene.pick(click.position)?.id
|
if (this.isFinishTrigger(pickedEntity)) {
|
this.finishDrawing()
|
return
|
}
|
if (pickedEntity?.name === POINT_ENTITY_NAME) return
|
|
const position = this.getPositionFromScreen(click.position)
|
if (!position) return
|
|
this.addPoint(position)
|
this.tooltip.show(this.getTipText(), click.position)
|
}
|
|
handleRightClick(click) {
|
if (!this.isDrawing) return
|
const pickedEntity = this.viewer.scene.pick(click.position)?.id
|
if (!pickedEntity || pickedEntity.name !== POINT_ENTITY_NAME) return
|
const index = pickedEntity.customData?.index
|
if (typeof index !== 'number') return
|
this.removePoint(index)
|
this.tooltip.show(this.getTipText(), click.position)
|
}
|
|
handleMouseMove(movement) {
|
if (!this.isDrawing) return
|
this.tooltip.show(this.getTipText(), movement.endPosition)
|
if (this.positions.length === 0) return
|
const position = this.getPositionFromScreen(movement.endPosition)
|
if (!position) return
|
this.lastMousePosition = position
|
this.floatPosition = position
|
}
|
|
getTipText() {
|
const count = this.positions.length
|
if (count === 0) {
|
return '单击增加点'
|
}
|
if (count < 3) {
|
return '单击增加点，右击删除点'
|
}
|
return '单击增加点，右击删除点，双击结束绘制'
|
}
|
|
isFinishTrigger(pickedEntity) {
|
if (!pickedEntity || pickedEntity.name !== POINT_ENTITY_NAME) return false
|
if (this.positions.length < 3) return false
|
const index = pickedEntity.customData?.index
|
return index === this.positions.length - 1
|
}
|
|
addPoint(position) {
|
this.positions.push(position)
|
if (!this.polygonEntity) {
|
this.createEntities()
|
}
|
this.rebuildPointEntities()
|
}
|
|
removePoint(index) {
|
if (index < 0 || index >= this.positions.length) return
|
this.positions.splice(index, 1)
|
this.rebuildPointEntities()
|
if (this.positions.length === 0) {
|
this.floatPosition = null
|
this.lastMousePosition = null
|
return
|
}
|
if (this.lastMousePosition) {
|
this.floatPosition = this.lastMousePosition
|
} else {
|
this.floatPosition = this.positions[this.positions.length - 1]
|
}
|
}
|
|
createEntities() {
|
const getPreviewPositions = () => {
|
if (this.positions.length === 0) return []
|
if (!this.isDrawing || !this.floatPosition) return this.positions
|
return [...this.positions, this.floatPosition]
|
}
|
|
this.polygonEntity = this.dataSource.entities.add({
|
polygon: {
|
hierarchy: new Cesium.CallbackProperty(() => new Cesium.PolygonHierarchy(getPreviewPositions()), false),
|
material: this.style.fill,
|
outline: false,
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
show: new Cesium.CallbackProperty(() => getPreviewPositions().length >= 3, false),
|
},
|
})
|
|
this.polylineEntity = this.dataSource.entities.add({
|
polyline: {
|
positions: new Cesium.CallbackProperty(() => {
|
const positions = getPreviewPositions()
|
if (positions.length < 2) return positions
|
if (positions.length >= 3) {
|
return [...positions, positions[0]]
|
}
|
return positions
|
}, false),
|
clampToGround: true,
|
width: 2,
|
material: this.style.outline,
|
show: new Cesium.CallbackProperty(() => getPreviewPositions().length >= 2, false),
|
},
|
})
|
}
|
|
rebuildPointEntities() {
|
this.dataSource.entities.values
|
.slice()
|
.filter(entity => entity?.name === POINT_ENTITY_NAME)
|
.forEach(entity => this.dataSource.entities.remove(entity))
|
|
this.positions.forEach((position, index) => {
|
this.dataSource.entities.add({
|
name: POINT_ENTITY_NAME,
|
position: position.clone ? position.clone() : position,
|
point: {
|
pixelSize: 12,
|
color: Cesium.Color.WHITE,
|
outlineColor: this.style.outline,
|
outlineWidth: 2,
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
},
|
customData: {
|
index,
|
},
|
})
|
})
|
}
|
|
finishDrawing() {
|
if (this.positions.length < 3) return
|
this.isDrawing = false
|
this.floatPosition = null
|
this.notify('getPolygonPositions', this.positions)
|
this.tooltip.hide()
|
this.clearPreviewEntities()
|
}
|
|
setStyle(style) {
|
this.style = resolveStyle(style)
|
if (this.polygonEntity?.polygon) {
|
this.polygonEntity.polygon.material = this.style.fill
|
}
|
if (this.polylineEntity?.polyline) {
|
this.polylineEntity.polyline.material = this.style.outline
|
}
|
if (this.dataSource) {
|
this.dataSource.entities.values
|
.filter(entity => entity?.name === POINT_ENTITY_NAME)
|
.forEach(entity => {
|
if (entity?.point) {
|
entity.point.outlineColor = this.style.outline
|
}
|
})
|
}
|
}
|
|
clearPreviewEntities() {
|
if (!this.dataSource) return
|
this.dataSource.entities.removeAll()
|
this.polygonEntity = null
|
this.polylineEntity = 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)
|
}
|
|
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.RIGHT_CLICK)
|
this.handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
this.handler.destroy()
|
this.handler = null
|
}
|
this.tooltip?.destroy()
|
this.tooltip = null
|
this.positions = []
|
this.floatPosition = null
|
this.isDrawing = false
|
this.lastMousePosition = null
|
}
|
}
|
