| | |
| | | import * as Cesium from 'cesium' |
| | | import { MapTooltip } from '@ztzf/utils' |
| | | import { ToolBase } from '../ToolBase' |
| | | import { buildEllipsePositions } from '../shapeUtils' |
| | | import { |
| | | buildEllipsePositions, |
| | | formatBufferRadius, |
| | | getBufferRadiusLabelStyle, |
| | | getBufferRadiusPoint, |
| | | } from '../shapeUtils' |
| | | |
| | | export class DrawBufferCircleTool extends ToolBase { |
| | | constructor(viewer) { |
| | |
| | | this.radiusPoint1 = null |
| | | this.radiusPoint2 = null |
| | | this.radiusPoint3 = null |
| | | this.radiusLevel1LabelEntity = null |
| | | this.radiusLevel2LabelEntity = null |
| | | this.radiusLevel3LabelEntity = null |
| | | this.isDrawing = false |
| | | this.drawStep = 0 |
| | | this.isCompleted = false |
| | |
| | | this.handler.setInputAction(movement => this.handleMouseMove(movement), Cesium.ScreenSpaceEventType.MOUSE_MOVE) |
| | | this.drawStep = 0 |
| | | this.isCompleted = false |
| | | this.tooltip.show('单击设置中心点', { x: 0, y: 0 }) |
| | | this.tooltip.hide() |
| | | } |
| | | |
| | | handleLeftClick(click) { |
| | |
| | | |
| | | handleMouseMove(movement) { |
| | | if (this.isCompleted) return |
| | | this.tooltip.move(movement.endPosition) |
| | | const tipText = this.drawStep === 0 |
| | | ? '单击设置中心点' |
| | | : this.drawStep === 1 |
| | | ? '单击设置一级缓冲圆' |
| | | : this.drawStep === 2 |
| | | ? '单击设置二级缓冲圆' |
| | | : '单击设置三级缓冲圆' |
| | | 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 |
| | |
| | | material: Cesium.Color.fromBytes(0, 251, 255, 255), |
| | | }, |
| | | }) |
| | | |
| | | this.radiusLevel1LabelEntity = this.createRadiusLabelEntity(() => this.radiusLevel1) |
| | | this.radiusLevel2LabelEntity = this.createRadiusLabelEntity(() => this.radiusLevel2) |
| | | this.radiusLevel3LabelEntity = this.createRadiusLabelEntity(() => this.radiusLevel3) |
| | | } |
| | | |
| | | clearPreviewEntities() { |
| | |
| | | this.circleLevel1OutlineEntity = null |
| | | this.circleLevel2OutlineEntity = null |
| | | this.circleLevel3OutlineEntity = null |
| | | this.radiusLevel1LabelEntity = null |
| | | this.radiusLevel2LabelEntity = null |
| | | this.radiusLevel3LabelEntity = null |
| | | } |
| | | |
| | | getSurfaceDistance(startCartesian, endCartesian) { |
| | |
| | | |
| | | getPositionFromScreen(screenPosition) { |
| | | const scene = this.viewer.scene |
| | | const cartesian = scene.pickPosition(screenPosition) |
| | | const ray = scene.camera.getPickRay(screenPosition) |
| | | const cartesian = ray ? scene.globe.pick(ray, scene) : null |
| | | if (cartesian) return cartesian |
| | | return scene.camera.pickEllipsoid(screenPosition, scene.globe.ellipsoid) |
| | | } |
| | | |
| | | getRadiusPoint(radius) { |
| | | return getBufferRadiusPoint(this.centerCartesian, radius) |
| | | } |
| | | |
| | | createRadiusLabelEntity(getRadius) { |
| | | return this.dataSource.entities.add({ |
| | | position: new Cesium.CallbackProperty( |
| | | () => getBufferRadiusPoint(this.centerCartesian, getRadius()), |
| | | false |
| | | ), |
| | | label: { |
| | | ...getBufferRadiusLabelStyle(), |
| | | text: new Cesium.CallbackProperty(() => formatBufferRadius(getRadius()), false), |
| | | }, |
| | | }) |
| | | } |
| | | |
| | | destroy() { |
| | |
| | | this.radiusPoint1 = null |
| | | this.radiusPoint2 = null |
| | | this.radiusPoint3 = null |
| | | this.radiusLevel1LabelEntity = null |
| | | this.radiusLevel2LabelEntity = null |
| | | this.radiusLevel3LabelEntity = null |
| | | this.isDrawing = false |
| | | this.drawStep = 0 |
| | | this.isCompleted = false |