Browse Source

清空功能,测距功能

lbj
sd 2 months ago
parent
commit
48351c3ce0
  1. 1
      ruoyi-ui/src/views/cesiumMap/HoverTooltip.vue
  2. 2
      ruoyi-ui/src/views/cesiumMap/MeasurementPanel.vue
  3. 164
      ruoyi-ui/src/views/cesiumMap/index.vue
  4. 7
      ruoyi-ui/src/views/childRoom/RightPanel.vue

1
ruoyi-ui/src/views/cesiumMap/HoverTooltip.vue

@ -3,7 +3,6 @@
<div class="tooltip-content">
{{ content }}
</div>
<span>删除</span>
</div>
</template>
<!-- 111 -->

2
ruoyi-ui/src/views/cesiumMap/MeasurementPanel.vue

@ -8,7 +8,7 @@
</div>
<div class="measurement-item" v-if="result.area">
<span>面积</span>
<strong>{{ result.area.toFixed(2) }} 平方米</strong>
<strong>{{ (result.area / 1000000).toFixed(2) }} 平方</strong>
</div>
<div class="measurement-item" v-if="result.radius">
<span>半径</span>

164
ruoyi-ui/src/views/cesiumMap/index.vue

@ -153,9 +153,9 @@ export default {
defaultStyles: {
point: { color: '#FF0000', size: 12 },
line: { color: '#00FF00', width: 3 },
polygon: { color: '#0000FF', opacity: 0, width: 3 },
rectangle: { color: '#FFA500', opacity: 0, width: 3 },
circle: { color: '#800080', opacity: 0, width: 3 },
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)' },
@ -211,15 +211,15 @@ export default {
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
}
@ -812,7 +812,7 @@ export default {
//
this.hoverTooltip = {
visible: true,
content: `长度:${length.toFixed(2)}\n${bearingType === 'magnetic' ? '磁方位' : '真方位'}${bearing.toFixed(2)}°`,
content: `${(length / 1000).toFixed(1)}km ,${bearingType === 'magnetic' ? '磁' : '真'}${bearing.toFixed(1)}°`,
position: {
x: movement.endPosition.x + 10,
y: movement.endPosition.y - 10
@ -1857,7 +1857,7 @@ export default {
this.drawingPoints = [];
},
// 线
generateCirclePositions(center, radius, numPoints = 64) {
generateCirclePositions(center, radius, numPoints = 128) {
const positions = [];
const ellipsoid = this.viewer.scene.globe.ellipsoid;
@ -1934,7 +1934,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++) {
@ -2452,6 +2452,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)
@ -2745,49 +2752,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) {
@ -3007,7 +3067,7 @@ export default {
},
duration: 2
})
this.$message.success(`已定位到经度 ${lng.toFixed(4)},纬度 ${lat.toFixed(4)}`)
this.$message.success(`已定位到经度 ${this.degreesToDMS(lng)},纬度 ${this.degreesToDMS(lat)}`)
}
},
@ -3279,7 +3339,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 = '经度: --, 纬度: --'
}
@ -3287,7 +3347,7 @@ export default {
},
destroyViewer() {
this.stopDrawing()
this.clearAll()
this.clearAll(false)
if (this.pointMovementHandler) {
this.pointMovementHandler.destroy()

7
ruoyi-ui/src/views/childRoom/RightPanel.vue

@ -359,13 +359,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)
}
})
}
},

Loading…
Cancel
Save