Skip to content

J
JINRUN-DP
Commit 71a82abf authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

clear unuse code

parent ddb4adf9
Hide whitespace changes
Inline Side-by-side
Showing with 51 additions and 456 deletions
src/views/index.vue
View file @ 71a82abf
......@@ -277,14 +277,8 @@ export default {
};
},
mounted() {
// 初始化时间
this.updateTime();
setInterval(() => this.updateTime(), 1000);
// 初始化Cesium地图
this.initCesium();
// 初始化时间点数据
this.initTimePoints();
// 初始化图表
this.$nextTick(() => {
......@@ -317,287 +311,12 @@ export default {
}
},
methods: {
// 更新时间
updateTime() {
const now = new Date();
// 完整时间格式
this.currentTime = now.toLocaleString("zh-CN", {
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
});
// 短时间格式
this.currentTimeShort = now.toLocaleTimeString("zh-CN", {
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
});
},
// 初始化时间点数据（生成过去1小时的时间点，每5分钟一个）
initTimePoints() {
const now = new Date();
const points = [];
// 生成过去1小时的时间点，每5分钟一个
for (let i = 60; i >= 0; i -= 5) {
const time = new Date(now.getTime() - i * 60 * 1000);
points.push(time);
}
this.timePoints = points;
this.currentTimeIndex = points.length - 1; // 默认显示最新时间
this.currentTimeDisplay = this.formatTime(points[points.length - 1]);
// 初始化人员轨迹数据
this.initPersonTrajectories();
},
// 初始化人员轨迹数据
initPersonTrajectories() {
// 将笛卡尔坐标转换为经纬度坐标作为基准点
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.personnelList.forEach((person) => {
const trajectories = [];
let currentLng = baseLongitude + (Math.random() - 0.5) * 0.0001;
let currentLat = baseLatitude + (Math.random() - 0.5) * 0.0001;
this.timePoints.forEach((time) => {
// 生成平滑的移动路径
currentLng += (Math.random() - 0.5) * 0.00002;
currentLat += (Math.random() - 0.5) * 0.00002;
trajectories.push({
time,
lng: currentLng,
lat: currentLat,
height: baseHeight,
});
});
this.personTrajectories[person.perName] = trajectories;
});
},
// 格式化时间显示
formatTime(date = new Date()) {
const hours = date.getHours().toString().padStart(2, "0");
const minutes = date.getMinutes().toString().padStart(2, "0");
return `${hours}:${minutes}`;
},
// 人员选择变化处理
// 人员车辆选择变化处理
onPersonSelect() {
this.clearTrails();
if (this.selectedPerson) {
this.updatePersonPositionByTimeIndex(this.currentTimeIndex);
this.showFullPath();
}
},
// 时间轴变化处理
onTimelineChange() {
this.currentTimeDisplay = this.formatTime(
this.timePoints[this.currentTimeIndex]
);
this.updatePersonPositionByTimeIndex(this.currentTimeIndex);
},
// 根据时间索引更新人员位置
updatePersonPositionByTimeIndex(index) {
if (
!this.selectedPerson ||
!this.personTrajectories[this.selectedPerson]
) {
return;
}
const trajectory = this.personTrajectories[this.selectedPerson][index];
if (!trajectory) return;
// 更新人员实体位置
const personEntity = this.bgEntities[this.selectedPerson];
if (personEntity) {
const position = Cesium.Cartesian3.fromDegrees(
trajectory.lng,
trajectory.lat,
trajectory.height
);
personEntity.position.setValue(position);
// 更新描述信息，包含时间
personEntity.description = `<div><h4>${
this.selectedPerson
}</h4><p>时间: ${this.formatTime(trajectory.time)}</p></div>`;
}
// 移动相机到人员位置
if (this.isTracking) {
this.viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(
trajectory.lng,
trajectory.lat,
trajectory.height + 100
),
duration: 0.5,
});
}
},
// 开始实时追踪
startTracking() {
if (!this.selectedPerson) {
alert("请先选择要追踪的人员");
return;
}
this.isTracking = true;
this.currentTimeIndex = this.timePoints.length - 1;
// 设置定时器模拟时间流逝
this.trackingInterval = setInterval(() => {
// 模拟新时间点的到来
const now = new Date();
this.timePoints.push(now);
// 为每个人员生成新的位置数据
this.personnelList.forEach((person) => {
if (!this.personTrajectories[person.perName]) {
this.personTrajectories[person.perName] = [];
}
const lastPos =
this.personTrajectories[person.perName][
this.personTrajectories[person.perName].length - 1
];
let newLng = lastPos.lng + (Math.random() - 0.5) * 0.00002;
let newLat = lastPos.lat + (Math.random() - 0.5) * 0.00002;
this.personTrajectories[person.perName].push({
time: now,
lng: newLng,
lat: newLat,
height: lastPos.height,
});
});
// 更新到最新时间
this.currentTimeIndex = this.timePoints.length - 1;
this.currentTimeDisplay = this.formatTime(now);
this.updatePersonPositionByTimeIndex(this.currentTimeIndex);
// 如果选择了当前人员，显示最新轨迹
if (this.selectedPerson) {
this.updateTrailDisplay();
}
}, 5000000); // 每5秒更新一次
},
// 停止实时追踪
stopTracking() {
this.isTracking = false;
if (this.trackingInterval) {
clearInterval(this.trackingInterval);
this.trackingInterval = null;
}
},
// 显示完整轨迹
showFullPath() {
if (
!this.selectedPerson ||
!this.personTrajectories[this.selectedPerson]
) {
return;
}
this.clearTrails();
this.updateTrailDisplay();
},
// 更新轨迹显示
updateTrailDisplay() {
const trajectories = this.personTrajectories[this.selectedPerson];
if (!trajectories || trajectories.length < 2) return;
// 创建轨迹点数组
const positions = [];
trajectories.forEach((point) => {
positions.push(
Cesium.Cartesian3.fromDegrees(point.lng, point.lat, point.height)
);
});
// 创建轨迹线
const trailEntity = this.viewer.entities.add({
polyline: {
positions: positions,
width: 3,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.5,
color: Cesium.Color.YELLOW,
}),
clampToGround: false,
},
});
this.trailEntities[this.selectedPerson] = trailEntity;
// 添加轨迹点标记
trajectories.forEach((point, index) => {
// 只显示部分点，避免过多标记影响性能
if (
index % Math.ceil(trajectories.length / 10) === 0 ||
index === trajectories.length - 1
) {
const pointEntity = this.viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(
point.lng,
point.lat,
point.height + 5
),
point: {
pixelSize: 5,
color:
index === trajectories.length - 1
? Cesium.Color.RED
: Cesium.Color.GREEN,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 2,
},
description: `<div><p>时间: ${this.formatTime(
point.time
)}</p></div>`,
});
if (!this.trailEntities[`${this.selectedPerson}_point_${index}`]) {
this.trailEntities[`${this.selectedPerson}_point_${index}`] =
pointEntity;
}
}
});
},
// 清除轨迹
clearTrails() {
for (let key in this.trailEntities) {
this.viewer.entities.remove(this.trailEntities[key]);
// 选择人员显示对应人员位置
}
this.trailEntities = {};
},
/**
* 初始化Cesium地图
*/
......@@ -629,16 +348,6 @@ export default {
center: Cesium.Cartesian3.fromDegrees(104.06, 30.67, 10000000),
});
// 设置相机视图
// this.viewer.camera.setView({
// destination: Cesium.Cartesian3.fromDegrees(104.06, 30.67, 10000000), // 经度、纬度、高度
// orientation: {
// heading: Cesium.Math.toRadians(0.0), // 方向
// pitch: Cesium.Math.toRadians(-90.0), // 倾斜角度
// roll: 0.0, // 翻滚角度
// },
// });
this.viewer.scene.camera.setView({
// 视角-环翠
duration: 1,
......@@ -806,58 +515,58 @@ export default {
},
createPersonModel() {
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.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,
heightReference: Cesium.HeightReference.CLAMP_TO_3D_TILE,
},
description: `<div><h4>${item.perName}${item.status}</h4></div>`,
fixedFrame: Cesium.Transforms.eastNorthUpToFixedFrame(position),
});
entity.info = item; // 添加 info 属性
this.bgEntities[item.perName] = entity; // 存储新实体
}
// 从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,
heightReference: Cesium.HeightReference.CLAMP_TO_3D_TILE,
},
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);
}
});
// }, 500000); // 每10秒刷新一次
// 如果已经选择了人员，更新其位置和轨迹
if (this.selectedPerson) {
this.updatePersonPositionByTimeIndex(this.currentTimeIndex);
}
});
}, 10000); // 每10秒刷新一次
}
},
......@@ -899,125 +608,11 @@ export default {
});
}
// 初始化轨迹数据（如果尚未初始化）
if (Object.keys(this.personTrajectories).length === 0) {
this.initPersonTrajectories();
}
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;
},
// 绘制趋势图
drawTrendChart() {
const container = document.getElementById("trendChart");
if (!container) return;
const canvas = document.createElement("canvas");
canvas.width = container.clientWidth;
canvas.height = container.clientHeight;
container.appendChild(canvas);
const ctx = canvas.getContext("2d");
// 模拟数据
const data = [
12, 19, 15, 25, 32, 28, 22, 35, 29, 21, 18, 24, 27, 31, 26, 29, 33, 38,
35, 30, 28, 25, 22, 27,
];
const labels = Array.from({ length: 24 }, (_, i) => `${i}h`);
// 设置画布大小和边距
const padding = { top: 20, right: 20, bottom: 30, left: 40 };
const width = canvas.width - padding.left - padding.right;
const height = canvas.height - padding.top - padding.bottom;
// 计算数据范围
const maxValue = Math.max(...data);
const minValue = Math.min(...data);
const valueRange = maxValue - minValue || 1;
// 绘制背景
ctx.fillStyle = "rgba(0, 20, 40, 0.5)";
ctx.fillRect(padding.left, padding.top, width, height);
// 绘制网格线
ctx.strokeStyle = "rgba(100, 150, 200, 0.3)";
ctx.lineWidth = 1;
// 垂直网格线
for (let i = 0; i <= 24; i++) {
const x = padding.left + (width / 24) * i;
ctx.beginPath();
ctx.moveTo(x, padding.top);
ctx.lineTo(x, padding.top + height);
ctx.stroke();
}
// 水平网格线
for (let i = 0; i <= 5; i++) {
const y = padding.top + (height / 5) * i;
ctx.beginPath();
ctx.moveTo(padding.left, y);
ctx.lineTo(padding.left + width, y);
ctx.stroke();
}
// 绘制趋势线
ctx.strokeStyle = "#00ffcc";
ctx.lineWidth = 2;
ctx.beginPath();
data.forEach((value, index) => {
const x = padding.left + (width / 23) * index;
const y =
padding.top + height - ((value - minValue) / valueRange) * height;
if (index === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
});
ctx.stroke();
// 绘制数据点
ctx.fillStyle = "#00ffcc";
data.forEach((value, index) => {
const x = padding.left + (width / 23) * index;
const y =
padding.top + height - ((value - minValue) / valueRange) * height;
ctx.beginPath();
ctx.arc(x, y, 3, 0, Math.PI * 2);
ctx.fill();
});
// 绘制时间标签
ctx.fillStyle = "#ffffff";
ctx.font = "10px Arial";
ctx.textAlign = "center";
for (let i = 0; i < labels.length; i += 3) {
const x = padding.left + (width / 23) * i;
const y = padding.top + height + 15;
ctx.fillText(labels[i], x, y);
}
},
drawTrendChart() {},
// 处理窗口大小变化
handleResize() {
......
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