|
@@ -102,7 +102,7 @@ export default {
|
|
center: [],
|
|
center: [],
|
|
viewer2D: null,
|
|
viewer2D: null,
|
|
viewer3D: null,
|
|
viewer3D: null,
|
|
- dimension: 2,
|
|
|
|
|
|
+ dimension: 5,
|
|
mousevalue: null,
|
|
mousevalue: null,
|
|
// 选中的点
|
|
// 选中的点
|
|
selectedMarker: null,
|
|
selectedMarker: null,
|
|
@@ -118,7 +118,8 @@ export default {
|
|
handler3D: null,
|
|
handler3D: null,
|
|
handler2D: null,
|
|
handler2D: null,
|
|
image: null,
|
|
image: null,
|
|
- modeltooltip: null
|
|
|
|
|
|
+ modeltooltip: null,
|
|
|
|
+ id: 1
|
|
};
|
|
};
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
@@ -567,6 +568,7 @@ export default {
|
|
markLocation(latitude, longitude) {
|
|
markLocation(latitude, longitude) {
|
|
const position = this.Cesium.Cartesian3.fromDegrees(longitude, latitude);
|
|
const position = this.Cesium.Cartesian3.fromDegrees(longitude, latitude);
|
|
this.viewer2D.entities.add({
|
|
this.viewer2D.entities.add({
|
|
|
|
+ id: this.id,
|
|
position: position,
|
|
position: position,
|
|
point: {
|
|
point: {
|
|
pixelSize: 12, // 调整点的大小,可以增大点的像素大小
|
|
pixelSize: 12, // 调整点的大小,可以增大点的像素大小
|
|
@@ -580,6 +582,7 @@ export default {
|
|
}
|
|
}
|
|
});
|
|
});
|
|
this.viewer3D.entities.add({
|
|
this.viewer3D.entities.add({
|
|
|
|
+ id: this.id,
|
|
position: position,
|
|
position: position,
|
|
point: {
|
|
point: {
|
|
pixelSize: 12, // 调整点的大小,可以增大点的像素大小
|
|
pixelSize: 12, // 调整点的大小,可以增大点的像素大小
|
|
@@ -592,6 +595,7 @@ export default {
|
|
pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移,向下偏移20像素
|
|
pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移,向下偏移20像素
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
+ this.id++;
|
|
},
|
|
},
|
|
// 从鼠标点击事件获取坐标
|
|
// 从鼠标点击事件获取坐标
|
|
getCoordinatesFromEvent(event) {
|
|
getCoordinatesFromEvent(event) {
|
|
@@ -650,7 +654,6 @@ export default {
|
|
for (const entity of this.viewer2D.entities.values) {
|
|
for (const entity of this.viewer2D.entities.values) {
|
|
if (pickedEntity.id.id === entity.id) {
|
|
if (pickedEntity.id.id === entity.id) {
|
|
this.selectedMarker = entity;
|
|
this.selectedMarker = entity;
|
|
- console.log(this.selectedMarker.id);
|
|
|
|
this.oldPosition = pickedEntity.id.position;
|
|
this.oldPosition = pickedEntity.id.position;
|
|
// 显示提示
|
|
// 显示提示
|
|
this.selectModel("pointer", null, "右键取消");
|
|
this.selectModel("pointer", null, "右键取消");
|
|
@@ -658,6 +661,29 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} else if (this.selectedMarker && this.modeltooltip === "右键取消") {
|
|
} else if (this.selectedMarker && this.modeltooltip === "右键取消") {
|
|
|
|
+ const material = new this.Cesium.PolylineArrowMaterialProperty(this.selectedMarker.point.color);
|
|
|
|
+ this.viewer2D.entities.add({
|
|
|
|
+ polyline: {
|
|
|
|
+ positions: [
|
|
|
|
+ this.oldPosition._value,
|
|
|
|
+ this.viewer2D.entities.getById(this.selectedMarker.id).position._value
|
|
|
|
+ ],
|
|
|
|
+ width: 5, // 设置线的宽度
|
|
|
|
+ material: material,
|
|
|
|
+ followSurface: false // 设置为false,使连线保持在固定的高度,不会贴地显示
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ this.viewer3D.entities.add({
|
|
|
|
+ polyline: {
|
|
|
|
+ positions: [
|
|
|
|
+ this.oldPosition._value,
|
|
|
|
+ this.viewer3D.entities.getById(this.selectedMarker.id).position._value
|
|
|
|
+ ],
|
|
|
|
+ width: 5, // 设置线的宽度
|
|
|
|
+ material: material,
|
|
|
|
+ followSurface: false // 设置为false,使连线保持在固定的高度,不会贴地显示
|
|
|
|
+ }
|
|
|
|
+ });
|
|
this.selectedMarker = null;
|
|
this.selectedMarker = null;
|
|
this.selectModel();
|
|
this.selectModel();
|
|
}
|
|
}
|
|
@@ -668,21 +694,90 @@ export default {
|
|
const screenPosition = new this.Cesium.Cartesian2(event.endPosition.x, event.endPosition.y);
|
|
const screenPosition = new this.Cesium.Cartesian2(event.endPosition.x, event.endPosition.y);
|
|
const position = this.viewer2D.scene.camera.pickEllipsoid(screenPosition);
|
|
const position = this.viewer2D.scene.camera.pickEllipsoid(screenPosition);
|
|
this.viewer2D.entities.getById(this.selectedMarker.id).position = position;
|
|
this.viewer2D.entities.getById(this.selectedMarker.id).position = position;
|
|
|
|
+ this.viewer3D.entities.getById(this.selectedMarker.id).position = position;
|
|
}
|
|
}
|
|
}, this.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
}, this.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
// 监听右键
|
|
// 监听右键
|
|
- this.handler2D.setInputAction((event) => {
|
|
|
|
|
|
+ this.handler2D.setInputAction(() => {
|
|
if (this.selectedMarker && this.modeltooltip === "右键取消") {
|
|
if (this.selectedMarker && this.modeltooltip === "右键取消") {
|
|
this.viewer2D.entities.getById(this.selectedMarker.id).position = this.oldPosition;
|
|
this.viewer2D.entities.getById(this.selectedMarker.id).position = this.oldPosition;
|
|
this.selectedMarker = null;
|
|
this.selectedMarker = null;
|
|
this.selectModel();
|
|
this.selectModel();
|
|
}
|
|
}
|
|
}, this.Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
|
}, this.Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
|
|
|
+ this.handler3D.setInputAction((event) => {
|
|
|
|
+ if (!this.selectedMarker && !this.modeltooltip) {
|
|
|
|
+ const screenPosition = new this.Cesium.Cartesian2(event.position.x, event.position.y);
|
|
|
|
+ const pickedEntity = this.viewer3D.scene.pick(screenPosition);
|
|
|
|
+ if (this.Cesium.defined(pickedEntity)) {
|
|
|
|
+ for (const entity of this.viewer3D.entities.values) {
|
|
|
|
+ if (pickedEntity.id.id === entity.id) {
|
|
|
|
+ this.selectedMarker = entity;
|
|
|
|
+ this.oldPosition = pickedEntity.id.position;
|
|
|
|
+ // 显示提示
|
|
|
|
+ this.selectModel("pointer", null, "右键取消");
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ } else if (this.selectedMarker && this.modeltooltip === "右键取消") {
|
|
|
|
+ const material = new this.Cesium.PolylineArrowMaterialProperty(this.selectedMarker.point.color);
|
|
|
|
+ this.viewer2D.entities.add({
|
|
|
|
+ polyline: {
|
|
|
|
+ positions: [
|
|
|
|
+ this.oldPosition._value,
|
|
|
|
+ this.viewer2D.entities.getById(this.selectedMarker.id).position._value
|
|
|
|
+ ],
|
|
|
|
+ width: 5, // 设置线的宽度
|
|
|
|
+ material: material,
|
|
|
|
+ followSurface: false // 设置为false,使连线保持在固定的高度,不会贴地显示
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ this.viewer3D.entities.add({
|
|
|
|
+ polyline: {
|
|
|
|
+ positions: [
|
|
|
|
+ this.oldPosition._value,
|
|
|
|
+ this.viewer3D.entities.getById(this.selectedMarker.id).position._value
|
|
|
|
+ ],
|
|
|
|
+ width: 5, // 设置线的宽度
|
|
|
|
+ material: material,
|
|
|
|
+ followSurface: false // 设置为false,使连线保持在固定的高度,不会贴地显示
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ this.selectedMarker = null;
|
|
|
|
+ this.selectModel();
|
|
|
|
+ }
|
|
|
|
+ }, this.Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
|
+ // 监听鼠标移动事件,用于移动标记点
|
|
|
|
+ this.handler3D.setInputAction((event) => {
|
|
|
|
+ if (this.selectedMarker && this.modeltooltip === "右键取消") {
|
|
|
|
+ const screenPosition = new this.Cesium.Cartesian2(event.endPosition.x, event.endPosition.y);
|
|
|
|
+ const position = this.viewer3D.scene.camera.pickEllipsoid(screenPosition);
|
|
|
|
+ this.viewer2D.entities.getById(this.selectedMarker.id).position = position;
|
|
|
|
+ this.viewer3D.entities.getById(this.selectedMarker.id).position = position;
|
|
|
|
+ }
|
|
|
|
+ }, this.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
|
|
+ // 监听右键
|
|
|
|
+ this.handler3D.setInputAction(() => {
|
|
|
|
+ if (this.selectedMarker && this.modeltooltip === "右键取消") {
|
|
|
|
+ this.viewer3D.entities.getById(this.selectedMarker.id).position = this.oldPosition;
|
|
|
|
+ this.selectedMarker = null;
|
|
|
|
+ this.selectModel();
|
|
|
|
+ }
|
|
|
|
+ }, this.Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
<style scoped>
|
|
<style scoped>
|
|
|
|
+::v-deep .cesium-infoBox {
|
|
|
|
+ display: none !important;
|
|
|
|
+}
|
|
|
|
+::v-deep .cesium-infoBox-bodyless {
|
|
|
|
+ display: none !important;
|
|
|
|
+}
|
|
|
|
+::v-deep .cesium-infoBox-visible {
|
|
|
|
+ display: none !important;
|
|
|
|
+}
|
|
.modeltooltip {
|
|
.modeltooltip {
|
|
position: absolute;
|
|
position: absolute;
|
|
padding: 5px;
|
|
padding: 5px;
|