diff --git a/ruoyi-ui/src/views/cesiumMap/index.vue b/ruoyi-ui/src/views/cesiumMap/index.vue index 123c394..48b73c1 100644 --- a/ruoyi-ui/src/views/cesiumMap/index.vue +++ b/ruoyi-ui/src/views/cesiumMap/index.vue @@ -1092,88 +1092,53 @@ export default { }, addRectangleEntity(coordinates) { - this.entityCounter++ - const id = `rectangle_${this.entityCounter}` - - const entity = this.viewer.entities.add({ - id: id, - name: `矩形 ${this.entityCounter}`, - rectangle: { - coordinates: coordinates, - material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color) - .withAlpha(this.defaultStyles.rectangle.opacity), - outline: true, - outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color), - outlineWidth: this.defaultStyles.rectangle.width - } - }) - - const entityData = { - id, - type: 'rectangle', - coordinates: coordinates, - entity: entity, - color: this.defaultStyles.rectangle.color, - opacity: this.defaultStyles.rectangle.opacity, - width: this.defaultStyles.rectangle.width, - label: `矩形 ${this.entityCounter}` - } - - this.allEntities.push(entityData) - - entity.clickHandler = (e) => { - this.selectEntity(entityData) - e.stopPropagation() - } - - return entityData - }, - - addCircleEntity(center, radius, positions) { - this.entityCounter++ - const id = `circle_${this.entityCounter}` - - const entity = this.viewer.entities.add({ - id: id, - name: `圆形 ${this.entityCounter}`, - polygon: { - hierarchy: new Cesium.PolygonHierarchy(positions), - material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color) - .withAlpha(this.defaultStyles.circle.opacity), - outline: true, - outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color), - outlineWidth: this.defaultStyles.circle.width - }, - position: center, - point: { - pixelSize: 5, - color: Cesium.Color.RED - } - }) - - const centerLL = this.cartesianToLatLng(center) - const entityData = { - id, - type: 'circle', - center: centerLL, - radius: radius, - positions: positions, - entity: entity, - color: this.defaultStyles.circle.color, - opacity: this.defaultStyles.circle.opacity, - width: this.defaultStyles.circle.width, - label: `圆形 ${this.entityCounter}` - } - - this.allEntities.push(entityData) + this.entityCounter++ + const id = `rectangle_${this.entityCounter}` + + const entity = this.viewer.entities.add({ + id: id, + name: `矩形 ${this.entityCounter}`, + rectangle: { + coordinates: coordinates, + material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color) + .withAlpha(this.defaultStyles.rectangle.opacity), + outline: true, + outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color), + outlineWidth: this.defaultStyles.rectangle.width + } + }) + + // 【重要修改】直接把 entity 推入数组,修复清除功能的 bug + this.allEntities.push(entity) + + return entity +}, + addCircleEntity(center, radius) { + this.entityCounter++ + const id = `circle_${this.entityCounter}` + + const entity = this.viewer.entities.add({ + id: id, + name: `圆形 ${this.entityCounter}`, + position: center, // 圆心位置 + + // 【优化】使用 ellipse (椭圆) 绘制圆形 + ellipse: { + semiMinorAxis: radius, // 半短轴 = 半径 + semiMajorAxis: radius, // 半长轴 = 半径 + material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color) + .withAlpha(this.defaultStyles.circle.opacity), + outline: true, + outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color), + outlineWidth: this.defaultStyles.circle.width + } + }) - entity.clickHandler = (e) => { - this.selectEntity(entityData) - e.stopPropagation() - } + // 【重要修改】直接把 entity 推入数组 + this.allEntities.push(entity) - return entityData - }, + return entity +}, // ================== 工具方法 ================== @@ -1352,25 +1317,47 @@ export default { }, clearAll() { - // 停止绘制 - this.stopDrawing() - this.drawingMode = null - - // 移除所有实体 - this.allEntities.forEach(entity => { - if (entity.entity) { - this.viewer.entities.remove(entity.entity) + // 1. 检查数组是否有内容 + if (this.allEntities && this.allEntities.length > 0) { + + // 2. 遍历每一个对象进行删除 + this.allEntities.forEach(item => { + try { + // 情况 A: 数组里存的是原生的 Cesium Entity (点、线通常是这种情况) + if (item instanceof Cesium.Entity) { + this.viewer.entities.remove(item); } - }) + // 情况 B: 数组里存的是包装对象 (你的矩形、圆可能是这种 { entity: ... }) + else if (item.entity && item.entity instanceof Cesium.Entity) { + this.viewer.entities.remove(item.entity); + } + // 情况 C: 兜底方案,尝试通过 ID 删除 + else if (item.id) { + this.viewer.entities.removeById(item.id); + } + } catch (e) { + console.warn('删除实体失败:', e); + } + }); + } - // 清空数组 - this.allEntities = [] - this.entityCounter = 0 - this.selectedEntity = null - this.measurementResult = null + // 3. 清空数组 + this.allEntities = []; - console.log('已清除所有图形') - }, + // 4. 清理可能残留的绘制过程中的临时图形 + if (this.tempEntity) { + this.viewer.entities.remove(this.tempEntity); + this.tempEntity = null; + } + if (this.tempPreviewEntity) { + this.viewer.entities.remove(this.tempPreviewEntity); + this.tempPreviewEntity = null; + } + + // 5. 重置其他状态(如测量面板、绘制状态) + this.measurementResult = null; + this.stopDrawing(); +}, // ================== 其他方法 ==================