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

1

mh
menghao 1 month ago
parent
b7ca5a89b8
commit
f63b8d16a6
1 changed files with 103 additions and 109 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 166
      ruoyi-ui/src/views/cesiumMap/index.vue

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

@ -40,14 +40,11 @@
@show-transform-box="showPlatformIconTransformBox" @show-transform-box="showPlatformIconTransformBox"
@toggle-route-label="toggleRouteLabelVisibility" @toggle-route-label="toggleRouteLabelVisibility"
@toggle-route-lock="toggleRouteLock" @toggle-route-lock="toggleRouteLock"
<<<<<<< HEAD
@edit-platform="openEditPlatformDialog"
@power-zone="openPowerZoneDialog"
=======
@start-route-before-platform="handleStartRouteBeforePlatform" @start-route-before-platform="handleStartRouteBeforePlatform"
@start-route-after-platform="handleStartRouteAfterPlatform" @start-route-after-platform="handleStartRouteAfterPlatform"
@copy-route="handleCopyRouteFromMenu" @copy-route="handleCopyRouteFromMenu"
>>>>>>> 9363256d79ba1d213479769fa0a97c737d179e32 @edit-platform="openEditPlatformDialog"
@power-zone="openPowerZoneDialog"
/> />
<!-- 定位弹窗 --> <!-- 定位弹窗 -->
@ -136,7 +133,7 @@
/> />
</el-form-item> </el-form-item>
<el-form-item label="填充颜色"> <el-form-item label="填充颜色">
<el-color-picker v-model="powerZoneForm.color" show-alpha size="small" /> <el-color-picker v-model="powerZoneForm.color" show-alpha size="small" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
@ -291,16 +288,13 @@ export default {
}, },
// 航线飞机标牌显示状态：routeId -> true 显示 / false 隐藏，不设则默认显示 // 航线飞机标牌显示状态：routeId -> true 显示 / false 隐藏，不设则默认显示
routeLabelVisible: {}, routeLabelVisible: {},
<<<<<<< HEAD
// 航线飞机标牌样式：routeId -> { fontSize, fontColor } // 航线飞机标牌样式：routeId -> { fontSize, fontColor }
routeLabelStyles: {}, routeLabelStyles: {},
// 航线上锁状态：routeId -> true 上锁（不可编辑）/ false 或未设 可编辑 // 航线上锁状态：routeId -> true 上锁（不可编辑）/ false 或未设 可编辑
routeLocked: {}, routeLocked: {},
=======
// 航线上锁状态由父组件通过 prop routeLocked 传入，与右侧列表锁图标同步 // 航线上锁状态由父组件通过 prop routeLocked 传入，与右侧列表锁图标同步
// 从平台右键进入的航线绘制：{ platformInfo: { platformId, platform }, mode: 'before'|'after' } // 从平台右键进入的航线绘制：{ platformInfo: { platformId, platform }, mode: 'before'|'after' }
platformRouteDrawing: null, platformRouteDrawing: null,
>>>>>>> 9363256d79ba1d213479769fa0a97c737d179e32
// 默认样式 // 默认样式
defaultStyles: { defaultStyles: {
point: { color: '#FF0000', size: 12 }, point: { color: '#FF0000', size: 12 },
@ -1667,7 +1661,7 @@ export default {
// 初始化样式 // 初始化样式
if (!this.routeLabelStyles[routeId]) { if (!this.routeLabelStyles[routeId]) {
this.$set(this.routeLabelStyles, routeId, { fontSize: 16, fontColor: '#000000' }); this.$set(this.routeLabelStyles, routeId, { fontSize: 16, fontColor: '#000000' });
} }
const currentStyle = this.routeLabelStyles[routeId]; const currentStyle = this.routeLabelStyles[routeId];
@ -1698,10 +1692,10 @@ export default {
}); });
// 缓存初始数据，供样式更新使用 // 缓存初始数据，供样式更新使用
labelEntity.labelDataCache = { labelEntity.labelDataCache = {
name: (platform && platform.name) || '平台', name: (platform && platform.name) || '平台',
altitude: firstAlt, altitude: firstAlt,
speed: firstSpeed, speed: firstSpeed,
headingDeg: initialHeadingDeg headingDeg: initialHeadingDeg
}; };
} }
// 绘制连线（含盘旋弧） // 绘制连线（含盘旋弧）
@ -2333,62 +2327,62 @@ export default {
Object.assign(labelEntity.labelDataCache, labelData); Object.assign(labelEntity.labelDataCache, labelData);
if (labelEntity.billboard) { if (labelEntity.billboard) {
const style = this.routeLabelStyles[routeId] || { fontSize: 16, fontColor: '#000000' }; const style = this.routeLabelStyles[routeId] || { fontSize: 16, fontColor: '#000000' };
// 预处理显示数据（取整），既解决了小数点过长问题，也用于差异检测 // 预处理显示数据（取整），既解决了小数点过长问题，也用于差异检测
const displayData = { const displayData = {
name: labelData.name || '平台', name: labelData.name || '平台',
altitude: Math.round(Number(labelData.altitude || 0)), altitude: Math.round(Number(labelData.altitude || 0)),
speed: Math.round(Number(labelData.speed || 0)), speed: Math.round(Number(labelData.speed || 0)),
heading: Math.round(Number(labelData.headingDeg || 0)) heading: Math.round(Number(labelData.headingDeg || 0))
}; };
// 差异检测：如果关键数据和样式都没变，就不重绘 // 差异检测：如果关键数据和样式都没变，就不重绘
const last = labelEntity._lastRenderParams; const last = labelEntity._lastRenderParams;
const now = Date.now(); const now = Date.now();
// 节流控制：只有当数据变化且距离上次更新超过 1000ms 时才更新（首次除外） // 节流控制：只有当数据变化且距离上次更新超过 1000ms 时才更新（首次除外）
// 这样可以保证位置平滑移动（position每帧更新），但纹理贴图每秒只更新一次，彻底解决闪烁 // 这样可以保证位置平滑移动（position每帧更新），但纹理贴图每秒只更新一次，彻底解决闪烁
if (last && if (last &&
last.name === displayData.name && last.name === displayData.name &&
last.altitude === displayData.altitude && last.altitude === displayData.altitude &&
last.speed === displayData.speed && last.speed === displayData.speed &&
last.heading === displayData.heading && last.heading === displayData.heading &&
last.fontSize === style.fontSize && last.fontSize === style.fontSize &&
last.fontColor === style.fontColor) { last.fontColor === style.fontColor) {
// 数据完全一致，无需更新 // 数据完全一致，无需更新
return; return;
} }
// 如果数据变了，但还没到 1秒 间隔，且不是强制更新（比如刚修改了样式），则跳过 // 如果数据变了，但还没到 1秒 间隔，且不是强制更新（比如刚修改了样式），则跳过
if (last && (now - (labelEntity._lastUpdateTime || 0) < 1000)) { if (last && (now - (labelEntity._lastUpdateTime || 0) < 1000)) {
return; return;
} }
const canvas = this.createRoundedLabelCanvas({ const canvas = this.createRoundedLabelCanvas({
name: displayData.name, name: displayData.name,
altitude: displayData.altitude, altitude: displayData.altitude,
speed: displayData.speed, speed: displayData.speed,
heading: displayData.heading, heading: displayData.heading,
fontSize: style.fontSize, fontSize: style.fontSize,
fontColor: style.fontColor fontColor: style.fontColor
}); });
// 直接赋值 canvas，避免 ConstantProperty 包装可能带来的额外开销（Cesium 会自动处理） // 直接赋值 canvas，避免 ConstantProperty 包装可能带来的额外开销（Cesium 会自动处理）
labelEntity.billboard.image = canvas; labelEntity.billboard.image = canvas;
// 记录本次渲染参数和时间 // 记录本次渲染参数和时间
labelEntity._lastRenderParams = { labelEntity._lastRenderParams = {
...displayData, ...displayData,
fontSize: style.fontSize, fontSize: style.fontSize,
fontColor: style.fontColor fontColor: style.fontColor
}; };
labelEntity._lastUpdateTime = now; labelEntity._lastUpdateTime = now;
// 确保在 requestRenderMode 下能刷出来 // 确保在 requestRenderMode 下能刷出来
if (this.viewer.scene.requestRenderMode) { if (this.viewer.scene.requestRenderMode) {
this.viewer.scene.requestRender(); this.viewer.scene.requestRender();
} }
} else if (labelEntity.label) { } else if (labelEntity.label) {
labelEntity.label.text = this.formatPlatformLabelText(labelData); labelEntity.label.text = this.formatPlatformLabelText(labelData);
} }
} }
} }
@ -5252,8 +5246,8 @@ export default {
let fontColor = '#333333' let fontColor = '#333333'
if (this.routeLabelStyles[routeId]) { if (this.routeLabelStyles[routeId]) {
fontSize = this.routeLabelStyles[routeId].fontSize; fontSize = this.routeLabelStyles[routeId].fontSize;
fontColor = this.routeLabelStyles[routeId].fontColor; fontColor = this.routeLabelStyles[routeId].fontColor;
} else if (labelEntity && labelEntity.label) { } else if (labelEntity && labelEntity.label) {
const now = Cesium.JulianDate.now() const now = Cesium.JulianDate.now()
const fontValue = labelEntity.label.font && labelEntity.label.font.getValue const fontValue = labelEntity.label.font && labelEntity.label.font.getValue
@ -5325,23 +5319,23 @@ export default {
const labelEntity = this.viewer.entities.getById(`route-platform-label-${routeId}`) const labelEntity = this.viewer.entities.getById(`route-platform-label-${routeId}`)
if (labelEntity) { if (labelEntity) {
if (labelEntity.billboard) { if (labelEntity.billboard) {
const data = labelEntity.labelDataCache || { name: '平台', altitude: 0, speed: 0, headingDeg: 0 }; const data = labelEntity.labelDataCache || { name: '平台', altitude: 0, speed: 0, headingDeg: 0 };
const canvas = this.createRoundedLabelCanvas({ const canvas = this.createRoundedLabelCanvas({
name: data.name, name: data.name,
altitude: data.altitude, altitude: data.altitude,
speed: data.speed, speed: data.speed,
heading: data.headingDeg, heading: data.headingDeg,
fontSize: fontSize, fontSize: fontSize,
fontColor: fontColor fontColor: fontColor
}); });
// 使用 ConstantProperty 确保更新 // 使用 ConstantProperty 确保更新
labelEntity.billboard.image = new Cesium.ConstantProperty(canvas); labelEntity.billboard.image = new Cesium.ConstantProperty(canvas);
} else if (labelEntity.label) { } else if (labelEntity.label) {
labelEntity.label.font = `${fontSize}px Microsoft YaHei` labelEntity.label.font = `${fontSize}px Microsoft YaHei`
labelEntity.label.fillColor = Cesium.Color.fromCssColorString(fontColor) labelEntity.label.fillColor = Cesium.Color.fromCssColorString(fontColor)
// 优化透明度：背景颜色透明度调低，看起来更清爽 // 优化透明度：背景颜色透明度调低，看起来更清爽
labelEntity.label.backgroundColor = Cesium.Color.fromCssColorString('rgba(255, 255, 255, 0.6)') labelEntity.label.backgroundColor = Cesium.Color.fromCssColorString('rgba(255, 255, 255, 0.6)')
} }
} }

Write Preview
Loading…
Cancel
Save