@@ -148,6 +151,7 @@
props: {
flyTo: Function,
setLabelStatus: Function,
+ all: Boolean,
},
components: {
Window,
@@ -231,7 +235,7 @@
});
onMounted(() => {
- // console.log("asdsdfsdfsdfsdfsdf");
+ // console.log("toolbar初始化");
getEventData();
window.getEventData = getEventData;
{
@@ -259,6 +263,12 @@
drawShapeShow.value = res.show;
drawShapePackage.value = res;
});
+ //调用创建/编辑区域 addArea方法
+ $mitt.on('addAreaHandler', function (res: any) {
+ // console.log("addAreaHandlerres",res);
+ addArea(res)
+ });
+
}
//数据绑定
//disposers 用来收集资源销毁函数，并在析构时自动调用！
@@ -1086,8 +1096,10 @@
function addRadar() {
addRadarComShow.value = true;
}
- // 添加区域
- function addArea() {
+ // 添加区域, addAreaHandler标识 后台区域管理调用
+ function addArea(addAreaHandler = null) {
+ // console.log("添加区域",addAreaHandler);
+
$mitt.emit('drawShapeShow', { show: true, title: '区域创建工具', from: 'addArea' });
$mitt.on('addAreaFinished', (t: any) => {
// console.log('addAreaFinished', t);
@@ -1119,7 +1131,7 @@
*
*/
nextTick(() => {
- addPolyline(positions);
+ addPolyline(positions,addAreaHandler);
});
} else {
}
@@ -1132,8 +1144,9 @@
}
/**
* @params 需要调用 addArea 方法进行绘图，获取坐标点position
+ * @params addAreaHandler标识 后台区域管理调用
*/
- function addPolyline(positions: any = null) {
+ function addPolyline(positions: any = null, addAreaHandler =null) {
// console.log('positions', positions);
// 关闭此窗体
@@ -1149,6 +1162,12 @@
// console.log('currentModel', currentModel);
// 获取地图ui对象
const earthUI = window.$uia;
+ // console.log("addAreaHandler",addAreaHandler);
+ //后台区域管理调用，直接return终止
+ if(addAreaHandler){
+ $mitt.emit('toMsMapLineForm',currentModel)
+ return
+ }
// 打开一个区域编辑ui窗体
earthUI.showPropertyWindow(currentModel);
nextTick(() => {
@@ -1337,6 +1356,9 @@
window._uavRealTimePath = undefined;
window._uavPrimitive = undefined;
$mitt.off('warnInfoMan');
+ $mitt.off('addAreaFinished');
+ $mitt.off('drawShapeShow');
+ $mitt.off('addAreaHandler');
});
return {
@@ -1423,7 +1445,7 @@
.barbox {
left: 0 !important;
top: 0 !important;
- height: 600px !important;
+ /* height: 600px !important; */
width: 65px !important;
}
diff --git a/src/utils/earthMap/listenMouseHandlerSence.ts b/src/utils/earthMap/listenMouseHandlerSence.ts
index 59b8adc..3983334 100644
--- a/src/utils/earthMap/listenMouseHandlerSence.ts
+++ b/src/utils/earthMap/listenMouseHandlerSence.ts
@@ -30,7 +30,7 @@ export default function listenMouseHandlerSence(enablePointer = false, that) {
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
window.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
);
- console.log("enablePointer", enablePointer);
+ // console.log("enablePointer", enablePointer);
if (enablePointer) {
viewer.cesiumWidget.screenSpaceEventHandler.setInputAction((event) => {
diff --git a/src/views/earthMap/edit/EarthComp.vue b/src/views/earthMap/edit/EarthComp.vue
index f654d2c..d05dccc 100644
--- a/src/views/earthMap/edit/EarthComp.vue
+++ b/src/views/earthMap/edit/EarthComp.vue
@@ -68,7 +68,7 @@
/>
-
+
{
+ $mitt.emit('addAreaHandler', this.addAreaHandler);
+ })
+ }
+
// 控制子元素的显示或者隐藏
showOrHideChild(clickNode, earthUI, parentChecked) {
const childs = clickNode.children;
@@ -719,6 +736,11 @@
this.cameraPositionChange(this);
});
+ // 飞入方法
+ await this.fly();
+ //创建工具栏
+ this.toolbarShow = true;
+
//加载地图实时资源（无人机、车辆、人员、巡逻路线等）
// createRealTimeObj(earthUI)
@@ -729,15 +751,12 @@
//监听mitt
if (this.PropsListenMittHandlerOpen) this.listenMittHandler();
-
- // 飞入方法
- await this.fly();
-
//加载地图线路资源
if (this.PropsCreateBBHLineOpen) await this.createBBHLine();
- //创建工具栏
- this.toolbarShow = true;
+ //使用后台区域管理事件 绘制区域等操作
+ if (this.addAreaHandler) this.areaHandler()
+
});
}
diff --git a/src/views/military/modules/earthMap/camera/components/MsCameraSiteForm.vue b/src/views/military/modules/earthMap/camera/components/MsCameraSiteForm.vue
index 3272a8c..22b9f17 100644
--- a/src/views/military/modules/earthMap/camera/components/MsCameraSiteForm.vue
+++ b/src/views/military/modules/earthMap/camera/components/MsCameraSiteForm.vue
@@ -35,6 +35,21 @@
+
{
+ mapVisible.value = false
+ })
+
+}
+
defineExpose({
add,
edit,
submitForm,
+ earth,
+ destroyed
});
diff --git a/src/views/military/modules/earthMap/msMapLine/components/MsMapLineForm.vue b/src/views/military/modules/earthMap/msMapLine/components/MsMapLineForm.vue
index cde0963..7a5b826 100644
--- a/src/views/military/modules/earthMap/msMapLine/components/MsMapLineForm.vue
+++ b/src/views/military/modules/earthMap/msMapLine/components/MsMapLineForm.vue
@@ -5,7 +5,8 @@
-
+
+
@@ -81,6 +82,11 @@
:disabled="disabled" />
+
+
+
+
+
@@ -88,6 +94,16 @@
+
+
+
+
+
+
+
+
+
+
@@ -104,15 +120,22 @@ import { Form } from 'ant-design-vue';
import { ColorPicker } from "vue3-colorpicker";
import "vue3-colorpicker/style.css";
import { useUserStore } from '/@/store/modules/user';
+import EarthComp from '@/views/earthMap/edit/EarthComp.vue';
+import locationPng from '@/assets/images/getLocation.png';
+import $mitt from '@/utils/earthMap/mitt';
+import { onBeforeUnmount } from 'vue';
+import { toRaw } from 'vue';
const userStore = useUserStore();
//远程树
const sceneIdTree = () => defHttp.get
-({ url: "/military/msMapScene/queryTreeByCode",
- params:{
- sceneId: userStore.userInfo?.sceneId + "*"
- } }).then(res=>{ return [res];})
-;
+ ({
+ url: "/military/msMapScene/queryTreeByCode",
+ params: {
+ sceneId: userStore.userInfo?.sceneId + "*"
+ }
+ }).then(res => { return [res]; })
+ ;
const props = defineProps({
formDisabled: { type: Boolean, default: false },
@@ -149,7 +172,7 @@ const validatorRules = {
materialType: [{ required: true, message: '请选择模型材质类型!' },],
interpolation: [{ required: true, message: '请选择插值方式!' },],
color: [{ required: true, message: '请输入颜色!' },],
- intervalColor: [{ required: true, message: '请输入间隔颜色!' },],
+ // intervalColor: [{ required: true, message: '请输入间隔颜色!' },],
cycleFrame: [{ required: true, message: '请输入循环周期!' },],
isLoop: [{ required: true, message: '请选择是否首尾相连!' },],
isDepthCheck: [{ required: true, message: '请选择是否深度检测!' },],
@@ -239,22 +262,33 @@ function edit(record) {
//赋值
Object.assign(formData, record);
if (formData.color) {
- let color = formData.color
- color = color.replace("[", '')
- color = color.replace("]", '')
- color = color.split(",")
- pureColor.value = { "r": color[0] * 255, "g": color[1] * 255, "b": color[2] * 255, "a": color[3] }
+ colorPickerChange(formData.color,pureColor)
+ // let color = formData.color
+ // color = color.replace("[", '')
+ // color = color.replace("]", '')
+ // color = color.split(",")
+ // pureColor.value = { "r": color[0] * 255, "g": color[1] * 255, "b": color[2] * 255, "a": color[3] }
}
if (formData.intervalColor) {
- let color = formData.intervalColor
- color = color.replace("[", '')
- color = color.replace("]", '')
- color = color.split(",")
- intervalColor.value = { "r": color[0] * 255, "g": color[1] * 255, "b": color[2] * 255, "a": color[3] }
+ colorPickerChange(formData.intervalColor,intervalColor)
+ // let color = formData.intervalColor
+ // color = color.replace("[", '')
+ // color = color.replace("]", '')
+ // color = color.split(",")
+ // intervalColor.value = { "r": color[0] * 255, "g": color[1] * 255, "b": color[2] * 255, "a": color[3] }
}
});
}
+//整理颜色选择器
+function colorPickerChange(color, colorStr) {
+ // console.log('colorStr',colorStr);
+ color = color.replace("[", '')
+ color = color.replace("]", '')
+ color = color.split(",")
+ colorStr.value = { "r": color[0] * 255, "g": color[1] * 255, "b": color[2] * 255, "a": color[3] }
+}
+
/**
* 提交数据
*/
@@ -293,11 +327,113 @@ async function submitForm() {
});
}
+// 弹窗地图框属性
+const mapVisible = ref(false);
+const mapShow = function () {
+ mapVisible.value = true;
+};
+const earth = ref()
+function destroyed() {
+ // console.log("earth", earth.value);
+ earth.value.destroy();
+ nextTick(() => {
+ mapVisible.value = false
+ })
+}
+
+//赋值
+function areaAssign(currentModel) {
+ // 模型名称
+ // formData.name = currentModel.name
+ // 线段编码
+ formData.lineCode = currentModel.guid
+ // 首尾相连属性
+ formData.isLoop = Number(currentModel.loop)
+ // 深度检查
+ formData.isDepthCheck = Number(currentModel.depthTest)
+ // 宽度
+ formData.width = currentModel.width
+ // 插值方式
+ formData.interpolation = currentModel.arcType
+ // 路径数组
+ formData.positions = JSON.stringify(currentModel.positions)
+ // 材质类型
+ switch (currentModel.material.type) {
+ // 实线
+ case 'XbsjColorMaterial':
+ // 实线材质0
+ formData.materialType = 0;
+ // 线段颜色
+ formData.color = JSON.stringify(currentModel.material.XbsjColorMaterial.color);
+ // 以下为没有属性，所以赋予默认值
+ formData.intervalColor = null;
+ formData.dashLength = 0;
+ formData.dashStyle = 0;
+ break;
+ // 虚线
+ case 'XbsjPolylineDashMaterial':
+ // 虚线材质1
+ formData.materialType = 1;
+ // 线段颜色
+ formData.color = JSON.stringify(currentModel.material.XbsjPolylineDashMaterial.color);
+ // 间隔颜色
+ formData.intervalColor = JSON.stringify(currentModel.material.XbsjPolylineDashMaterial.gapColor);
+ // 虚线长度
+ formData.dashLength = currentModel.material.XbsjPolylineDashMaterial.dashLength;
+ // 虚线样式
+ formData.dashStyle = currentModel.material.XbsjPolylineDashMaterial.dashPattern;
+ break;
+ // 箭头线
+ case 'XbsjPolylineArrowMaterial':
+ // 箭头线2
+ formData.materialType = 2;
+ // 线段颜色
+ formData.color = JSON.stringify(currentModel.material.XbsjPolylineArrowMaterial.color);
+ // 以下为没有的属性
+ formData.intervalColor = null;
+ formData.dashLength = 0;
+ formData.dashStyle = 0;
+ break;
+ // 轨迹线
+ case 'XbsjODLineMaterial':
+ // 轨迹线
+ formData.materialType = 3;
+ // 线段颜色
+ formData.color = JSON.stringify(currentModel.material.XbsjODLineMaterial.color);
+ // 没有的属性
+ formData.intervalColor = null;
+ formData.dashLength = 0;
+ formData.dashStyle = 0;
+ // 循环周期
+ formData.cycleFrame = currentModel.material.XbsjODLineMaterial.totoalFrameCount;
+ break;
+ }
+ //赋值颜色选择器
+ colorPickerChange(formData.color,pureColor)
+ if(formData.intervalColor)
+ colorPickerChange(formData.intervalColor,intervalColor)
+}
+onMounted(() => {
+ $mitt.on('toMsMapLineForm', (currentModel: any) => {
+ // console.log("currentModel", currentModel);
+ //赋值
+ areaAssign(currentModel)
+ })
+})
+
+onBeforeUnmount(() => {
+ $mitt.off('toMsMapLineForm');
+})
+
defineExpose({
add,
edit,
submitForm,
+ mapShow,
+ earth,
+ destroyed,
+
});
@@ -307,4 +443,11 @@ defineExpose({
overflow-y: auto;
padding: 24px 24px 24px 24px;
}
+
+.dwImg {
+ width: 10%;
+ height: 10%;
+ margin-left: 3%;
+ cursor: pointer !important;
+}
diff --git a/src/views/military/modules/earthMap/msMapLine/components/MsMapLineModal.vue b/src/views/military/modules/earthMap/msMapLine/components/MsMapLineModal.vue
index 0515834..770ab73 100644
--- a/src/views/military/modules/earthMap/msMapLine/components/MsMapLineModal.vue
+++ b/src/views/military/modules/earthMap/msMapLine/components/MsMapLineModal.vue
@@ -1,5 +1,5 @@
-
+
@@ -58,6 +58,7 @@
*/
function handleCancel() {
visible.value = false;
+
}
defineExpose({
diff --git a/src/views/military/modules/earthMap/scene/model/mapModel/EarthMapModal.vue b/src/views/military/modules/earthMap/scene/model/mapModel/EarthMapModal.vue
index 11776ec..e6ae9d3 100644
--- a/src/views/military/modules/earthMap/scene/model/mapModel/EarthMapModal.vue
+++ b/src/views/military/modules/earthMap/scene/model/mapModel/EarthMapModal.vue
@@ -358,6 +358,7 @@ const cssGrab = function (e) {
const addContainerClickListen = function () {
const dom = document.getElementById("earthContainer");
dom.addEventListener("mousedown", cssGrab, true)
+ // dom.addEventListener("mouseup", cssGrab)
}
// 模型跟随鼠标
const modelFollowMouse = (event) => {
@@ -398,6 +399,7 @@ const listenMouseHandler = function () {
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
window.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
);
+ // handler.setInputAction(modelFollowMouse, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
if (enablePointer.value) {
viewer.cesiumWidget.screenSpaceEventHandler.setInputAction((event) => {
@@ -470,7 +472,9 @@ const listenMouseHandler = function () {
cursorCss.value = `grab`
}, 2000);
}, window.Cesium.ScreenSpaceEventType.WHEEL);
-
+ // window.earth.onclick = function () {
+ // console.log(1);
+ // }
}
//添加地图上的监听事件-选取区域
const listenMouseHandlerSelect = function () {
@@ -692,6 +696,12 @@ const destroyCache = function () {
modelDw.value = false;
enableTile.value = false;
+ // window.CesiumGlobalHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+ // window.CesiumGlobalHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.LEFT_DOWN)
+ // window.CesiumGlobalHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.LEFT_UP)
+ // window.CesiumGlobalHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.MIDDLE_DOWN)
+ // window.CesiumGlobalHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.MIDDLE_UP)
+ // window.CesiumGlobalHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.WHEEL)
CModel.value && CModel.value.destroy();
earth && earth.destroy();