| | |
| | | */ |
| | | export class DrawPolygon { |
| | | constructor() { |
| | | // 是否绘制 |
| | | this.whetherToDraw =false |
| | | // 图斑预览模式标记 |
| | | this.isPureSpotPreview = false |
| | | // 是否删除测区 |
| | |
| | | this.delPoint = this.delPoint.bind(this) |
| | | // 外部订阅者 |
| | | this.listeners = [] |
| | | |
| | | } |
| | | |
| | | // 实体命名常量 |
| | |
| | | editThePatch(data) { |
| | | this.isPreviewMode = data |
| | | } |
| | | // 绘制 |
| | | drawTheArea(data){ |
| | | this.whetherToDraw = data |
| | | } |
| | | // 删除测区 |
| | | deleteTheArea(data) { |
| | | this.isDeleteTheArea = data |
| | |
| | | |
| | | // 开始绘制 |
| | | startDrawing() { |
| | | if (!this.whetherToDraw) { |
| | | |
| | | return; |
| | | } |
| | | |
| | | |
| | | this.drawingMode = true |
| | | this.curPolygon = new Cesium.PolygonHierarchy() |
| | | |
| | |
| | | ind: pointIndex, // 索引记录 |
| | | }, |
| | | }) |
| | | |
| | | |
| | | } |
| | | // 清除不在范围内的点 |
| | | removeLastInvalidPoint() { |
| | | const posLen = this.curPolygon.positions.length |
| | | if (posLen === 0) return |
| | | |
| | | let targetPointId = '' |
| | | let removeCount = 0 |
| | | |
| | | if (posLen === 2) { |
| | | removeCount = 2 |
| | | targetPointId = `${DrawPolygon.ENTITY_NAMES.POINT_ID_PREFIX}0` |
| | | } else if (posLen > 2) { |
| | | removeCount = 1 |
| | | const pointIndex = posLen - 2 |
| | | targetPointId = `${DrawPolygon.ENTITY_NAMES.POINT_ID_PREFIX}${pointIndex}` |
| | | } |
| | | |
| | | this.curPolygon.positions.splice(posLen - removeCount, removeCount) |
| | | |
| | | const invalidPoint = this.editPolygonPointDataSource.entities.getById(targetPointId) |
| | | if (invalidPoint) { |
| | | this.editPolygonPointDataSource.entities.remove(invalidPoint) |
| | | } |
| | | |
| | | if (this.curPolygon.positions.length === 0 && this.polygonEntity) { |
| | | this.editPolygonDataSource.entities.remove(this.polygonEntity) |
| | | this.polygonEntity = null |
| | | } |
| | | } |
| | | // 添加一个点 |
| | | addPosition(position, isAdd = true) { |
| | | // 第一个点要重复压入一次,形成动态绘制效果 |
| | |
| | | // 编辑模式下,拖拽点实时更新 |
| | | if (this.editingMode && this.draggedEntity?.customData) { |
| | | this.draggedEntity.position = cartesian |
| | | this.curPolygon.positions[this.draggedEntity?.customData.ind] = cartesian |
| | | this.curPolygon.positions[this.draggedEntity?.customData.ind] = cartesian |
| | | } |
| | | |
| | | // 绘制模式下,实时更新最后一个点 |
| | |
| | | // 鼠标左键点击 |
| | | handleLeftClick(click) { |
| | | this.removeMenuPopup() |
| | | |
| | | const pickedAllEntity = this.viewer.scene.drillPick(click.position).filter(i => i.id) |
| | | const isStartPoint = pickedAllEntity.find(i => i.id.name === '起飞点') |
| | | const isPolygonPoint = pickedAllEntity.find(i => i.id.name === DrawPolygon.ENTITY_NAMES.POINT) |
| | | const isPolygon = pickedAllEntity.find(i => i.id.name === DrawPolygon.ENTITY_NAMES.POLYGON) |
| | | |
| | | if (isStartPoint) return |
| | | |
| | | if (this.drawingMode && !this.whetherToDraw) { |
| | | |
| | | return; // 阻断后续绘制逻辑 |
| | | } |
| | | // 如果不是绘制模式 |
| | | if (!this.drawingMode) { |
| | | if (!isPolygon) { |
| | | |
| | | |
| | | this.editingMode = false |
| | | this.editPolygonPointDataSource.entities.show = false |
| | | return |
| | | } |
| | | |
| | | if (isPolygon) { |
| | | |
| | | this.editingMode = true |
| | | this.editPolygonPointDataSource.entities.show = true |
| | | } |
| | |
| | | } |
| | | |
| | | // 鼠标右键点击(弹出菜单) |
| | | handleRightClick(click) { |
| | | handleRightClick(click) { |
| | | const that = this |
| | | if (that.drawingMode) return |
| | | |
| | | that.removeMenuPopup() |
| | | |
| | | const pickedAllEntity = that.viewer.scene.drillPick(click.position).filter(i => i.id) |
| | |
| | | pickedEntity = isPolygon |
| | | tooltipEvent = that.delPolygon |
| | | menuType = 'polygon' |
| | | |
| | | } else if (isEditPoint) { |
| | | pickedEntity = isEditPoint |
| | | tooltipEvent = that.delPoint |
| | | menuType = 'edit-point' |
| | | |
| | | } |
| | | |
| | | if (pickedEntity && this.isDeleteTheArea) { |
| | |
| | | this.notify('getPolygonPositions', []) |
| | | this.startDrawing() |
| | | } |
| | | // 删除图斑 |
| | | delSpot() { |
| | | this.removeEntities() |
| | | this.isPreviewMode = true |
| | | this.startDrawing() |
| | | } |
| | | |
| | | // 删除端点 |
| | | delPoint() { |
| | | if (this.curPolygon.positions.length <= 3) { |
| | |
| | | menuPopup.id = 'planarPolygonEditMenu' |
| | | menuPopup.className = 'planar-polygon-edit-menu' |
| | | |
| | | |
| | | const menuItems = |
| | | type === 'polygon' |
| | | ? [{ title: '删除测区', class: 'del-planar-polygon' }] |
| | |
| | | titleDiv.className = item.class |
| | | menuPopup.appendChild(titleDiv) |
| | | }) |
| | | |
| | | this.isPreviewMode = true |
| | | menuPopupVBox.appendChild(menuPopup) |
| | | return menuPopupVBox |
| | |
| | | // 初始化已有多边形 |
| | | initPolygon(viewer, positions, isPurePreview = false) { |
| | | this.initHandler(viewer) |
| | | this.isPureSpotPreview = isPurePreview |
| | | this.startDrawing() |
| | | |
| | | if (this.whetherToDraw) { |
| | | this.startDrawing(); |
| | | } else { |
| | | // 新增:不允许绘制时,确保绘制模式为 false,避免误触发 |
| | | this.drawingMode = false; |
| | | |
| | | } |
| | | |
| | | let newPosition = positions.map(item => { |
| | | return Cesium.Cartesian3.fromDegrees(Number(item.lng), Number(item.lat), Number(item.height)) |
| | | }) |
| | | // 预览航线的时候调用 |
| | | if (!this.isPureSpotPreview) { |
| | | this.notify('getPolygonPositions', newPosition) |
| | | } |
| | | |
| | | |
| | | newPosition.forEach(item => { |
| | | this.addPosition(item, false) |
| | |
| | | // 初始化事件处理器 |
| | | initHandler(viewer) { |
| | | this.viewer = viewer |
| | | this.startDrawing() |
| | | |
| | | if(this.whetherToDraw){ |
| | | this.startDrawing() |
| | | } |
| | | |
| | | if (!this.handler) { |
| | | this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas) |