Просмотр исходного кода

feat:弹窗根据坐标点定位

liu_w601 3 месяцев назад
Родитель
Сommit
877ffb858e

BIN
src/assets/image/common/csq.png


+ 3 - 19
src/views/components/layerList/index.vue

@@ -434,18 +434,7 @@ export default {
           },
           { template: false, offsetY: 0 }
         )
-      } else if (['3-1', '3-2', '3-3'].includes(layer.id)) {
-        // layer.bindPopup(
-        //   function (event) {
-        //     window.closePopupA = function () {
-        //       event.graphic.closePopup()
-        //     }
-        //     const popupHtml = getSitePopup(layer.id)
-        //     return popupHtml
-        //   },
-        //   { template: false, offsetY: 0 }
-        // )
-      }
+      } 
     },
     getMonitorData() {
       graphicsLayer = new this.mars3d.layer.GraphicLayer()
@@ -530,11 +519,6 @@ export default {
         兴平市团结采砂区: [108.360076, 34.20512, 100],
         兴平市汤坊龙兴1区采砂区: [108.474301, 34.21255, 100]
       }
-      const lengthList = {
-        兴平市宜空采砂区: 300,
-        兴平市团结采砂区: 500,
-        兴平市汤坊龙兴1区采砂区: 600
-      }
       if (csqGraphicsLayer) {
         csqGraphicsLayer.show = true
       } else {
@@ -545,8 +529,8 @@ export default {
       const graphic = new this.mars3d.graphic.BillboardEntity({
         position: position,
         style: {
-          image: require('@/assets/image/common/camera.png'),
-          scale: 0.8,
+          image: require('@/assets/image/common/csq.png'),
+          scale: 1,
           horizontalOrigin: this.Cesium.HorizontalOrigin.CENTER,
           verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM
         }

+ 7 - 10
src/views/csq-popup/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="csq-container" v-if="visible">
+  <div class="csq-container" v-if="visible" :style="popupStyle">
     <div class="csq-popup-title">
       <span class="title-text">{{ title }}</span>
       <img src="@/assets/image/common/close.png" style="cursor: pointer" alt="" @click="closeModal" />
@@ -29,25 +29,22 @@ export default {
   },
   mounted() {
     this.$globalEventBus.$on('clickCsqModal', (data) => {
-      this.visible = true
+      // this.visible = true
       this.title = data.title
+      this.showPopup(data)
     })
   },
   methods: {
     showPopup(data) {
       // 将笛卡尔坐标转换为屏幕坐标
-      const scene = window.map.scene
-      const cartesian = data.position
-      console.info(cartesian)
-       const cartesian3 = this.mars3d.LatLngPoint.fromArray([data.position.lng, data.position.lat, data.position.alt]).toCartesian();
-          const canvasPosition = this.mars3d.SceneTransforms.wgs84ToWindowCoordinates(scene, cartesian3);
-      // const canvasPosition = this.mars3d.PointTrans.toWindowCoordinates(scene, cartesian)
-      console.info(canvasPosition)
+      const cartesian = this.Cesium.Cartesian3.fromDegrees(data.position[0],data.position[1],data.position[2])
+      const canvasPosition = this.Cesium.SceneTransforms.worldToWindowCoordinates (window.map.scene, cartesian);
+       console.info(canvasPosition)
       if (canvasPosition) {
         this.popupStyle = {
           position: 'absolute',
           left: `${canvasPosition.x}px`,
-          top: `${canvasPosition.y - 100}px`, // 向上偏移,避免遮挡点位
+          top: `${canvasPosition.y -400}px`, // 向上偏移,避免遮挡点位
           'z-index': 1000
         }
 

+ 4 - 4
src/views/hydrological-station/jcInfo.vue

@@ -75,7 +75,7 @@
           <el-input v-model="form.maxElevationYesterday" type="number" :min="380" :max="420"> </el-input><span>m</span>
         </el-form-item>
         <el-form-item label="1小时雨量:"> <el-input v-model="form.precipitationOneH" type="number" :min="0"> </el-input> <span>mm</span> </el-form-item>
-        <el-form-item label="当天雨量:"> <el-input v-model="form.precipitationToday" type="number" :min="0"> </el-input> <span>mm</span> </el-form-item>
+        <!-- <el-form-item label="当天雨量:"> <el-input v-model="form.precipitationToday" type="number" :min="0"> </el-input> <span>mm</span> </el-form-item> -->
         <el-form-item label="实时流量:" prop="realTimeDischarge"> <el-input v-model="form.realTimeDischarge" type="number" :min="0"> </el-input> <span>m³/s</span> </el-form-item>
         <el-form-item label="实时流速:"> <el-input v-model="form.realTimeVelocity" type="number" :min="0"> </el-input><span>m/s</span> </el-form-item>
       </el-form>
@@ -129,7 +129,7 @@ export default {
         realTimeElevation: '',
         maxElevationYesterday: '',
         precipitationOneH: '',
-        precipitationToday: '',
+        // precipitationToday: '',
         realTimeDischarge: '',
         realTimeVelocity: ''
       },
@@ -238,7 +238,7 @@ export default {
         realTimeElevation: '',
         maxElevationYesterday: '',
         precipitationOneH: '',
-        precipitationToday: '',
+        // precipitationToday: '',
         realTimeDischarge: '',
         realTimeVelocity: ''
       }
@@ -307,7 +307,7 @@ export default {
         realTimeElevation: '',
         maxElevationYesterday: '',
         precipitationOneH: '',
-        precipitationToday: '',
+        // precipitationToday: '',
         realTimeDischarge: '',
         realTimeVelocity: ''
       }