鼠标点击查询数据信息

website/src/views/ghfxpj/gtkjfxyy/Mapview.vue

@@ -59,7 +59,7 @@ import JJCharts from "@/components/mapview/statistic/jingji/charts.vue";
 import ZTT from "@/components/mapview/ztt/zttzt.vue";
 import ZTTXQ from "@/components/mapview/ztt/zttxq.vue";
 import RightLayer from "@/views/ghfxpj/gtkjfxyy/rightLayer";
-
+import { fromLonLat } from "ol/proj";
 import { FullScreen, ZoomToExtent } from "ol/control";
 export default {
   components: {
@@ -70,7 +70,7 @@ export default {
     RightLayer,
     JJCharts,
     ZTT,
-    ZTTXQ
+    ZTTXQ,
   },
   props: {
     rightlayer: {
@@ -86,7 +86,9 @@ export default {
       default: () => {},
     },
   },
-  setup(prop) {
+  setup(prop, context) {
+    // 存储点击事件的引用，用于销毁
+    let clickHandler = null;
     onMounted(() => {
       var option = Object.assign({}, prop.baseLayer, { click: prop.click });
       myMap.loadMap("mapDiv", option);
@@ -94,6 +96,26 @@ export default {
       var _full = new FullScreen({ tipLabel: "全屏" });
       myMap.map.addControl(_full);
 
+      // 添加地图点击查询事件
+      if (prop.click) {
+        clickHandler = function (evt) {
+          // 获取点击位置的坐标
+          const coordinate = myMap.map.getCoordinateFromPixel(evt.pixel);
+          // 转换为经纬度
+          const lonlat = fromLonLat(coordinate);
+
+          // 触发点击事件，传递坐标信息给父组件
+          context.emit("mapClick", {
+            lon: lonlat[0],
+            lat: lonlat[1],
+            pixel: evt.pixel,
+            coordinate: coordinate,
+          });
+        };
+
+        myMap.map.on("click", clickHandler);
+      }
+
       var _extent = new ZoomToExtent({
         extent: MapCenter.extent,
         tipLabel: "全图",
@@ -108,6 +130,12 @@ export default {
         _zoom.element.appendChild(_extent.element);
       }
     });
+    // 组件销毁时移除事件监听
+    onUnmounted(() => {
+      if (clickHandler) {
+        myMap.map.un("click", clickHandler);
+      }
+    });
     const mapview = reactive({
       seen: false,
       current: 0,

website/src/views/ghfxpj/gtkjfxyy/ghcyfx.vue

@@ -16,7 +16,12 @@
         ></Fxsz>
       </el-col>
       <el-col :span="18">
-        <Mapview class="max-width" :rightlayer="true" :click="true">
+        <Mapview
+          class="max-width"
+          :rightlayer="true"
+          :click="true"
+          @map-click="handleMapClick"
+        >
           <template #tool> <span></span> </template>
         </Mapview>
         <div class="Attributes" v-show="showTable">
@@ -46,6 +51,38 @@
             />
           </el-table>
         </div>
+        <div class="deBox" v-show="tableData2.length">
+          <div class="AttributesTitle">
+            <span> 详细信息</span>
+            <el-icon
+              class="pointer font-22 posi-abs"
+              @click="closeDateil"
+              title="关闭"
+              ><close
+            /></el-icon>
+          </div>
+          <el-table
+            :data="tableData2"
+            border
+            stripe
+            style="width: 100%"
+            max-height="260"
+            @cell-dblclick="dblClick"
+          >
+            <el-table-column
+              prop="label"
+              label="属性名"
+              align="center"
+              show-overflow-tooltip=""
+            />
+            <el-table-column
+              prop="value"
+              label="属性值"
+              align="center"
+              show-overflow-tooltip=""
+            />
+          </el-table>
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -73,6 +110,7 @@ import Stroke from "ol/style/Stroke";
 import { Style, Icon } from "ol/style";
 import Fill from "ol/style/Fill";
 import { fromLonLat } from "ol/proj";
+import { transform } from "ol/proj";
 import { get as getProjection } from "ol/proj";
 import {
   getAttributesById,
@@ -129,6 +167,7 @@ export default {
         },
       ],
       tableData: [],
+      tableData2: [],
       tableColumns: [],
       transfer: {},
       showTable: false,
@@ -282,6 +321,46 @@ export default {
           }
         );
       },
+      handleMapClick(event) {
+        const webMercatorCoord = event.coordinate;
+
+        // 转换为经纬度
+        const lonLatCoord = transform(
+          webMercatorCoord,
+          "EPSG:3857",
+          "EPSG:4326"
+        );
+        intersects({
+          id: ghcyfx.transfer.id,
+          x: lonLatCoord[0],
+          y: lonLatCoord[1],
+        }).then((res) => {
+          if (res.statuscode === 200) {
+            ghcyfx.tableData2 = ghcyfx.transValue(res.data);
+          }
+        });
+        // 这里可以添加具体的查询逻辑
+        // 例如：根据坐标查询要素信息
+        // queryFeatureByCoordinate(event.coordinate);
+      },
+      closeDateil() {
+        ghcyfx.tableData2 = [];
+      },
+
+      transValue(rawData) {
+        // 兼容原始数据为null/undefined的情况
+        if (!rawData || typeof rawData !== "object") return [];
+
+        return Object.entries(rawData).map(([key, value]) => ({
+          label: key, // 直接使用原始字段名
+          value: value === null || value === undefined ? "" : String(value), // 空值处理，转为字符串避免渲染问题
+        }));
+      },
+    });
+    onUnmounted(() => {
+      // 移除地图上的临时图层
+      ghcyfx.delPos();
+      // 可以添加其他需要清理的资源 ...
     });
     watch(
       () => store.state.xmgl.transfer,
@@ -415,14 +494,22 @@ export default {
   position: absolute;
   bottom: 0px;
   padding: 0px 15px;
-  .AttributesTitle {
-    background: #ccc;
-    display: flex;
-    justify-content: space-between;
-    height: 30px;
-    align-items: center;
-    padding: 0px 10px;
-  }
+}
+.AttributesTitle {
+  background: #ccc;
+  display: flex;
+  justify-content: space-between;
+  height: 30px;
+  align-items: center;
+  padding: 0px 10px;
+}
+.deBox {
+  width: 300px;
+  height: 360px;
+  z-index: 9999 !important;
+  position: absolute;
+  bottom: 27%;
+  padding: 0px 15px;
 }
 </style>
   <style lang="less"></style>

website/src/views/ghfxpj/gtkjfxyy/rightLayer.vue

@@ -23,7 +23,7 @@
 </template>
 <script>
 import ZYMU from "@/views/ghfxpj/gtkjfxyy/zymu.vue";
-import { reactive, ref, toRefs, watch, onMounted } from "vue";
+import { reactive, ref, toRefs, watch, onMounted, onUnmounted } from "vue";
 import myMap from "@/utils/map.js";
 import arcMap from "@/utils/arcMap.js";
 import { GetAttrs } from "@/api/ghyzt/zzllApi";
@@ -109,6 +109,15 @@ export default {
         });
       },
     });
+    onUnmounted(() => {
+      // 清除监听
+      // 注意：如果watch有返回的停止函数，需要在这里调用
+      // 清空图层相关数据
+      rightlayer.list = [];
+      rightlayer.currentCollect = {};
+      rightlayer.currentRemoveCollect = {};
+      rightlayer.currentVisibleCollect = {};
+    });
     return { activeName, ...toRefs(rightlayer) };
   },
 };