woka
/
cesium-map-object
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

redis存储

mh
ctw 1 month ago
parent
9edef2f215
commit
516fd08b0a
3 changed files with 284 additions and 111 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 22
      ruoyi-system/src/main/java/com/ruoyi/system/domain/dto/PlatformStyleDTO.java
  2. 299
      ruoyi-ui/src/views/cesiumMap/index.vue
  3. 74
      ruoyi-ui/src/views/childRoom/index.vue

22
ruoyi-system/src/main/java/com/ruoyi/system/domain/dto/PlatformStyleDTO.java
View File

@ -27,6 +27,12 @@ public class PlatformStyleDTO implements Serializable {
/** 平台颜色 */
private String platformColor;
/** 威力区半径（千米） */
private Double powerZoneRadius;
/** 威力区填充颜色 */
private String powerZoneColor;
public String getRoomId() {
return roomId;
}
@ -90,4 +96,20 @@ public class PlatformStyleDTO implements Serializable {
public void setPlatformColor(String platformColor) {
this.platformColor = platformColor;
}
public Double getPowerZoneRadius() {
return powerZoneRadius;
}
public void setPowerZoneRadius(Double powerZoneRadius) {
this.powerZoneRadius = powerZoneRadius;
}
public String getPowerZoneColor() {
return powerZoneColor;
}
public void setPowerZoneColor(String powerZoneColor) {
this.powerZoneColor = powerZoneColor;
}
}

299
ruoyi-ui/src/views/cesiumMap/index.vue
View File

@ -92,7 +92,11 @@
/>
</el-form-item>
<el-form-item label="字体颜色">
<el-color-picker v-model="editPlatformForm.fontColor" size="small" />
<el-color-picker
v-model="editPlatformForm.fontColor"
size="small"
:predefine="presetColors"
/>
</el-form-item>
<el-divider content-position="left">平台设置</el-divider>
@ -106,7 +110,11 @@
/>
</el-form-item>
<el-form-item label="平台颜色">
<el-color-picker v-model="editPlatformForm.iconColor" size="small" />
<el-color-picker
v-model="editPlatformForm.iconColor"
size="small"
:predefine="presetColors"
/>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
@ -214,30 +222,7 @@ export default {
default: () => ({})
}
},
watch: {
drawDomClick: {
immediate: true, // 组件初始化时立即执行一次
handler(newVal, oldVal) {
// 可选：如果需要在值变化时执行额外逻辑（比如初始化地图）
if (newVal) {
// this.initMap()
}
}
},
scaleConfig: {
deep: true,
handler(newVal) {
if (newVal) {
this.updateScaleFromConfig(newVal)
}
}
},
coordinateFormat: {
handler(newVal) {
this.updateCoordinatesDisplay()
}
}
},
data() {
return {
viewer: null,
@ -287,6 +272,13 @@ export default {
iconSize: 144,
iconColor: '#ffffff'
},
// 编辑平台属性：字体颜色、平台颜色预选
presetColors: [
'#000000', '#333333', '#666666', '#999999', '#FFFFFF',
'#FF0000', '#FF6600', '#FFA500', '#FFFF00', '#00FF00',
'#00FFFF', '#0066FF', '#0000FF', '#6600FF', '#FF00FF',
'#800080', '#FF69B4', '#A52A2A', '#228B22'
],
powerZoneDialogVisible: false,
powerZoneForm: {
routeId: null,
@ -379,6 +371,28 @@ export default {
watch: {
// 监听 routeLabelVisible 的变化，当航线显示状态改变时，重新应用样式
// 这样当从隐藏切换为显示时，可以确保样式被正确应用
drawDomClick: {
immediate: true, // 组件初始化时立即执行一次
handler(newVal, oldVal) {
// 可选：如果需要在值变化时执行额外逻辑（比如初始化地图）
if (newVal) {
// this.initMap()
}
}
},
scaleConfig: {
deep: true,
handler(newVal) {
if (newVal) {
this.updateScaleFromConfig(newVal)
}
}
},
coordinateFormat: {
handler(newVal) {
this.updateCoordinatesDisplay()
}
},
routeLabelVisible: {
handler(newVal) {
// 使用 debounce 或 setTimeout 避免频繁调用
@ -394,7 +408,7 @@ export default {
if (this.applyStylesTimer) clearTimeout(this.applyStylesTimer);
this.applyStylesTimer = setTimeout(() => {
this.applyRedisPlatformStyles();
}, 500);
}, 80);
}
},
mounted() {
@ -1637,55 +1651,87 @@ export default {
if (iconUrl && originalPositions.length > 0) {
const platformBillboardId = `route-platform-${routeId}`;
const fullUrl = this.formatPlatformIconUrl(iconUrl);
const platId = (platform && platform.id) || 0;
let initialRotation;
const pathData = this.getRoutePathWithSegmentIndices(waypoints);
if (pathData.path && pathData.path.length >= 2) {
const heading = this.computeHeadingFromPositions(pathData.path[0], pathData.path[1]);
if (heading !== undefined) initialRotation = Math.PI / 2 - heading;
}
this.viewer.entities.add({
id: platformBillboardId,
name: (platform && platform.name) || '平台',
position: originalPositions[0],
properties: {
routeId: routeId,
platformId: (platform && platform.id) || 0
},
billboard: {
image: fullUrl,
width: 144,
height: 144,
color: Cesium.Color.BLACK, // 航线飞机默认黑色，可通过编辑飞机颜色功能修改
verticalOrigin: Cesium.VerticalOrigin.CENTER,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
scaleByDistance: new Cesium.NearFarScalar(500, 2.0, 200000, 0.4),
translucencyByDistance: new Cesium.NearFarScalar(1000, 1.0, 500000, 0.6),
...(initialRotation !== undefined && { rotation: initialRotation })
}
});
// 异步加载并处理图片为白色，以便支持后续染色
this.loadAndWhitenImage(fullUrl).then(whiteImage => {
const target = this.viewer.entities.getById(platformBillboardId);
if (target && target.billboard) {
target.billboard.image = whiteImage;
// 此时 target.billboard.color 已在创建时设为 BLACK（航线飞机默认黑色），染色后显示为黑色图标
// 如果在图片处理期间已经加载了自定义样式（Redis），需要重新应用一次颜色否则这里会保持默认黑色，覆盖掉 applyRedisPlatformStyles 的效果（如果它先执行了）
const currentRoomId = this.$route.query.roomId || (this.$parent && this.$parent.currentRoomId);
const cachedStyle = this.platformCustomStyles && this.platformCustomStyles[routeId];
if (this.platformCustomStyles && this.platformCustomStyles[routeId]) {
const style = this.platformCustomStyles[routeId];
if (style.platformColor) {
target.billboard.color = Cesium.Color.fromCssColorString(style.platformColor);
}
const addPlatformBillboard = (initialColor, initialSize) => {
this.viewer.entities.add({
id: platformBillboardId,
name: (platform && platform.name) || '平台',
position: originalPositions[0],
properties: {
routeId: routeId,
platformId: platId
},
billboard: {
image: fullUrl,
width: initialSize,
height: initialSize,
color: Cesium.Color.fromCssColorString(initialColor),
verticalOrigin: Cesium.VerticalOrigin.CENTER,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
scaleByDistance: new Cesium.NearFarScalar(500, 2.0, 200000, 0.4),
translucencyByDistance: new Cesium.NearFarScalar(1000, 1.0, 500000, 0.6),
...(initialRotation !== undefined && { rotation: initialRotation })
}
});
// 触发一次渲染刷新
if (this.viewer.scene.requestRenderMode) {
this.viewer.scene.requestRender();
this.loadAndWhitenImage(fullUrl).then(whiteImage => {
const target = this.viewer.entities.getById(platformBillboardId);
if (target && target.billboard) {
target.billboard.image = whiteImage;
if (this.platformCustomStyles && this.platformCustomStyles[routeId] && this.platformCustomStyles[routeId].platformColor) {
target.billboard.color = Cesium.Color.fromCssColorString(this.platformCustomStyles[routeId].platformColor);
}
if (this.viewer.scene.requestRenderMode) {
this.viewer.scene.requestRender();
}
}
});
};
if (cachedStyle && cachedStyle.platformColor != null) {
const size = (cachedStyle.platformSize != null) ? Math.max(48, Math.min(256, Number(cachedStyle.platformSize))) : 144;
addPlatformBillboard(cachedStyle.platformColor, size);
if (cachedStyle.powerZoneRadius != null && Number(cachedStyle.powerZoneRadius) > 0) {
this.$nextTick(() => {
this.ensurePowerZoneForRoute(routeId, cachedStyle.powerZoneRadius, cachedStyle.powerZoneColor || 'rgba(255, 0, 0, 0.3)');
});
}
});
} else if (currentRoomId && Number(platId) > 0) {
getPlatformStyle({
roomId: currentRoomId,
routeId: routeId,
platformId: platId
}).then(res => {
const style = res.data;
const color = (style && style.platformColor) ? style.platformColor : '#ffffff';
const size = (style && style.platformSize != null) ? Math.max(48, Math.min(256, Number(style.platformSize))) : 144;
this.$set(this.platformCustomStyles, routeId, {
labelFontSize: style && style.labelFontSize,
labelFontColor: style && style.labelFontColor,
platformSize: size,
platformColor: color,
powerZoneRadius: style && style.powerZoneRadius,
powerZoneColor: style && style.powerZoneColor
});
addPlatformBillboard(color, size);
if (style && style.powerZoneRadius != null && Number(style.powerZoneRadius) > 0) {
this.ensurePowerZoneForRoute(routeId, style.powerZoneRadius, style.powerZoneColor || 'rgba(255, 0, 0, 0.3)');
}
}).catch(() => {
addPlatformBillboard('#ffffff', 144);
});
} else {
addPlatformBillboard('#ffffff', 144);
}
// 飞机标牌：显示名字、高度、速度、航向，随飞机实时运动
const firstWp = waypoints[0];
@ -5498,36 +5544,28 @@ export default {
this.contextMenu.visible = false
return
}
// 重置表单，保留上次的 routeId（半径单位为千米）
const routeId = ed.routeId
const cached = this.platformCustomStyles && this.platformCustomStyles[routeId]
this.powerZoneForm = {
routeId: ed.routeId,
radius: 10,
color: 'rgba(255, 0, 0, 0.3)'
routeId,
radius: (cached && cached.powerZoneRadius != null) ? Number(cached.powerZoneRadius) : 10,
color: (cached && cached.powerZoneColor) ? cached.powerZoneColor : 'rgba(255, 0, 0, 0.3)'
}
this.contextMenu.visible = false
this.powerZoneDialogVisible = true
},
/** 应用威力区：以当前平台位置为中心画圆 */
applyPowerZone() {
const routeId = this.powerZoneForm.routeId
if (!routeId || !this.viewer) {
this.powerZoneDialogVisible = false
return
}
/**
* 以平台位置为中心绘制威力区圆（供 applyPowerZone 与 applyRedisPlatformStyles 复用）
*/
ensurePowerZoneForRoute(routeId, radiusKm, color) {
if (!routeId || !this.viewer) return
const platformEntity = this.viewer.entities.getById(`route-platform-${routeId}`)
if (!platformEntity) {
this.$message.error('未找到对应平台，无法添加威力区')
this.powerZoneDialogVisible = false
return
}
// 移除旧的威力区（如果存在）
if (!platformEntity) return
const oldZoneId = `power-zone-${routeId}`
this.viewer.entities.removeById(oldZoneId)
// 添加新威力区
// 使用 CallbackProperty 绑定位置，使其随飞机移动
const radius = Number(radiusKm) || 10
const fillColor = color || 'rgba(255, 0, 0, 0.3)'
this.viewer.entities.add({
id: oldZoneId,
position: new Cesium.CallbackProperty(() => {
@ -5535,20 +5573,67 @@ export default {
return platformEntity.position.getValue(now)
}, false),
ellipse: {
semiMinorAxis: this.powerZoneForm.radius * 1000,
semiMajorAxis: this.powerZoneForm.radius * 1000,
material: Cesium.Color.fromCssColorString(this.powerZoneForm.color),
semiMinorAxis: radius * 1000,
semiMajorAxis: radius * 1000,
material: Cesium.Color.fromCssColorString(fillColor),
outline: true,
outlineColor: Cesium.Color.fromCssColorString(this.powerZoneForm.color).withAlpha(1.0),
outlineColor: Cesium.Color.fromCssColorString(fillColor).withAlpha(1.0),
outlineWidth: 2
}
})
if (this.viewer.scene.requestRenderMode) {
this.viewer.scene.requestRender()
}
this.powerZoneDialogVisible = false
this.$message.success(`已添加半径 ${this.powerZoneForm.radius} 千米的威力区`)
},
/** 应用威力区：以当前平台位置为中心画圆，并保存到 Redis */
applyPowerZone() {
const routeId = this.powerZoneForm.routeId
if (!routeId || !this.viewer) {
this.powerZoneDialogVisible = false
return
}
const platformEntity = this.viewer.entities.getById(`route-platform-${routeId}`)
if (!platformEntity) {
this.$message.error('未找到对应平台，无法添加威力区')
this.powerZoneDialogVisible = false
return
}
const currentRoomId = this.$route.query.roomId || (this.$parent && this.$parent.currentRoomId)
let platformId = 0
if (platformEntity.properties && platformEntity.properties.platformId) {
const now = Cesium.JulianDate.now()
platformId = platformEntity.properties.platformId.getValue ? platformEntity.properties.platformId.getValue(now) : platformEntity.properties.platformId
}
const radius = this.powerZoneForm.radius
const color = this.powerZoneForm.color
const doDrawAndClose = () => {
this.ensurePowerZoneForRoute(routeId, radius, color)
this.powerZoneDialogVisible = false
this.$message.success(`已添加半径 ${radius} 千米的威力区`)
}
if (currentRoomId && Number(platformId) > 0) {
getPlatformStyle({ roomId: currentRoomId, routeId, platformId }).then(res => {
const existing = res.data || {}
const styleData = {
roomId: String(currentRoomId),
routeId,
platformId,
platformName: existing.platformName || undefined,
labelFontSize: existing.labelFontSize,
labelFontColor: existing.labelFontColor,
platformSize: existing.platformSize,
platformColor: existing.platformColor,
powerZoneRadius: radius,
powerZoneColor: color
}
savePlatformStyle(styleData).then(doDrawAndClose).catch(() => doDrawAndClose())
}).catch(() => doDrawAndClose())
} else {
doDrawAndClose()
}
},
// 从右键菜单删除实体
deleteEntityFromContextMenu() {
@ -5565,6 +5650,23 @@ export default {
},
/**
* 由父组件在渲染航线前调用，预先写入平台样式，使 renderRouteWaypoints 创建实体时可直接用该颜色（无延迟）
* @param {string} routeId - 航线 id
* @param {Object} style - { labelFontSize, labelFontColor, platformSize, platformColor, powerZoneRadius, powerZoneColor }
*/
setPlatformStyle(routeId, style) {
if (!routeId || !style) return;
this.$set(this.platformCustomStyles, routeId, {
labelFontSize: style.labelFontSize,
labelFontColor: style.labelFontColor,
platformSize: style.platformSize != null ? style.platformSize : 144,
platformColor: style.platformColor != null ? style.platformColor : '#ffffff',
powerZoneRadius: style.powerZoneRadius,
powerZoneColor: style.powerZoneColor
});
},
/**
* 批量获取并应用航线平台样式（Redis）
* 遍历 allEntities 中的所有航线平台，调用 getPlatformStyle
*/
@ -5597,12 +5699,14 @@ export default {
if (res.data) {
const style = res.data;
// 缓存样式
// 缓存样式（含威力区）
this.$set(this.platformCustomStyles, routeId, {
labelFontSize: style.labelFontSize,
labelFontColor: style.labelFontColor,
platformSize: style.platformSize,
platformColor: style.platformColor
platformColor: style.platformColor,
powerZoneRadius: style.powerZoneRadius,
powerZoneColor: style.powerZoneColor
});
// 应用标牌样式
@ -5631,6 +5735,11 @@ export default {
entity.billboard.color = Cesium.Color.fromCssColorString(color);
}
// 应用威力区（半径与颜色从 Redis 读出）
if (style.powerZoneRadius != null && style.powerZoneRadius > 0) {
this.ensurePowerZoneForRoute(routeId, style.powerZoneRadius, style.powerZoneColor || 'rgba(255, 0, 0, 0.3)');
}
if (this.viewer.scene.requestRenderMode) {
this.viewer.scene.requestRender();
}

74
ruoyi-ui/src/views/childRoom/index.vue
View File

@ -422,7 +422,7 @@ import RightPanel from './RightPanel'
import BottomLeftPanel from './BottomLeftPanel'
import TopHeader from './TopHeader'
import { listScenario, addScenario, delScenario } from "@/api/system/scenario";
import { listRoutes, getRoutes, addRoutes, updateRoutes, delRoutes } from "@/api/system/routes";
import { listRoutes, getRoutes, addRoutes, updateRoutes, delRoutes, getPlatformStyle } from "@/api/system/routes";
import { updateWaypoints, addWaypoints, delWaypoints } from "@/api/system/waypoints";
import { listLib,addLib,delLib} from "@/api/system/lib";
import { getRooms, updateRooms } from "@/api/system/rooms";
@ -893,8 +893,14 @@ export default {
if (i !== -1) this.selectedRouteDetails.waypoints.splice(i, 1, merged);
}
if (this.$refs.cesiumMap) {
// 平台信息来自 list 的 route（selectedRouteDetails 来自 getRoutes 可能不含 platformId/platform）
const routeForPlatform = this.routes.find(r => r.id === routeId) || route;
const roomId = this.currentRoomId;
if (roomId && routeForPlatform.platformId) {
try {
const styleRes = await getPlatformStyle({ roomId, routeId, platformId: routeForPlatform.platformId });
if (styleRes.data) this.$refs.cesiumMap.setPlatformStyle(routeId, styleRes.data);
} catch (_) {}
}
this.$refs.cesiumMap.renderRouteWaypoints(
waypoints,
routeId,
@ -1059,6 +1065,13 @@ export default {
if (this.$refs.cesiumMap && this.activeRouteIds.includes(updatedRoute.id)) {
const route = this.routes.find(r => r.id === updatedRoute.id);
if (route && route.waypoints && route.waypoints.length > 0) {
const roomId = this.currentRoomId;
if (roomId && route.platformId) {
try {
const styleRes = await getPlatformStyle({ roomId, routeId: updatedRoute.id, platformId: route.platformId });
if (styleRes.data) this.$refs.cesiumMap.setPlatformStyle(updatedRoute.id, styleRes.data);
} catch (_) {}
}
this.$refs.cesiumMap.removeRouteById(updatedRoute.id);
this.$refs.cesiumMap.renderRouteWaypoints(route.waypoints, updatedRoute.id, route.platformId, route.platform, routeStyle);
// 切换平台后按当前推演时间把图标更新到对应位置，避免图标回到起点
@ -1159,17 +1172,25 @@ export default {
});
this.routes = allRoutes;
// 直接根据 activeRouteIds 同步地图即可
if (this.activeRouteIds.length > 0) {
// 先预取所有展示中航线的平台样式，再渲染，避免平台图标先黑后变色
if (this.activeRouteIds.length > 0 && this.$refs.cesiumMap) {
const roomId = this.currentRoomId;
await Promise.all(this.activeRouteIds.map(async (id) => {
const route = this.routes.find(r => r.id === id);
if (!route || !route.waypoints || route.waypoints.length === 0) return;
if (roomId && route.platformId) {
try {
const res = await getPlatformStyle({ roomId, routeId: id, platformId: route.platformId });
if (res.data) this.$refs.cesiumMap.setPlatformStyle(id, res.data);
} catch (_) {}
}
}));
this.$nextTick(() => {
this.activeRouteIds.forEach(id => {
const route = this.routes.find(r => r.id === id);
// 只要数据里有点位，直接指挥地图画线
if (route && route.waypoints && route.waypoints.length > 0) {
if (this.$refs.cesiumMap) {
this.$refs.cesiumMap.removeRouteById(id);
this.$refs.cesiumMap.renderRouteWaypoints(route.waypoints, id, route.platformId, route.platform, this.parseRouteStyle(route.attributes));
}
if (route && route.waypoints && route.waypoints.length > 0 && this.$refs.cesiumMap) {
this.$refs.cesiumMap.removeRouteById(id);
this.$refs.cesiumMap.renderRouteWaypoints(route.waypoints, id, route.platformId, route.platform, this.parseRouteStyle(route.attributes));
}
});
});
@ -1381,13 +1402,21 @@ export default {
if (idxInList !== -1) routeInList.waypoints.splice(idxInList, 1, merged);
}
if (this.$refs.cesiumMap) {
const roomId = this.currentRoomId;
const sd = this.selectedRouteDetails;
if (roomId && sd.platformId) {
try {
const styleRes = await getPlatformStyle({ roomId, routeId: sd.id, platformId: sd.platformId });
if (styleRes.data) this.$refs.cesiumMap.setPlatformStyle(sd.id, styleRes.data);
} catch (_) {}
}
this.$refs.cesiumMap.updateWaypointGraphicById(updatedWaypoint.id, updatedWaypoint.name);
this.$refs.cesiumMap.renderRouteWaypoints(
this.selectedRouteDetails.waypoints,
this.selectedRouteDetails.id,
this.selectedRouteDetails.platformId,
this.selectedRouteDetails.platform,
this.parseRouteStyle(this.selectedRouteDetails.attributes)
sd.waypoints,
sd.id,
sd.platformId,
sd.platform,
this.parseRouteStyle(sd.attributes)
);
}
this.showWaypointDialog = false;
@ -2711,6 +2740,13 @@ export default {
await this.getList();
const updated = this.routes.find(r => r.id === routeId);
if (updated && updated.waypoints && this.activeRouteIds.includes(routeId) && this.$refs.cesiumMap) {
const roomId = this.currentRoomId;
if (roomId && updated.platformId) {
try {
const styleRes = await getPlatformStyle({ roomId, routeId, platformId: updated.platformId });
if (styleRes.data) this.$refs.cesiumMap.setPlatformStyle(routeId, styleRes.data);
} catch (_) {}
}
this.$refs.cesiumMap.removeRouteById(routeId);
this.$refs.cesiumMap.renderRouteWaypoints(updated.waypoints, routeId, updated.platformId, updated.platform, this.parseRouteStyle(updated.attributes));
this.$nextTick(() => this.updateDeductionPositions());
@ -2837,8 +2873,14 @@ export default {
}
if (waypoints.length > 0) {
// 通知地图渲染
if (this.$refs.cesiumMap) {
const roomId = this.currentRoomId;
if (roomId && route.platformId) {
try {
const styleRes = await getPlatformStyle({ roomId, routeId: route.id, platformId: route.platformId });
if (styleRes.data) this.$refs.cesiumMap.setPlatformStyle(route.id, styleRes.data);
} catch (_) {}
}
this.$refs.cesiumMap.renderRouteWaypoints(waypoints, route.id, route.platformId, route.platform, this.parseRouteStyle(route.attributes));
}
} else {

Write Preview
Loading…
Cancel
Save