| | |
| | | import { ToolBase } from '../ToolBase' |
| | | |
| | | const POINT_ENTITY_NAME = 'edit-polygon-point' |
| | | const MIDPOINT_ENTITY_NAME = 'edit-polygon-midpoint' |
| | | const DEFAULT_STYLE = { |
| | | fill: Cesium.Color.fromBytes(45, 140, 240, 99), |
| | | outline: Cesium.Color.fromBytes(45, 140, 240, 255), |
| | |
| | | |
| | | handleLeftDown(click) { |
| | | const pickedEntity = this.viewer.scene.pick(click.position)?.id |
| | | if (!pickedEntity || pickedEntity.name !== POINT_ENTITY_NAME) return |
| | | if (!pickedEntity) return |
| | | if (pickedEntity.name === MIDPOINT_ENTITY_NAME) { |
| | | const leftIndex = pickedEntity.customData?.leftIndex |
| | | const rightIndex = pickedEntity.customData?.rightIndex |
| | | if (typeof leftIndex !== 'number' || typeof rightIndex !== 'number') return |
| | | const midpoint = this.getMidpointPosition(leftIndex, rightIndex) |
| | | this.positions.splice(rightIndex, 0, midpoint) |
| | | this.rebuildPointEntities() |
| | | this.isDragging = true |
| | | this.draggedIndex = rightIndex |
| | | this.disableMapControl() |
| | | return |
| | | } |
| | | if (pickedEntity.name !== POINT_ENTITY_NAME) return |
| | | const index = pickedEntity.customData?.index |
| | | if (typeof index !== 'number') return |
| | | this.isDragging = true |
| | |
| | | } |
| | | |
| | | handleMouseMove(movement) { |
| | | const tooltipText = '拖动顶点编辑,拖动中点插入新点,右键删除顶点' |
| | | if (!this.tooltip?.isVisible) { |
| | | this.tooltip.show('拖动顶点编辑', movement.endPosition) |
| | | this.tooltip.show(tooltipText, movement.endPosition) |
| | | } else { |
| | | this.tooltip.show('拖动顶点编辑') |
| | | this.tooltip.show(tooltipText) |
| | | this.tooltip.move(movement.endPosition) |
| | | } |
| | | if (!this.isDragging || this.draggedIndex < 0) return |
| | |
| | | rebuildPointEntities() { |
| | | this.dataSource.entities.values |
| | | .slice() |
| | | .filter(entity => entity?.name === POINT_ENTITY_NAME) |
| | | .filter(entity => entity?.name === POINT_ENTITY_NAME || entity?.name === MIDPOINT_ENTITY_NAME) |
| | | .forEach(entity => this.dataSource.entities.remove(entity)) |
| | | |
| | | this.positions.forEach((position, index) => { |
| | |
| | | }, |
| | | }) |
| | | }) |
| | | |
| | | const count = this.positions.length |
| | | if (count < 2) return |
| | | const segmentCount = count === 2 ? 1 : count |
| | | for (let i = 0; i < segmentCount; i += 1) { |
| | | const leftIndex = i |
| | | const rightIndex = i + 1 < count ? i + 1 : 0 |
| | | this.dataSource.entities.add({ |
| | | name: MIDPOINT_ENTITY_NAME, |
| | | position: new Cesium.CallbackProperty(() => this.getMidpointPosition(leftIndex, rightIndex), false), |
| | | point: { |
| | | pixelSize: 8, |
| | | color: Cesium.Color.WHITE.withAlpha(0.6), |
| | | outlineColor: this.style.outline.withAlpha(0.6), |
| | | outlineWidth: 2, |
| | | heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, |
| | | disableDepthTestDistance: Number.POSITIVE_INFINITY, |
| | | }, |
| | | customData: { |
| | | leftIndex, |
| | | rightIndex, |
| | | }, |
| | | }) |
| | | } |
| | | } |
| | | |
| | | getPositions() { |
| | |
| | | return scene.camera.pickEllipsoid(screenPosition, scene.globe.ellipsoid) |
| | | } |
| | | |
| | | getMidpointPosition(leftIndex, rightIndex) { |
| | | const left = this.positions[leftIndex] |
| | | const right = this.positions[rightIndex] |
| | | if (!left || !right) return left || right |
| | | return Cesium.Cartesian3.midpoint(left, right, new Cesium.Cartesian3()) |
| | | } |
| | | |
| | | setStyle(style) { |
| | | this.style = resolveStyle(style) |
| | | if (this.polygonEntity?.polygon) { |