icon
This commit is contained in:
parent
16d319bb7c
commit
0244c8166d
@ -529,6 +529,11 @@ onUnmounted(() => {
|
||||
|
||||
// 发送分类可见性设置到父组件
|
||||
function emitSet(type) {
|
||||
console.log(`LayerSwitcher: 设置分类 ${type} 可见性`, {
|
||||
visible: props.categories[type].visible,
|
||||
showLabel: props.categories[type].showLabel
|
||||
});
|
||||
|
||||
emit('setCategoryVisibility', type, {
|
||||
visible: props.categories[type].visible,
|
||||
showLabel: props.categories[type].showLabel
|
||||
|
||||
@ -148,6 +148,11 @@ const vehicleCategories = ref({
|
||||
'SHUTTLE_VEHICLE': { visible: true, showLabel: true, name: '摆渡车' }
|
||||
});
|
||||
|
||||
// 监听vehicleCategories变化,用于调试
|
||||
watch(vehicleCategories, (newCategories) => {
|
||||
console.log('VehicleMovementControl: vehicleCategories 发生变化:', newCategories);
|
||||
}, { deep: true });
|
||||
|
||||
// 告警/预警状态
|
||||
const alertMessage = ref('');
|
||||
const alertType = ref('');
|
||||
@ -365,6 +370,9 @@ function updateVehiclePosition(vehicleData) {
|
||||
if (labelSystem.value) {
|
||||
labelSystem.value.updateVehicleLabel(object_id, coordinates, speed);
|
||||
}
|
||||
|
||||
// 应用当前分类设置到新创建的车辆
|
||||
applyCurrentCategorySettings(object_id);
|
||||
} else {
|
||||
// 更新动画目标
|
||||
if (animationSystem.value) {
|
||||
@ -1088,6 +1096,58 @@ function clearSpeedViolationStatus(vehicleId) {
|
||||
console.log(`已成功清除车辆${vehicleId}的超速状态`);
|
||||
}
|
||||
|
||||
// 获取车辆类型键值
|
||||
function getVehicleTypeKey(vehicle) {
|
||||
if (!vehicle || !vehicle.type) return 'UNMANNED_VEHICLE';
|
||||
|
||||
const vehicleType = vehicle.type.toUpperCase();
|
||||
|
||||
// 根据车辆类型和特征确定分类键值
|
||||
if (vehicleType === 'AIRCRAFT') {
|
||||
return 'AIRCRAFT';
|
||||
} else if (vehicle.isAircraft) {
|
||||
return 'AIRCRAFT';
|
||||
} else if (vehicleType === 'UNMANNED_VEHICLE' || vehicle.isUnmannedVehicle) {
|
||||
return 'UNMANNED_VEHICLE';
|
||||
} else if (vehicleType === 'SPECIAL_VEHICLE' || vehicle.isSpecialVehicle) {
|
||||
return 'AIRPORT_VEHICLE';
|
||||
} else if (vehicleType === 'SHUTTLE_VEHICLE' || vehicle.isShuttleVehicle) {
|
||||
return 'SHUTTLE_VEHICLE';
|
||||
}
|
||||
|
||||
// 默认返回无人车类型
|
||||
return 'UNMANNED_VEHICLE';
|
||||
}
|
||||
|
||||
// 获取默认车辆样式
|
||||
function getDefaultVehicleStyle(vehicle) {
|
||||
if (!vehicle) return new Style({});
|
||||
|
||||
const isAircraft = vehicle.isAircraft || vehicle.type?.toUpperCase() === 'AIRCRAFT';
|
||||
const iconSrc = isAircraft ? aircraftIcon : carIcon;
|
||||
const heading = vehicle.heading || 0;
|
||||
|
||||
// 计算旋转角度
|
||||
const rotationRad = ((heading - 72) * Math.PI) / 180;
|
||||
|
||||
return new Style({
|
||||
image: new Icon({
|
||||
src: iconSrc,
|
||||
scale: 1.5,
|
||||
anchor: [0.5, 0.5],
|
||||
rotation: rotationRad,
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// 默认获取车辆样式函数(用于动画系统)
|
||||
// function defaultGetVehicleStyle(vehicleId, speed, heading) {
|
||||
// const vehicle = vehicles.value[vehicleId];
|
||||
// if (!vehicle) return new Style({});
|
||||
|
||||
// return getDefaultVehicleStyle(vehicle);
|
||||
// }
|
||||
|
||||
// 清除车辆告警状态(如果需要)
|
||||
function clearVehicleAlertStatus(vehicleData) {
|
||||
const { object_id, speed } = vehicleData;
|
||||
@ -1328,43 +1388,51 @@ defineExpose({
|
||||
}
|
||||
},
|
||||
setCategoryVisibility(type, { visible, showLabel }) {
|
||||
console.log(`VehicleMovementControl: 设置分类 ${type} 可见性`, { visible, showLabel });
|
||||
|
||||
if (vehicleCategories.value[type]) {
|
||||
// 更新分类设置
|
||||
vehicleCategories.value[type].visible = visible;
|
||||
vehicleCategories.value[type].showLabel = showLabel;
|
||||
|
||||
console.log(`更新分类设置完成: ${type}`, vehicleCategories.value[type]);
|
||||
|
||||
// 立即应用更改 - 更新所有属于此类别的车辆
|
||||
Object.values(vehicles.value).forEach(vehicle => {
|
||||
let vehicleTypeKey = vehicle.type;
|
||||
|
||||
// 根据车辆特征确定类别
|
||||
if (vehicle.isAircraftIn) vehicleTypeKey = 'AIRCRAFT_IN';
|
||||
else if (vehicle.isAircraftOut) vehicleTypeKey = 'AIRCRAFT_OUT';
|
||||
else if (vehicle.isUnmannedVehicle) vehicleTypeKey = 'UNMANNED_VEHICLE';
|
||||
else if (vehicle.isSpecialVehicle) vehicleTypeKey = 'AIRPORT_VEHICLE';
|
||||
else if (vehicle.isShuttleVehicle) vehicleTypeKey = 'SHUTTLE_VEHICLE';
|
||||
let vehicleTypeKey = getVehicleTypeKey(vehicle);
|
||||
|
||||
// 如果车辆属于当前修改的类别
|
||||
if (vehicleTypeKey === type) {
|
||||
// 更新图标可见性 - 如果不可见,则完全移除图标样式
|
||||
console.log(`更新车辆 ${vehicle.id} (${vehicleTypeKey}) 的显示状态:`, { visible, showLabel });
|
||||
|
||||
// 更新图标可见性
|
||||
if (vehicle.feature) {
|
||||
if (visible) {
|
||||
// 显示图标 - 确保styleManager.value存在
|
||||
// 显示图标
|
||||
if (styleManager.value) {
|
||||
vehicle.feature.setStyle(styleManager.value.getVehicleStyle(vehicle.id, vehicle.speed, vehicle.heading));
|
||||
} else {
|
||||
// 提供一个默认样式,根据车辆类型选择图标
|
||||
vehicle.feature.setStyle(defaultGetVehicleStyle(vehicle.id, vehicle.speed, vehicle.heading));
|
||||
// 使用默认样式
|
||||
vehicle.feature.setStyle(getDefaultVehicleStyle(vehicle));
|
||||
}
|
||||
} else {
|
||||
// 完全隐藏图标,使用空样式而非null
|
||||
// 隐藏图标
|
||||
vehicle.feature.setStyle(new Style({}));
|
||||
}
|
||||
}
|
||||
|
||||
// 单独控制文本标签可见性,与图标显示状态无关
|
||||
// 控制文本标签可见性
|
||||
if (labelSystem.value) {
|
||||
labelSystem.value.setLabelVisibility(vehicle.id, showLabel);
|
||||
if (labelSystem.value.setLabelVisibility) {
|
||||
labelSystem.value.setLabelVisibility(vehicle.id, showLabel);
|
||||
} else if (labelSystem.value.updateVehicleLabel) {
|
||||
// 如果没有setLabelVisibility方法,使用updateVehicleLabel
|
||||
if (showLabel && vehicle.position) {
|
||||
labelSystem.value.updateVehicleLabel(vehicle.id, vehicle.position, vehicle.speed);
|
||||
} else {
|
||||
labelSystem.value.removeVehicleLabel(vehicle.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -147,7 +147,7 @@ defineExpose({
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.alarm-notification-container {
|
||||
position: absolute;
|
||||
left:70px;
|
||||
@ -283,13 +283,13 @@ defineExpose({
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.alarm-icon.high {
|
||||
/* .alarm-icon.high {
|
||||
background-color: rgba(255, 77, 79, 0.2);
|
||||
}
|
||||
|
||||
.alarm-icon.medium {
|
||||
background-color: rgba(255, 153, 0, 0.2);
|
||||
}
|
||||
} */
|
||||
|
||||
.alarm-dot {
|
||||
width: 10px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user