Skip to content

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

add：renyuan cheliang 围栏创建

parent 232cadf0
Show whitespace changes
Inline Side-by-side
Showing with 180 additions and 43 deletions
src/views/index-wl.vue
View file @ cde8d155
......@@ -592,29 +592,80 @@ export default {
// 开始创建电子围栏
startCreatingFence() {
if (!this.viewer) {
console.error("Cesium viewer 未初始化");
alert("地图初始化未完成，请稍后再试");
return;
}
this.isCreatingFence = true;
this.currentFencePoints = [];
// 清除之前的绘制
if (this.drawingEntity) {
this.viewer.entities.remove(this.drawingEntity);
this.drawingEntity = null;
}
// 添加鼠标点击事件监听
// 显示提示信息
alert(
`开始创建${
this.currentFenceType === "person" ? "人员" : "车辆"
}围栏，请在地图上点击至少3个点，右键完成绘制`
);
try {
// 保存原始的事件处理器，避免重复添加
if (this.originalLeftClickHandler) {
this.viewer.screenSpaceEventHandler.removeInputAction(
Cesium.ScreenSpaceEventType.LEFT_CLICK
);
this.viewer.screenSpaceEventHandler.removeInputAction(
Cesium.ScreenSpaceEventType.RIGHT_CLICK
);
}
// 添加鼠标点击事件监听 - 用于添加点
this.viewer.screenSpaceEventHandler.setInputAction((click) => {
const ray = this.viewer.camera.getPickRay(click.position);
const intersection = this.viewer.scene.globe.pick(
ray,
this.viewer.scene
);
// 首先尝试从3D模型上拾取点
let intersection;
if (this.tileset) {
intersection = this.viewer.scene.pickFromRay(ray, [this.tileset]);
}
// 如果没有从模型上拾取到点，则从地球上拾取
if (!intersection || !intersection.position) {
intersection = this.viewer.scene.globe.pick(ray, this.viewer.scene);
}
if (intersection) {
const cartographic = Cesium.Cartographic.fromCartesian(intersection);
const position = intersection.position || intersection;
const cartographic = Cesium.Cartographic.fromCartesian(position);
const longitude = Cesium.Math.toDegrees(cartographic.longitude);
const latitude = Cesium.Math.toDegrees(cartographic.latitude);
this.currentFencePoints.push({ lng: longitude, lat: latitude });
this.updateDrawingFence();
// 在点击位置添加临时标记点，便于用户看到已添加的点
const pointEntity = this.viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(longitude, latitude, 5),
point: {
pixelSize: 8,
color: Cesium.Color.YELLOW,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2,
heightReference: Cesium.HeightReference.CLAMP_TO_3D_TILE,
},
});
// 保存临时点实体，稍后清除
if (!this.temporaryPointEntities) {
this.temporaryPointEntities = [];
}
this.temporaryPointEntities.push(pointEntity);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
......@@ -623,21 +674,32 @@ export default {
if (this.currentFencePoints.length >= 3) {
this.completeCreatingFence();
} else {
alert("围栏至少需要3个点");
alert(
`围栏至少需要3个点，当前已添加${this.currentFencePoints.length}个点`
);
}
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
// 记录已经添加了事件处理器
this.originalLeftClickHandler = true;
} catch (error) {
console.error("添加事件监听失败:", error);
this.stopCreatingFence();
alert("创建围栏失败，请稍后重试");
}
},
// 更新绘制中的围栏
updateDrawingFence() {
if (!this.viewer || this.currentFencePoints.length < 2) return;
// 清除之前的绘制
if (this.drawingEntity) {
this.viewer.entities.remove(this.drawingEntity);
}
if (this.currentFencePoints.length < 2) return;
const positions = this.currentFencePoints.map((point) =>
Cesium.Cartesian3.fromDegrees(point.lng, point.lat, 1)
const positions = this.currentFencePoints.map(
(point) => Cesium.Cartesian3.fromDegrees(point.lng, point.lat, 3) // 稍微抬高一点，确保可见
);
// 闭合多边形
......@@ -645,24 +707,42 @@ export default {
positions.push(positions[0]);
}
// 创建绘制中的围栏实体
this.drawingEntity = this.viewer.entities.add({
polyline: {
positions: positions,
width: 2,
material: Cesium.Color.YELLOW,
clampToGround: true,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.8,
color: Cesium.Color.YELLOW,
}),
clampToGround: false,
heightReference: Cesium.HeightReference.CLAMP_TO_3D_TILE,
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 确保显示在模型上方
},
});
},
// 完成创建电子围栏
completeCreatingFence() {
const fenceName = prompt("请输入围栏名称:", "新建围栏");
if (!fenceName) return;
if (!this.viewer || this.currentFencePoints.length < 3) return;
// 获取围栏名称
const defaultName = `${
this.currentFenceType === "person" ? "人员" : "车辆"
}围栏${new Date().getTime()}`;
const fenceName = prompt("请输入围栏名称:", defaultName);
// 如果用户取消了输入，则停止创建
if (fenceName === null) {
this.stopCreatingFence();
return;
}
// 创建新围栏对象
const newFence = {
id: Date.now(),
name: fenceName,
name: fenceName || defaultName,
points: [...this.currentFencePoints],
type: this.currentFenceType,
color:
......@@ -675,33 +755,59 @@ export default {
: Cesium.Color.BLUE,
};
// 添加到对应类型的围栏数组
if (this.currentFenceType === "person") {
this.personFences.push(newFence);
} else {
this.vehicleFences.push(newFence);
}
// 渲染新创建的围栏
this.renderFence(newFence);
// 自动选中新创建的围栏
this.selectedFence = newFence;
console.log("围栏创建成功:", newFence);
// 停止创建状态
this.stopCreatingFence();
},
// 停止创建电子围栏
stopCreatingFence() {
this.isCreatingFence = false;
// 移除临时绘制的围栏
if (this.drawingEntity) {
if (this.drawingEntity && this.viewer) {
this.viewer.entities.remove(this.drawingEntity);
this.drawingEntity = null;
}
// 移除临时点标记
if (this.temporaryPointEntities && this.viewer) {
this.temporaryPointEntities.forEach((entity) => {
this.viewer.entities.remove(entity);
});
this.temporaryPointEntities = null;
}
// 移除事件监听
if (this.viewer) {
// 只移除我们添加的事件处理器
try {
this.viewer.screenSpaceEventHandler.removeInputAction(
Cesium.ScreenSpaceEventType.LEFT_CLICK
);
this.viewer.screenSpaceEventHandler.removeInputAction(
Cesium.ScreenSpaceEventType.RIGHT_CLICK
);
} catch (error) {
console.log("移除事件监听时出错:", error);
}
}
this.originalLeftClickHandler = null;
this.currentFencePoints = [];
},
// 选择围栏
......@@ -762,10 +868,12 @@ export default {
});
},
// 渲染单个围栏
// 改进的渲染围栏方法
renderFence(fence) {
const positions = fence.points.map(
(point) => Cesium.Cartesian3.fromDegrees(point.lng, point.lat, 2) // 稍微抬高一点，避免被地形遮挡
if (!this.viewer) return;
const positions = fence.points.map((point) =>
Cesium.Cartesian3.fromDegrees(point.lng, point.lat, 2)
);
// 选择边框颜色，如果是选中的围栏则使用高亮色
......@@ -774,6 +882,11 @@ export default {
? Cesium.Color.YELLOW
: fence.borderColor;
// 移除已存在的围栏实体
if (this.fenceEntities[fence.id]) {
this.viewer.entities.remove(this.fenceEntities[fence.id]);
}
// 创建多边形实体
const fenceEntity = this.viewer.entities.add({
polygon: {
......@@ -785,11 +898,35 @@ export default {
heightReference: Cesium.HeightReference.CLAMP_TO_3D_TILE,
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 确保始终显示在最前面
},
// 添加围栏名称标签
label: {
text: fence.name,
font: "14px sans-serif",
fillColor: Cesium.Color.WHITE,
backgroundColor: Cesium.Color.BLACK.withAlpha(0.7),
padding: new Cesium.Cartesian2(5, 5),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
position: this.calculatePolygonCenter(fence.points),
},
});
this.fenceEntities[fence.id] = fenceEntity;
},
// 计算多边形中心点，用于显示标签
calculatePolygonCenter(points) {
let sumLng = 0,
sumLat = 0;
points.forEach((point) => {
sumLng += point.lng;
sumLat += point.lat;
});
const centerLng = sumLng / points.length;
const centerLat = sumLat / points.length;
return Cesium.Cartesian3.fromDegrees(centerLng, centerLat, 5);
},
// 创建人员实体
createPersonEntities() {
this.personnelList.forEach((person) => {
......
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