Skip to content

J
JINRUN-PERPOSITION
Commit 16c3735b authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

add：定时器封装、人员实体create方式修改、弹窗label添加

parent 6a08bfbd
Hide whitespace changes
Inline Side-by-side
Showing with 200 additions and 119 deletions
src/views/index-guiji.vue
View file @ 16c3735b
...@@ -94,6 +94,15 @@ export default { ...@@ -94,6 +94,15 @@ export default {
} }
}, },
methods: { methods: {
// 新增：清除实体
clearEntities() {
if (this.viewer && this.bgEntities) {
for (let key in this.bgEntities) {
this.viewer.entities.remove(this.bgEntities[key]);
delete this.bgEntities[key];
}
}
},
// 初始化时间点数据（生成过去1小时的时间点，每5分钟一个） // 初始化时间点数据（生成过去1小时的时间点，每5分钟一个）
initTimePoints() { initTimePoints() {
const now = new Date(); const now = new Date();
...@@ -355,62 +364,195 @@ export default { ...@@ -355,62 +364,195 @@ export default {
this.trailEntities = {}; this.trailEntities = {};
}, },
createPersonModel() { // 1. 提取通用实体创建函数
if (!this.personModelInterval) { createEntity(item, type) {
this.personModelInterval = setInterval(() => { const isPerson = type === "person";
console.log("开始获取实时数据"); const idField = isPerson ? "perName" : "vehicleName";
if (this.bgEntities) { const labelColor = isPerson ? Cesium.Color.YELLOW : Cesium.Color.CYAN;
for (let key in this.bgEntities) { const iconPath = isPerson
if (isNaN(parseFloat(key))) { ? "/poi-marker-default.png"
// 非数字键名的是人员实体 : "/poi-marker-vehicle.png";
this.viewer.entities.remove(this.bgEntities[key]);
delete this.bgEntities[key]; let lng = Number(item.lng);
} let lat = Number(item.lat);
} let height = Number(item.height);
} let position = Cesium.Cartesian3.fromDegrees(lng, lat, height);
console.log(item[idField], position);
// 创建实体
let entity = this.viewer.entities.add({
position: position,
label: {
text: item[idField],
font: "16px",
backgroundColor: Cesium.Color.fromCssColorString("#173349"),
showBackground: true,
fillColor: labelColor,
depthTestAgainstTerrain: false,
pixelOffset: new Cesium.Cartesian2(0, -35),
},
billboard: {
image: iconPath,
scale: 0.5,
heightReference: Cesium.HeightReference.CLAMP_TO_3D_TILE,
},
description: `<div><h4>${item[idField]}${item.status}</h4></div>`,
fixedFrame: Cesium.Transforms.eastNorthUpToFixedFrame(position),
});
// 从API获取最新的人员定位数据 entity.info = item;
this.personCardList((list) => { entity.type = type;
console.log("人员数据", this.personnelList); this.bgEntities[item[idField]] = entity;
// 创建新实体
for (let item of this.personnelList) { return entity;
let lng = Number(item.lng); },
let lat = Number(item.lat);
let height = Number(item.height); // 2. 提取实体更新函数
let position = Cesium.Cartesian3.fromDegrees(lng, lat, height); updateEntity(entity, item) {
console.log(item.perName, position); let position = Cesium.Cartesian3.fromDegrees(
// 创建人员标记 item.lng,
let entity = this.viewer.entities.add({ item.lat,
position: position, item.height
label: { );
text: item.perName, entity.position.setValue(position);
font: "16px", entity.fixedFrame = Cesium.Transforms.eastNorthUpToFixedFrame(position);
backgroundColor: Cesium.Color.fromCssColorString("#173349"), },
showBackground: true,
fillColor: Cesium.Color.YELLOW, // 3. 提取批量创建实体的函数
depthTestAgainstTerrain: false, // 禁用地形深度测试 createEntities(entityList, type) {
pixelOffset: new Cesium.Cartesian2(0, -35), const isPerson = type === "person";
}, const idField = isPerson ? "perName" : "vehicleName";
billboard: {
image: "/poi-marker-default.png", for (let item of entityList) {
scale: 0.5, this.createEntity(item, type);
},
description: `<div><h4>${item.perName}${item.status}</h4></div>`,
fixedFrame: Cesium.Transforms.eastNorthUpToFixedFrame(position),
});
entity.info = item; // 添加 info 属性
this.bgEntities[item.perName] = entity; // 存储新实体
}
// 如果已经选择了人员，更新其位置和轨迹
if (this.selectedPerson) {
this.updatePersonPositionByTimeIndex(this.currentTimeIndex);
}
});
}, 10000); // 每10秒刷新一次
} }
}, },
// 4. 提取批量更新实体的函数（增量更新模式）
updateEntities(entityList, type) {
const isPerson = type === "person";
const idField = isPerson ? "perName" : "vehicleName";
for (let item of entityList) {
let entity = this.bgEntities[item[idField]];
if (entity && entity.type === type) {
// 更新现有实体
this.updateEntity(entity, item);
} else {
// 创建新实体
this.createEntity(item, type);
}
}
},
// 5. 提取定时器逻辑为可重用函数
setupEntityUpdateInterval(type, dataGenerator, interval = 10000) {
// 清除现有定时器
if (this.intervaler) {
clearInterval(this.intervaler);
this.intervaler = null;
}
// 设置新的定时器
this.intervaler = setInterval(() => {
console.log(`开始获取实时${type === "person" ? "人员" : "车辆"}数据`);
// 生成或获取最新数据
if (typeof dataGenerator === "function") {
dataGenerator();
}
const entityList =
type === "person" ? this.personnelList : this.vehicleList;
// 更新实体（这里可以选择清除重建或增量更新）
// 方案1：清除所有实体后重建
this.clearEntities();
this.createEntities(entityList, type);
// 方案2：增量更新（推荐，性能更好）
// this.updateEntities(entityList, type);
}, interval);
},
createPersonModel() {
// 清除现有定时器
if (this.personModelInterval) {
clearInterval(this.personModelInterval);
this.personModelInterval = null;
}
// 清除现有实体
this.clearEntities();
// 立即生成并显示人员实体
console.log("立即创建人员实体");
this.personCardList((list) => {
console.log("人员数据", this.personnelList);
this.createEntities(this.personnelList, "person");
});
// 设置定时刷新
this.setupEntityUpdateInterval("person", () => {
this.personCardList(() => {
console.log("人员数据", this.personnelList);
});
});
// 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];
// }
// }
// }
// // 从API获取最新的人员定位数据
// this.personCardList((list) => {
// console.log("人员数据", this.personnelList);
// // 创建新实体
// for (let item of this.personnelList) {
// let lng = Number(item.lng);
// let lat = Number(item.lat);
// let height = Number(item.height);
// let position = Cesium.Cartesian3.fromDegrees(lng, lat, height);
// console.log(item.perName, position);
// // 创建人员标记
// let entity = this.viewer.entities.add({
// position: position,
// label: {
// text: item.perName,
// font: "16px",
// backgroundColor: Cesium.Color.fromCssColorString("#173349"),
// showBackground: true,
// fillColor: Cesium.Color.YELLOW,
// depthTestAgainstTerrain: false, // 禁用地形深度测试
// pixelOffset: new Cesium.Cartesian2(0, -35),
// },
// billboard: {
// image: "/poi-marker-default.png",
// scale: 0.5,
// },
// description: `<div><h4>${item.perName}${item.status}</h4></div>`,
// fixedFrame: Cesium.Transforms.eastNorthUpToFixedFrame(position),
// });
// entity.info = item; // 添加 info 属性
// this.bgEntities[item.perName] = entity; // 存储新实体
// }
// // 如果已经选择了人员，更新其位置和轨迹
// if (this.selectedPerson) {
// this.updatePersonPositionByTimeIndex(this.currentTimeIndex);
// }
// });
// }, 10000); // 每10秒刷新一次
},
personCardList(fn) { personCardList(fn) {
// 将笛卡尔坐标转换为经纬度坐标 // 将笛卡尔坐标转换为经纬度坐标
const cartographic = Cesium.Cartographic.fromCartesian({ const cartographic = Cesium.Cartographic.fromCartesian({
...@@ -457,24 +599,6 @@ export default { ...@@ -457,24 +599,6 @@ export default {
fn(this.personnelList); fn(this.personnelList);
}, },
showPersonInfo(description) {
// 使用 Cesium 的 InfoBox 显示信息
this.viewer.selectedEntity = this.viewer.entities.add({
description: description,
});
this.viewer.infoBox.frame.sandbox =
"allow-same-origin allow-top-navigation allow-pointer-lock allow-popups allow-forms allow-scripts";
this.viewer.infoBox.frame.src = "about:blank";
this.viewer.infoBox.frame.contentDocument.write(description);
this.viewer.infoBox.frame.contentDocument.close();
this.viewer.infoBox.viewModel.showInfo = true;
this.viewer.scene.globe.depthTestAgainstTerrain = true;
},
goTarget(href) {
window.open(href, "_blank");
},
/** /**
* 初始化Cesium地图 * 初始化Cesium地图
*/ */
...@@ -493,12 +617,12 @@ export default { ...@@ -493,12 +617,12 @@ export default {
// 配置是否显示各种控件 // 配置是否显示各种控件
animation: false, // 动画控件 animation: false, // 动画控件
baseLayerPicker: true, // 底图选择器 baseLayerPicker: true, // 底图选择器
fullscreenButton: true, // 全屏按钮 fullscreenButton: false, // 全屏按钮
geocoder: true, // 地址搜索 geocoder: false, // 地址搜索
homeButton: true, // 主页按钮 homeButton: false, // 主页按钮
infoBox: true, // 信息框 infoBox: false, // 信息框
sceneModePicker: true, // 场景模式选择器 sceneModePicker: false, // 场景模式选择器
selectionIndicator: true, // 选择指示器 selectionIndicator: false, // 选择指示器
timeline: false, // 时间线 timeline: false, // 时间线
navigationHelpButton: false, // 导航帮助按钮 navigationHelpButton: false, // 导航帮助按钮
navigationInstructionsInitiallyVisible: false, navigationInstructionsInitiallyVisible: false,
...@@ -625,54 +749,11 @@ export default { ...@@ -625,54 +749,11 @@ export default {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
blockquote {
padding: 10px 20px;
margin: 0 0 20px;
font-size: 17.5px;
border-left: 5px solid #eee;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #eee;
}
.col-item {
margin-bottom: 20px;
}
ul {
padding: 0;
margin: 0;
}
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px; font-size: 13px;
color: #676a6c; color: #676a6c;
overflow-x: hidden; overflow-x: hidden;
ul {
list-style-type: none;
}
h4 {
margin-top: 0px;
}
h2 {
margin-top: 10px;
font-size: 26px;
font-weight: 100;
}
p {
margin-top: 10px;
b {
font-weight: 700;
}
}
.update-log { .update-log {
ol { ol {
display: block; display: block;
......
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