1.MsMapLabelForm新增 重新定位

src/views/military/modules/earthMap/msMapLabel/components/MsMapLabelForm.vue

@@ -13,14 +13,14 @@
           </a-form-item>
         </a-col>
         <a-col :span="12">
-          <a-form-item label="经度" v-bind="validateInfos.labelLon">
+          <a-form-item label="快速定位">
-            <a-input-number v-model:value="formData.labelLon" placeholder="请输入经度" :disabled="disabled"
+            <div class="centerText"><img :src="locationPng" class="dwImg" @click="mapShow" /></div>
-              style="width: 100%;"></a-input-number>
           </a-form-item>
         </a-col>
+
         <a-col :span="12">
-          <a-form-item label="纬度" v-bind="validateInfos.labelLat">
+          <a-form-item label="经度" v-bind="validateInfos.labelLon">
-            <a-input-number v-model:value="formData.labelLat" placeholder="请输入纬度" :disabled="disabled"
+            <a-input-number v-model:value="formData.labelLon" placeholder="请输入经度" :disabled="disabled"
               style="width: 100%;"></a-input-number>
           </a-form-item>
         </a-col>
@@ -31,8 +31,9 @@
           </a-form-item>
         </a-col>
         <a-col :span="12">
-          <a-form-item label="图片路径" v-bind="validateInfos.labelImgUrl">
+          <a-form-item label="纬度" v-bind="validateInfos.labelLat">
-            <j-image-upload v-model:value="formData.labelImgUrl" :disabled="disabled"></j-image-upload>
+            <a-input-number v-model:value="formData.labelLat" placeholder="请输入纬度" :disabled="disabled"
+              style="width: 100%;"></a-input-number>
           </a-form-item>
         </a-col>
         <a-col :span="12">
@@ -43,12 +44,33 @@
         </a-col>
         <a-col :span="12">
           <a-form-item label="标志属性" v-bind="validateInfos.labelAttr">
-            <j-dict-select-tag v-model:value="formData.labelAttr" dictCode="ms_label_attr" :string-to-number="true"
+            <j-dict-select-tag v-model:value="formData.labelAttr" dictCode="ms_label_attr" 
               placeholder="请选择标志属性" :disabled="disabled" />
           </a-form-item>
         </a-col>
+        <a-col :span="12">
+          <a-form-item label="图片路径" v-bind="validateInfos.labelImgUrl">
+            <j-image-upload v-model:value="formData.labelImgUrl" :disabled="disabled"></j-image-upload>
+          </a-form-item>
+        </a-col>
       </a-row>
     </a-form>
+
+    <a-modal title="重新定位" :visible="mapVisible" @ok="earthMapOk" @cancel="destroyed" width="60vw" destroyOnClose wrapClassName="EarthMap">
+      <a-row style="height: 60vh;">
+        <a-col :span="24">
+          <EarthComp 
+            ref="earth"
+            :enablePointer="true"
+            :listenMouseHandlerSenceOpen="true"
+            @checkPosition="checkPositionCache"
+          />
+        </a-col>
+      </a-row>
+    </a-modal>
+
+
+
   </a-spin>
 </template>
 
@@ -61,7 +83,12 @@
   import { getValueType } from '/@/utils';
   import { saveOrUpdate } from '../MsMapLabel.api';
   import { Form } from 'ant-design-vue';
-  
+  import locationPng from '@/assets/images/getLocation.png';
+  import EarthComp from '@/views/earthMap/edit/EarthComp.vue';
+
+  //缓存subObject数据，点击ok 则将执行checkPosition
+  let subObjectCache: any= ref({});
+
   const props = defineProps({
     formDisabled: { type: Boolean, default: false },
     formData: { type: Object, default: ()=>{} },
@@ -167,11 +194,67 @@
       });
   }
 
+  // 弹窗地图框属性
+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
+  })
+}
+// 关闭地图时设置，视角位置，视距信息
+const checkPosition = function (position, cameraPosition, rotation, fov) {
+  // console.log(position, cameraPosition, rotation, fov);
+  
+  formData.labelLon = window.Cesium.Math.toDegrees(position[0]);
+  formData.labelLat = window.Cesium.Math.toDegrees(position[1]);
+  formData.labelHeight = position[2];
+
+  // subObject.value.cameraLon = cameraPosition[0];
+  // subObject.value.cameraLat = cameraPosition[1];
+  // subObject.value.cameraAltitude = cameraPosition[2];
+
+  // subObject.value.rotationX = rotation[0];
+  // subObject.value.rotationY = rotation[1];
+  // subObject.value.rotationZ = rotation[2];
+
+  // subObject.value.viewDistance = fov;
+};
+
+function checkPositionCache(position, cameraPosition, rotation, fov){
+  console.log("接收到了",position);
+  subObjectCache.value.position = position
+  subObjectCache.value.cameraPosition = cameraPosition;
+  subObjectCache.value.rotation = rotation;
+  subObjectCache.value.fov = fov;
+}
+function earthMapOk(){
+  checkPosition(
+    subObjectCache.value.position,
+    subObjectCache.value.cameraPosition,
+    subObjectCache.value.rotation,
+    subObjectCache.value.fov
+  )
+  destroyed()
+}
+
+
+
 
   defineExpose({
     add,
     edit,
     submitForm,
+    mapVisible,
+    earth,
+    destroyed,
+    earthMapOk,
+    checkPosition
   });
 </script>
 
@@ -181,4 +264,10 @@
     overflow-y: auto;
     padding: 24px 24px 24px 24px;
   }
+  .dwImg {
+  width: 10%;
+  height: 10%;
+  margin-left: 3%;
+  cursor: pointer !important;
+}
 </style>