Skip to content

J
JINRUN-DP
Commit 9d95ac5a authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

add：car &person 切换

parent 71a82abf
Show whitespace changes
Inline Side-by-side
Showing with 296 additions and 20 deletions
src/views/index.vue
View file @ 9d95ac5a
......@@ -3,6 +3,19 @@
<!-- Cesium地图背景 -->
<div id="cesiumContainer" class="cesium-background"></div>
<!-- 新增：类型选择下拉框 -->
<div class="type-selector">
<label for="entityType">显示类型：</label>
<select
id="entityType"
v-model="selectedEntityType"
@change="onEntityTypeChange"
>
<option value="person">人员</option>
<option value="vehicle">车辆</option>
</select>
</div>
<!-- 顶部标题栏 -->
<header class="top-title-bar" style="display: none">
<h1 class="system-title">数据监测分析系统</h1>
......@@ -244,6 +257,8 @@ export default {
// Cesium查看器实例
viewer: null,
tileset: null,
// 新增：实体类型选择
selectedEntityType: "person", // 默认选择人员
personnelList: [
{
longitude: 121.70710830038986,
......@@ -263,6 +278,8 @@ export default {
},
// 其他人员数据...
],
// 新增：车辆数据
vehicleList: [],
personModelInterval: null,
bgEntities: {}, // 所有的key都对应一个实体对象。而人员的实体对应的key不是数字。
......@@ -311,12 +328,29 @@ export default {
}
},
methods: {
// 人员车辆选择变化处理
onPersonSelect() {
if (this.selectedPerson) {
// 选择人员显示对应人员位置
// 新增：实体类型选择变化处理
onEntityTypeChange() {
console.log("选择的实体类型:", this.selectedEntityType);
// 清除现有的实体
this.clearEntities();
// 根据选择的类型重新创建实体
if (this.selectedEntityType === "person") {
this.createPersonModel();
} else {
this.createVehicleModel();
}
},
// 新增：清除实体
clearEntities() {
if (this.viewer && this.bgEntities) {
for (let key in this.bgEntities) {
this.viewer.entities.remove(this.bgEntities[key]);
delete this.bgEntities[key];
}
}
},
/**
* 初始化Cesium地图
*/
......@@ -506,7 +540,13 @@ export default {
duration: 2, // 过渡时间2秒
complete: () => {
console.log("相机已成功定位到模型上方");
// this.createPersonModel(); // 定位后创建人员模型
// 根据当前选择的类型创建相应的模型
if (this.selectedEntityType === "person") {
this.createPersonModel(); // 定位后创建人员模型
} else {
this.createVehicleModel(); // 定位后创建车辆模型
}
},
});
} catch (error) {
......@@ -517,15 +557,17 @@ export default {
if (!this.personModelInterval) {
this.personModelInterval = setInterval(() => {
console.log("开始获取实时数据");
if (this.bgEntities) {
for (let key in this.bgEntities) {
if (isNaN(parseFloat(key))) {
// 非数字键名的是人员实体
this.viewer.entities.remove(this.bgEntities[key]);
delete this.bgEntities[key];
}
}
}
// 只清除当前类型的实体
this.clearEntities();
// if (this.bgEntities) {
// for (let key in this.bgEntities) {
// if (isNaN(parseFloat(key))) {
// // 非数字键名的是人员实体
// this.viewer.entities.remove(this.bgEntities[key]);
// delete this.bgEntities[key];
// }
// }
// }
// 从API获取最新的人员定位数据
this.personCardList((list) => {
......@@ -558,15 +600,11 @@ export default {
fixedFrame: Cesium.Transforms.eastNorthUpToFixedFrame(position),
});
entity.info = item; // 添加 info 属性
entity.type = "person"; // 添加类型标记
this.bgEntities[item.perName] = entity; // 存储新实体
}
// 如果已经选择了人员，更新其位置和轨迹
if (this.selectedPerson) {
this.updatePersonPositionByTimeIndex(this.currentTimeIndex);
}
});
}, 10000); // 每10秒刷新一次
}, 1000); // 每10秒刷新一次
}
},
......@@ -611,6 +649,208 @@ export default {
fn(this.personnelList);
},
// 新增：车辆模型创建方法
createVehicleModel() {
// 清除定时器，避免重复执行
if (this.personModelInterval) {
clearInterval(this.personModelInterval);
this.personModelInterval = null;
}
// 清除现有实体
this.clearEntities();
// 生成车辆数据（模拟数据，可以替换为实际API调用）
this.generateVehicleData();
// 创建车辆实体
for (let item of this.vehicleList) {
let lng = Number(item.lng);
let lat = Number(item.lat);
let height = Number(item.height);
let position = Cesium.Cartesian3.fromDegrees(lng, lat, height);
// 创建车辆标记
let entity = this.viewer.entities.add({
position: position,
label: {
text: item.vehicleName,
font: "16px",
backgroundColor: Cesium.Color.fromCssColorString("#173349"),
showBackground: true,
fillColor: Cesium.Color.CYAN, // 车辆标签使用青色
depthTestAgainstTerrain: false,
pixelOffset: new Cesium.Cartesian2(0, -35),
},
billboard: {
image: "/poi-marker-vehicle.png", // 可以使用不同的图标表示车辆
scale: 0.5,
heightReference: Cesium.HeightReference.CLAMP_TO_3D_TILE,
},
description: `<div><h4>${item.vehicleName}${item.status}</h4></div>`,
fixedFrame: Cesium.Transforms.eastNorthUpToFixedFrame(position),
});
entity.info = item; // 添加 info 属性
entity.type = "vehicle"; // 添加类型标记
this.bgEntities[item.vehicleName] = entity; // 存储新实体
}
// 设置定时刷新
this.personModelInterval = setInterval(() => {
console.log("开始获取实时车辆数据");
this.generateVehicleData();
// 更新车辆实体
for (let item of this.vehicleList) {
let entity = this.bgEntities[item.vehicleName];
if (entity) {
let position = Cesium.Cartesian3.fromDegrees(
item.lng,
item.lat,
item.height
);
entity.position.setValue(position);
entity.fixedFrame =
Cesium.Transforms.eastNorthUpToFixedFrame(position);
} else {
// 如果实体不存在，则创建新的
let position = Cesium.Cartesian3.fromDegrees(
item.lng,
item.lat,
item.height
);
let newEntity = this.viewer.entities.add({
position: position,
label: {
text: item.vehicleName,
font: "16px",
backgroundColor: Cesium.Color.fromCssColorString("#173349"),
showBackground: true,
fillColor: Cesium.Color.CYAN,
depthTestAgainstTerrain: false,
pixelOffset: new Cesium.Cartesian2(0, -35),
},
billboard: {
image: "/poi-marker-vehicle.png",
scale: 0.5,
heightReference: Cesium.HeightReference.CLAMP_TO_3D_TILE,
},
description: `<div><h4>${item.vehicleName}${item.status}</h4></div>`,
fixedFrame: Cesium.Transforms.eastNorthUpToFixedFrame(position),
});
newEntity.info = item;
newEntity.type = "vehicle";
this.bgEntities[item.vehicleName] = newEntity;
}
}
}, 10000); // 每10秒刷新一次
},
// 新增：生成车辆数据
generateVehicleData() {
// 将笛卡尔坐标转换为经纬度坐标
const cartographic = Cesium.Cartographic.fromCartesian({
x: -2686273.730145489,
y: 4293961.185794622,
z: 3863430.5618300107,
});
const baseLongitude = Cesium.Math.toDegrees(cartographic.longitude);
const baseLatitude = Cesium.Math.toDegrees(cartographic.latitude);
const baseHeight = cartographic.height + 1;
// 清除现有的车辆列表
this.vehicleList = [];
// 生成5辆不同的车辆数据
const maxOffset = 0.00008; // 车辆分布范围稍大一些
for (let index = 0; index < 5; index++) {
// 生成随机偏移量
const lngOffset = (Math.random() - 0.5) * 2 * maxOffset;
const latOffset = (Math.random() - 0.5) * 2 * maxOffset;
this.vehicleList.push({
lng: baseLongitude + lngOffset,
lat: baseLatitude + latOffset,
height: baseHeight,
vehicleName: "车辆" + (index + 1),
status: Math.random() > 0.2 ? "online" : "offline", // 80%的概率在线
vehicleType:
index % 3 === 0 ? "卡车" : index % 3 === 1 ? "挖掘机" : "装载机",
});
}
},
// 修改：更新点击事件处理器，支持车辆显示
addEntityClickHandler() {
// 创建鼠标事件处理器
this.clickHandler = new Cesium.ScreenSpaceEventHandler(
this.viewer.canvas
);
// 监听鼠标左键点击事件
this.clickHandler.setInputAction((click) => {
// 检测点击位置的实体
const pickedObject = this.viewer.scene.pick(click.position);
// 修复条件判断：检查是否有info属性
if (
Cesium.defined(pickedObject) &&
pickedObject.id &&
pickedObject.id.info
) {
// 获取点击的实体
const entity = pickedObject.id;
const entityInfo = entity.info;
// 如果已有详细信息label，则移除它
if (entity.detailLabel) {
this.viewer.entities.remove(entity.detailLabel);
delete entity.detailLabel;
return;
}
console.log("点击实体了", entityInfo);
// 根据实体类型显示不同的信息
let labelText = "";
if (entity.type === "vehicle") {
// 车辆信息
labelText = `${entityInfo.vehicleName}\n类型: ${
entityInfo.vehicleType
}\n状态: ${
entityInfo.status === "online" ? "在线" : "离线"
}\n高度: ${entityInfo.height.toFixed(2)}m`;
} else {
// 人员信息
labelText = `${entityInfo.perName}\n状态: ${
entityInfo.status === "online" ? "在线" : "离线"
}\n高度: ${entityInfo.height.toFixed(2)}m`;
}
// 创建详细信息label
const detailLabel = this.viewer.entities.add({
position: entity.position.getValue(),
label: {
text: labelText,
font: "14px 微软雅黑",
backgroundColor: Cesium.Color.fromCssColorString("#173349"),
showBackground: true,
fillColor: Cesium.Color.WHITE,
pixelOffset: new Cesium.Cartesian2(0, -60),
eyeOffset: new Cesium.Cartesian3(0, 0, -10),
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.TOP,
scaleByDistance: new Cesium.NearFarScalar(1000, 1, 500000, 0.5),
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 确保始终显示在最前面
},
});
// 将详细信息label关联到实体，便于后续管理
entity.detailLabel = detailLabel;
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
},
// 绘制趋势图
drawTrendChart() {},
......@@ -1282,4 +1522,40 @@ html {
*::-webkit-scrollbar-thumb:hover {
background: #0090d0;
}
// 新增：类型选择器样式
.type-selector {
position: absolute;
top: 20px;
right: 20px;
z-index: 100;
background: rgba(23, 51, 73, 0.9);
padding: 10px 15px;
border-radius: 4px;
border: 1px solid #005080;
color: white;
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
select {
background: rgba(255, 255, 255, 0.1);
color: white;
border: 1px solid #0078b0;
border-radius: 4px;
padding: 5px 10px;
outline: none;
option {
background: #173349;
color: white;
}
&:focus {
border-color: #00aaff;
box-shadow: 0 0 5px rgba(0, 170, 255, 0.5);
}
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment