diff --git a/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue b/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue index 65487ff..796c828 100644 --- a/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue +++ b/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue @@ -148,7 +148,7 @@
🖌️ 边框色 - +
@@ -307,7 +307,7 @@ export default { ], presetWidths: [1, 2, 3, 4, 5, 6, 8, 10, 12], presetSizes: [6, 8, 10, 12, 14, 16, 18, 20, 24], - presetOpacities: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0], + presetOpacities: [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0], presetFontSizes: [8, 10, 12, 14, 16, 18, 20, 24, 28, 32] } }, diff --git a/ruoyi-ui/src/views/cesiumMap/MeasurementPanel.vue b/ruoyi-ui/src/views/cesiumMap/MeasurementPanel.vue index d09f8d4..703075d 100644 --- a/ruoyi-ui/src/views/cesiumMap/MeasurementPanel.vue +++ b/ruoyi-ui/src/views/cesiumMap/MeasurementPanel.vue @@ -8,7 +8,7 @@
面积： - {{ result.area.toFixed(2) }} 平方米 + {{ (result.area / 1000000).toFixed(2) }} 平方千米
半径： diff --git a/ruoyi-ui/src/views/cesiumMap/index.vue b/ruoyi-ui/src/views/cesiumMap/index.vue index 15f1d19..84b37cd 100644 --- a/ruoyi-ui/src/views/cesiumMap/index.vue +++ b/ruoyi-ui/src/views/cesiumMap/index.vue @@ -153,10 +153,10 @@ export default { defaultStyles: { point: { color: '#FF0000', size: 12 }, line: { color: '#00FF00', width: 3 }, - polygon: { color: '#0000FF', opacity: 0.5, width: 2 }, - rectangle: { color: '#FFA500', opacity: 0.3, width: 2 }, - circle: { color: '#800080', opacity: 0.4, width: 2 }, - sector: { color: '#FF6347', opacity: 0.5, width: 2 }, + polygon: { color: '#0000FF', opacity: 0, width: 4 }, + rectangle: { color: '#FFA500', opacity: 0, width: 4 }, + circle: { color: '#800080', opacity: 0, width: 4 }, + sector: { color: '#FF6347', opacity: 0, width: 3 }, arrow: { color: '#FF0000', width: 6 }, text: { color: '#000000', font: '48px Microsoft YaHei, PingFang SC, sans-serif', backgroundColor: 'rgba(255, 255, 255, 0.8)' }, image: { width: 150, height: 150 } @@ -197,60 +197,60 @@ export default { methods: { updateScaleFromConfig(config) { if (!config || !this.viewer) return - + const { scaleNumerator, scaleDenominator, unit } = config if (!scaleDenominator || scaleDenominator <= 0) return - + let displayValue = '' let metersPerPixel = 0 - + const standardDPI = 96 const pixelsPerCm = standardDPI * 0.393701 - + const scaleFactor = scaleDenominator / scaleNumerator - + switch (unit) { case 'm': - displayValue = `1:${scaleDenominator}` + displayValue = `${scaleDenominator}` metersPerPixel = scaleFactor / pixelsPerCm break case 'km': - displayValue = `1:${scaleDenominator}` + displayValue = `${scaleDenominator}` metersPerPixel = (scaleFactor * 1000) / pixelsPerCm break default: - displayValue = `1:${scaleDenominator}` + displayValue = `${scaleDenominator}` metersPerPixel = scaleFactor / pixelsPerCm } - + console.log('比例尺设置:', displayValue, '每像素米数:', metersPerPixel.toFixed(4)) - + this.isApplyingScale = true this.useCustomScale = true this.customScaleText = displayValue this.currentScaleUnit = unit - + this.applyScaleToCamera(metersPerPixel) this.updateScaleBar() this.$forceUpdate() - + setTimeout(() => { this.isApplyingScale = false }, 1000) }, - + applyScaleToCamera(metersPerPixel) { if (!this.viewer || !this.viewer.camera) return - + const canvas = this.viewer.scene.canvas const width = canvas.clientWidth const height = canvas.clientHeight - + if (width <= 0 || height <= 0) return - + const camera = this.viewer.camera const scene = this.viewer.scene - + if (scene.mode === Cesium.SceneMode.SCENE2D) { const frustumWidth = width * metersPerPixel camera.frustum.right = frustumWidth / 2 @@ -261,19 +261,19 @@ export default { } else { const cameraPosition = camera.positionCartographic const groundWidth = width * metersPerPixel - + const fov = camera.frustum.fov || Cesium.Math.PI_OVER_THREE const aspectRatio = width / height const verticalFov = fov / aspectRatio - + const targetHeight = (groundWidth / 2) / Math.tan(fov / 2) - + const destination = Cesium.Cartesian3.fromRadians( cameraPosition.longitude, cameraPosition.latitude, targetHeight ) - + camera.flyTo({ destination: destination, duration: 0.5, @@ -1416,8 +1416,8 @@ export default { } return new Cesium.PolygonHierarchy(this.drawingPoints); }, false), - // 使用半透明颜色，方便看到地图底图 - material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color).withAlpha(0.5), + // 不填充颜色 + material: Cesium.Color.TRANSPARENT, // 确保贴地 perPositionHeight: false }, @@ -1431,12 +1431,9 @@ export default { } return this.drawingPoints; }, false), - width: this.defaultStyles.line.width, - // 边框使用虚线，表示正在编辑中 - material: new Cesium.PolylineDashMaterialProperty({ - color: Cesium.Color.fromCssColorString(this.defaultStyles.line.color), - dashLength: 16 - }), + width: this.defaultStyles.polygon.width, + // 边框使用实线，表示正在编辑中 + material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color), clampToGround: true } }); @@ -1504,11 +1501,35 @@ export default { } return Cesium.Rectangle.fromDegrees(0, 0, 0, 0); }, false), - // 样式：半透明填充 + 边框 - material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color).withAlpha(0.5), - outline: true, - outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.line.color), - outlineWidth: 2, + // 设置填充颜色 + material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color).withAlpha(this.defaultStyles.rectangle.opacity), + clampToGround: true // 贴地 + }, + // 边框部分 + polyline: { + // 关键：使用 CallbackProperty 动态计算矩形边框线 + positions: new Cesium.CallbackProperty(() => { + if (this.drawingPoints.length > 0 && this.activeCursorPosition) { + // 计算矩形的四个角点 + const rect = Cesium.Rectangle.fromCartesianArray([this.drawingPoints[0], this.activeCursorPosition]); + const west = rect.west; + const south = rect.south; + const east = rect.east; + const north = rect.north; + + // 创建四个角点的笛卡尔坐标 + const southwest = Cesium.Cartesian3.fromRadians(west, south); + const southeast = Cesium.Cartesian3.fromRadians(east, south); + const northeast = Cesium.Cartesian3.fromRadians(east, north); + const northwest = Cesium.Cartesian3.fromRadians(west, north); + + // 返回闭合的边框线位置数组 + return [southwest, southeast, northeast, northwest, southwest]; + } + return []; + }, false), + width: this.defaultStyles.rectangle.width, + material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color), clampToGround: true // 贴地 } }); @@ -1539,14 +1560,35 @@ export default { // 3. 创建最终显示的静态实体 this.entityCounter++; const id = `rectangle_${this.entityCounter}`; + + // 计算矩形的四个角点 + const west = rect.west; + const south = rect.south; + const east = rect.east; + const north = rect.north; + + // 创建四个角点的笛卡尔坐标 + const southwest = Cesium.Cartesian3.fromRadians(west, south); + const southeast = Cesium.Cartesian3.fromRadians(east, south); + const northeast = Cesium.Cartesian3.fromRadians(east, north); + const northwest = Cesium.Cartesian3.fromRadians(west, north); + + // 创建边框线的位置数组（闭合） + const borderPositions = [southwest, southeast, northeast, northwest, southwest]; + + // 创建一个复合实体，包含填充和边框 const finalEntity = this.viewer.entities.add({ id: id, rectangle: { coordinates: rect, - material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color).withAlpha(this.defaultStyles.polygon.opacity), - outline: true, - outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color), - outlineWidth: this.defaultStyles.polygon.width, + material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color).withAlpha(this.defaultStyles.rectangle.opacity), + clampToGround: true + }, + // 边框部分 + polyline: { + positions: borderPositions, + width: this.defaultStyles.rectangle.width, + material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color), clampToGround: true } }); @@ -1557,9 +1599,10 @@ export default { points: this.drawingPoints.map(p => this.cartesianToLatLng(p)), positions: this.drawingPoints, entity: finalEntity, - color: this.defaultStyles.polygon.color, - opacity: this.defaultStyles.polygon.opacity, - width: this.defaultStyles.polygon.width, + color: this.defaultStyles.rectangle.color, // 填充颜色 + borderColor: this.defaultStyles.rectangle.color, // 边框颜色 + opacity: this.defaultStyles.rectangle.opacity, + width: this.defaultStyles.rectangle.width, label: `矩形 ${this.entityCounter}` }; this.allEntities.push(entityData); @@ -1691,12 +1734,33 @@ export default { return initialRadius; } }, false), - // 样式设置 - material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color).withAlpha(0.5), - outline: true, - outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.line.color), - outlineWidth: 2, - // height: 0, // 如果需要贴地可开启或使用 heightReference + // 设置填充颜色 + material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color).withAlpha(this.defaultStyles.circle.opacity), + // 移除 outline 属性，改用 polyline 绘制边框 + clampToGround: true + }, + // 边框部分 + polyline: { + // 关键：使用 CallbackProperty 动态计算圆形边框线 + positions: new Cesium.CallbackProperty(() => { + try { + if (this.activeCursorPosition && this.drawingPoints.length > 0 && this.drawingPoints[0]) { + const center = this.drawingPoints[0]; + const edge = this.activeCursorPosition; + if (center && edge && typeof center.x === 'number' && typeof edge.x === 'number') { + const radius = Cesium.Cartesian3.distance(center, edge); + const validRadius = isFinite(radius) && radius > 0 ? radius : initialRadius; + return this.generateCirclePositions(center, validRadius); + } + } + return []; + } catch (e) { + return []; + } + }, false), + width: this.defaultStyles.circle.width, + material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color), + clampToGround: true } }); } @@ -1735,16 +1799,27 @@ export default { // 3. 创建最终显示的静态实体 this.entityCounter++; const id = `circle_${this.entityCounter}`; + + // 生成圆形的点，用于绘制边框线 + const circlePositions = this.generateCirclePositions(centerPoint, radius); + + // 创建一个复合实体，包含填充和边框 const finalEntity = this.viewer.entities.add({ id: id, position: centerPoint, ellipse: { semiMajorAxis: radius, semiMinorAxis: radius, - material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color).withAlpha(this.defaultStyles.polygon.opacity), - outline: true, - outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color), - outlineWidth: this.defaultStyles.polygon.width + // 设置填充颜色 + material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color).withAlpha(this.defaultStyles.circle.opacity), + clampToGround: true + }, + // 边框部分 + polyline: { + positions: circlePositions, + width: this.defaultStyles.circle.width, + material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color), + clampToGround: true } }); // 4. 记录实体 @@ -1754,9 +1829,10 @@ export default { points: [centerPoint, edgePosition].map(p => this.cartesianToLatLng(p)), positions: [centerPoint, edgePosition], entity: finalEntity, - color: this.defaultStyles.polygon.color, - opacity: this.defaultStyles.polygon.opacity, - width: this.defaultStyles.polygon.width, + color: this.defaultStyles.circle.color, // 填充颜色 + borderColor: this.defaultStyles.circle.color, // 边框颜色 + opacity: this.defaultStyles.circle.opacity, + width: this.defaultStyles.circle.width, radius: radius, label: `圆形 ${this.entityCounter}` }; @@ -1844,10 +1920,29 @@ export default { } return new Cesium.PolygonHierarchy([]); }, false), - material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color).withAlpha(0.5), - outline: true, - outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color), - outlineWidth: this.defaultStyles.sector.width + // 设置填充颜色 + material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color).withAlpha(this.defaultStyles.sector.opacity), + clampToGround: true + }, + // 边框部分 + polyline: { + positions: new Cesium.CallbackProperty(() => { + if (this.drawingPoints.length > 1 && this.activeCursorPosition) { + const centerPoint = this.drawingPoints[0]; + const radiusPoint = this.drawingPoints[1]; + if (!isFinite(fixedRadius) || fixedRadius === 0) { + return []; + } + const startAngle = this.calculatePointAngle(centerPoint, radiusPoint); + const endAngle = this.calculatePointAngle(centerPoint, this.activeCursorPosition); + const positions = this.generateSectorPositions(centerPoint, fixedRadius, startAngle, endAngle); + return positions; + } + return []; + }, false), + width: this.defaultStyles.sector.width, + material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color), + clampToGround: true } }); } @@ -1883,11 +1978,16 @@ export default { name: `扇形 ${this.entityCounter}`, polygon: { hierarchy: new Cesium.PolygonHierarchy(positions), - material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color).withAlpha(0.5), - outline: true, - outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color), - outlineWidth: this.defaultStyles.sector.width, - perPositionHeight: false + // 设置填充颜色 + material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color).withAlpha(this.defaultStyles.sector.opacity), + clampToGround: true + }, + // 边框部分 + polyline: { + positions: positions, + width: this.defaultStyles.sector.width, + material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color), + clampToGround: true } }); // 4. 记录实体 @@ -1901,7 +2001,8 @@ export default { endAngle: endAngle, positions: positions, entity: finalEntity, - color: this.defaultStyles.sector.color, + color: this.defaultStyles.sector.color, // 填充颜色 + borderColor: this.defaultStyles.sector.color, // 边框颜色 opacity: 0.5, width: this.defaultStyles.sector.width, label: `扇形 ${this.entityCounter}` @@ -1910,6 +2011,35 @@ export default { // 5. 重置状态，保持绘制状态以继续绘制 this.drawingPoints = []; }, + // 生成圆形的点，用于绘制边框线 + generateCirclePositions(center, radius, numPoints = 128) { + const positions = []; + const ellipsoid = this.viewer.scene.globe.ellipsoid; + + // 计算圆心的经纬度 + const centerCartographic = Cesium.Cartographic.fromCartesian(center); + const centerLatitude = centerCartographic.latitude; + const centerLongitude = centerCartographic.longitude; + + // 生成圆形的点 + for (let i = 0; i <= numPoints; i++) { + const angle = (i / numPoints) * Math.PI * 2; + + // 计算点的经纬度 + // 注意：这里使用简单的方法计算，实际应该考虑地球曲率 + const deltaLatitude = (radius / ellipsoid.maximumRadius) * Math.sin(angle); + const deltaLongitude = (radius / ellipsoid.maximumRadius) * Math.cos(angle) / Math.cos(centerLatitude); + + const latitude = centerLatitude + deltaLatitude; + const longitude = centerLongitude + deltaLongitude; + + // 转换为笛卡尔坐标 + const position = Cesium.Cartesian3.fromRadians(longitude, latitude); + positions.push(position); + } + + return positions; + }, // 计算角度 calculateAngle(center, start, end) { const startLL = Cesium.Cartographic.fromCartesian(start); @@ -1959,7 +2089,7 @@ export default { // 确保角度差不为零 angleDiff = Math.max(0.01, angleDiff); // 计算扇形的顶点数（根据角度差确定，确保平滑） - const numPoints = Math.max(5, Math.ceil(angleDiff * 180 / Math.PI / 10)); + const numPoints = Math.max(10, Math.ceil(angleDiff * 180 / Math.PI / 5)); const angleStep = angleDiff / (numPoints - 1); // 生成扇形的顶点（顺时针方向） for (let i = 0; i < numPoints; i++) { @@ -2389,11 +2519,16 @@ export default { name: `面 ${this.entityCounter}`, polygon: { hierarchy: new Cesium.PolygonHierarchy(polygonPositions), - material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color) - .withAlpha(this.defaultStyles.polygon.opacity), - outline: true, - outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color), - outlineWidth: this.defaultStyles.polygon.width + // 初始无填充 + material: Cesium.Color.TRANSPARENT, + clampToGround: true + }, + // 边框部分 + polyline: { + positions: polygonPositions, + width: this.defaultStyles.polygon.width, + material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color), + clampToGround: true } }) const entityData = { @@ -2403,7 +2538,8 @@ export default { positions: polygonPositions, entity: entity, color: this.defaultStyles.polygon.color, - opacity: this.defaultStyles.polygon.opacity, + borderColor: this.defaultStyles.polygon.color, + opacity: 0, width: this.defaultStyles.polygon.width, label: `面 ${this.entityCounter}` } @@ -2422,8 +2558,8 @@ export default { name: `矩形 ${this.entityCounter}`, rectangle: { coordinates: coordinates, - material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color) - .withAlpha(this.defaultStyles.rectangle.opacity), + // 移除填充颜色，只显示边框 + material: Cesium.Color.TRANSPARENT, outline: true, outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color), outlineWidth: this.defaultStyles.rectangle.width @@ -2446,8 +2582,8 @@ export default { ellipse: { semiMinorAxis: validRadius, // 半短轴 = 半径 semiMajorAxis: validRadius, // 半长轴 = 半径 - material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color) - .withAlpha(this.defaultStyles.circle.opacity), + // 移除填充颜色，只显示边框 + material: Cesium.Color.TRANSPARENT, outline: true, outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color), outlineWidth: this.defaultStyles.circle.width @@ -2469,6 +2605,13 @@ export default { lng: Cesium.Math.toDegrees(cartographic.longitude) } }, + degreesToDMS(decimalDegrees) { + const degrees = Math.floor(decimalDegrees) + const minutesDecimal = (decimalDegrees - degrees) * 60 + const minutes = Math.floor(minutesDecimal) + const seconds = ((minutesDecimal - minutes) * 60).toFixed(2) + return `${degrees}°${minutes}'${seconds}"` + }, calculateRectangle(start, end) { const startLL = this.cartesianToLatLng(start) const endLL = this.cartesianToLatLng(end) @@ -2640,29 +2783,37 @@ export default { case 'polygon': if (entity.polygon) { entity.polygon.material = Cesium.Color.fromCssColorString(data.color).withAlpha(data.opacity) - entity.polygon.outlineColor = Cesium.Color.fromCssColorString(data.color) - entity.polygon.outlineWidth = data.width + } + if (entity.polyline) { + entity.polyline.material = Cesium.Color.fromCssColorString(data.borderColor || data.color) + entity.polyline.width = data.width } break case 'rectangle': if (entity.rectangle) { entity.rectangle.material = Cesium.Color.fromCssColorString(data.color).withAlpha(data.opacity) - entity.rectangle.outlineColor = Cesium.Color.fromCssColorString(data.color) - entity.rectangle.outlineWidth = data.width + } + if (entity.polyline) { + entity.polyline.material = Cesium.Color.fromCssColorString(data.borderColor || data.color) + entity.polyline.width = data.width } break case 'circle': if (entity.ellipse) { entity.ellipse.material = Cesium.Color.fromCssColorString(data.color).withAlpha(data.opacity) - entity.ellipse.outlineColor = Cesium.Color.fromCssColorString(data.color) - entity.ellipse.outlineWidth = data.width + } + if (entity.polyline) { + entity.polyline.material = Cesium.Color.fromCssColorString(data.borderColor || data.color) + entity.polyline.width = data.width } break case 'sector': if (entity.polygon) { entity.polygon.material = Cesium.Color.fromCssColorString(data.color).withAlpha(data.opacity) - entity.polygon.outlineColor = Cesium.Color.fromCssColorString(data.color) - entity.polygon.outlineWidth = data.width + } + if (entity.polyline) { + entity.polyline.material = Cesium.Color.fromCssColorString(data.borderColor || data.color) + entity.polyline.width = data.width } break case 'arrow': @@ -2713,6 +2864,10 @@ export default { const entityData = this.contextMenu.entityData // 更新实体数据 entityData[property] = value + // 当修改填充色时，默认设置透明度为 20% + if (property === 'color' && (entityData.type === 'polygon' || entityData.type === 'rectangle' || entityData.type === 'circle' || entityData.type === 'sector')) { + entityData.opacity = 0.2 + } // 更新实体样式 this.updateEntityStyle(entityData) // 隐藏右键菜单 @@ -2750,49 +2905,102 @@ export default { } } }, - clearAll() { - // 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); - } - // 移除线实体相关的点实体 - if (item.type === 'line' && item.pointEntities) { - item.pointEntities.forEach(pointEntity => { - this.viewer.entities.remove(pointEntity); - }); + clearAll(showConfirm = true) { + if (showConfirm) { + this.$confirm('是否清除所有编辑内容？', '提示', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning' + }).then(() => { + this.executeClearAll(); + }).catch(() => { + // 用户点击取消，不做任何操作 + }); + } else { + this.executeClearAll(); + } + }, + executeClearAll() { + // 1. 检查数组是否有内容 + if (this.allEntities && this.allEntities.length > 0) { + // 2. 遍历每一个对象进行删除 + this.allEntities.forEach(item => { + try { + let entity = null; + + // 情况 A: 数组里存的是原生的 Cesium Entity (点、线通常是这种情况) + if (item instanceof Cesium.Entity) { + entity = item; + } + // 情况 B: 数组里存的是包装对象 (你的矩形、圆可能是这种 { entity: ... }) + else if (item.entity && item.entity instanceof Cesium.Entity) { + entity = item.entity; + } + // 情况 C: 兜底方案，尝试通过 ID 删除 + else if (item.id) { + entity = this.viewer.entities.getById(item.id); + } + + // 检查是否是航线实体，如果是则跳过删除 + if (entity && entity.properties) { + const isMissionWaypoint = entity.properties.isMissionWaypoint; + const isMissionRouteLine = entity.properties.isMissionRouteLine; + if (isMissionWaypoint || isMissionRouteLine) { + return; // 跳过航线相关实体 + } + } + + // 删除非航线实体 + if (entity) { + this.viewer.entities.remove(entity); + } + + // 移除线实体相关的点实体 + if (item.type === 'line' && item.pointEntities) { + item.pointEntities.forEach(pointEntity => { + this.viewer.entities.remove(pointEntity); + }); + } + } catch (e) { + console.warn('删除实体失败:', e); } - } catch (e) { - console.warn('删除实体失败:', e); + }); + } + // 3. 清空数组（只保留航线实体） + this.allEntities = this.allEntities.filter(item => { + let entity = null; + if (item instanceof Cesium.Entity) { + entity = item; + } else if (item.entity && item.entity instanceof Cesium.Entity) { + entity = item.entity; + } else if (item.id) { + entity = this.viewer.entities.getById(item.id); + } + + if (entity && entity.properties) { + const isMissionWaypoint = entity.properties.isMissionWaypoint; + const isMissionRouteLine = entity.properties.isMissionRouteLine; + return isMissionWaypoint || isMissionRouteLine; } + return false; + }); + // 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(); + + this.$message({ + type: 'success', + message: '清除成功!' }); - } - // 3. 清空数组 - this.allEntities = []; - // 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(); }, // ================== 其他方法 ================== getTypeName(type) { @@ -3012,7 +3220,7 @@ export default { }, duration: 2 }) - this.$message.success(`已定位到经度 ${lng.toFixed(4)}，纬度 ${lat.toFixed(4)}`) + this.$message.success(`已定位到经度 ${this.degreesToDMS(lng)}，纬度 ${this.degreesToDMS(lat)}`) } }, @@ -3284,7 +3492,7 @@ export default { const cartographic = Cesium.Cartographic.fromCartesian(cartesian) const longitude = Cesium.Math.toDegrees(cartographic.longitude) const latitude = Cesium.Math.toDegrees(cartographic.latitude) - this.coordinatesText = `经度: ${longitude.toFixed(6)}, 纬度: ${latitude.toFixed(6)}` + this.coordinatesText = `经度: ${this.degreesToDMS(longitude)}, 纬度: ${this.degreesToDMS(latitude)}` } else { this.coordinatesText = '经度: --, 纬度: --' } @@ -3292,7 +3500,7 @@ export default { }, destroyViewer() { this.stopDrawing() - this.clearAll() + this.clearAll(false) if (this.pointMovementHandler) { this.pointMovementHandler.destroy() diff --git a/ruoyi-ui/src/views/childRoom/RightPanel.vue b/ruoyi-ui/src/views/childRoom/RightPanel.vue index 3187dc1..17eaaa0 100644 --- a/ruoyi-ui/src/views/childRoom/RightPanel.vue +++ b/ruoyi-ui/src/views/childRoom/RightPanel.vue @@ -375,13 +375,6 @@ export default { if (plan) { this.$emit('select-plan', plan) } - // 仅加载并显示当前新方案的航线 - const planRoutes = this.routes.filter(r => r.scenarioId === planId) - planRoutes.forEach(route => { - if (!this.activeRouteIds.includes(route.id)) { - this.handleSelectRoute(route) - } - }) } }, diff --git a/ruoyi-ui/src/views/childRoom/index.vue b/ruoyi-ui/src/views/childRoom/index.vue index 4370af7..cfd6913 100644 --- a/ruoyi-ui/src/views/childRoom/index.vue +++ b/ruoyi-ui/src/views/childRoom/index.vue @@ -374,13 +374,13 @@ export default { showScaleDialog: false, currentScale: { scaleNumerator: 1, - scaleDenominator: 1000, - unit: 'm' + scaleDenominator: 20, + unit: 'km' }, scaleConfig: { scaleNumerator: 1, - scaleDenominator: 1000, - unit: 'm' + scaleDenominator: 20, + unit: 'km' }, showExternalParamsDialog: false, currentExternalParams: {},