地图

src/views/alarm/gis/index.vue

@@ -16,7 +16,7 @@
                   <el-icon class="el-input__icon"><search /></el-icon>
                 </template>
           </el-select>
-        </el-form-item>
+        </el-form-item> 
 
         <el-form-item label="所属基地：" prop="base">
           <el-select v-model="searchParam.base" placeholder="请选择" style="width: 200px">
@@ -26,40 +26,76 @@
         <el-form-item><div class="lan-state">台站总数5</div></el-form-item>
         <el-form-item><div class="lv-state">设备正常3</div></el-form-item>
         <el-form-item><div class="hong-state">设备故障2</div></el-form-item>
-        <el-form-item><div class="cheng-state">危险天气1</div></el-form-item>
-        <el-form-item>
-          <el-switch
-          size="large"
-    v-model="isEagleEyeOn"
-    inline-prompt
-    active-text="打开鹰眼"
-    inactive-text="关闭鹰眼"
-  />
-        </el-form-item>
-
-
+        <el-form-item><div class="cheng-state">危险天气1{{ info.one }}</div></el-form-item> <!-- 操作1     -->
+        
         <!-- 基本信息 -->
         <el-form-item>
-          <el-popover
-            v-model="visible"
+          <el-popover 
+            v-model="visible" 
             @show="handleShowChange"
-            @hide="handleHideChange"
-            placement="bottom"
-            :width="200"
+            @hide="handleHideChange" 
+            placement="bottom" 
+            :width="200" 
             trigger="click">
             <el-checkbox-group v-model="checkList">
-              <el-checkbox label="街道地图" value="街道地图" style="width: 100%"/>
-              <el-checkbox label="站名" value="站名" style="width: 100%"/>
-              <el-checkbox label="框选" value="框选" style="width: 100%"/>
-              <el-checkbox label="九宫格" value="九宫格" style="width: 100%"/>
-              <el-checkbox label="鹰眼视图" value="鹰眼视图" style="width: 100%"/>
+              <!--鹰眼  -->
+              <el-form-item>
+                  <el-switch
+                    size="large"
+                    v-model="isEagleEyeOn"
+                      inline-prompt
+                      active-text="打开鹰眼"
+                      inactive-text="关闭鹰眼"
+                  />
+              </el-form-item>
+              <!-- 九宫格 -->
+              <el-form-item>
+                <el-switch
+                  size="large"
+                  v-model="showNineGrid"
+                    inline-prompt
+                    active-text="开九宫格"    
+                    inactive-text="关九宫格"
+                />
+              </el-form-item>
+              <!-- 框选 -->
+              <el-form-item>
+                <el-switch
+                  size="large"
+                  v-model="isboxDrawn"
+                    inline-prompt
+                    active-text="打开框选"
+                    inactive-text="关闭框选"
+                />
+              </el-form-item>
+              <!-- 站名 -->
+              <el-form-item>
+                <el-switch
+                  size="large"
+                  v-model="isstationName"
+                    inline-prompt
+                    active-text="打开站名"
+                    inactive-text="关闭站名"
+                />
+              </el-form-item>
+              <!-- 街道地图 -->
+              <el-form-item>
+                <el-switch
+                  size="large"
+                  v-model="isstreet"
+                    inline-prompt
+                    active-text="街道地图"
+                    inactive-text="关闭"
+                />
+              </el-form-item>             
             </el-checkbox-group>
             <template #reference>
-              <div :class="visible ? 'hei-state-primary' : 'hei-state'">基本信息</div>
+              <div :class="visible ? 'hei-state-primary' : 'hei-state'">基本功能</div>
             </template>
           </el-popover>
         </el-form-item>
-      </el-form>
+
+      </el-form>      
       <!-- 右侧功能栏 -->
       <div class="header-button-ri">
         <el-popover
@@ -83,7 +119,7 @@
                 <template v-for="item in elementList" :key="item.id"  >
                   <div v-if="item.data_type==='温湿度'"  :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
                 </template>
-              </div>
+              </div>  
             </el-tab-pane>
 
             <!-- 气压 -->
@@ -98,7 +134,7 @@
                 <template v-for="item in elementList" :key="item.id"  >
                   <div v-if="item.data_type==='气压'"  :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
                 </template>
-              </div>
+              </div>  
             </el-tab-pane>
 
             <!-- 湿度 -->
@@ -113,9 +149,9 @@
                 <template v-for="item in elementList" :key="item.id"  >
                   <div v-if="item.data_type==='温湿度'"  :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
                 </template>
-              </div>
+              </div>  
             </el-tab-pane>
-
+           
             <!-- 风 -->
             <el-tab-pane>
               <template #label>
@@ -131,19 +167,19 @@
               </div>
             </el-tab-pane>
 
-            <!-- 降雨 -->
+            <!-- 降雨 -->   
             <el-tab-pane>
               <template #label>
                 <div class="gis-c">
                   <span>降雨</span>
                   <img class="gis-icon" src="../../../assets/images/rainfall.svg">
                 </div>
-              </template>
+              </template>              
               <div class="container-tag" style="overflow-y:auto; height:300px ">
                 <template v-for="item in elementList" :key="item.id"  >
                   <div v-if="item.data_type==='降水'"  :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
                 </template>
-              </div>
+              </div>             
 
             </el-tab-pane>
 
@@ -160,7 +196,7 @@
                 <template v-for="item in elementList" :key="item.id"  >
                   <div v-if="item.data_type==='云'"  :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
                 </template>
-              </div>
+              </div>  
             </el-tab-pane>
 
             <!-- 能见度 -->
@@ -175,7 +211,7 @@
                 <template v-for="item in elementList" :key="item.id"  >
                   <div v-if="item.data_type==='能见度'"  :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
                 </template>
-              </div>
+              </div>  
             </el-tab-pane>
 
             <!-- 天气现象 -->
@@ -190,7 +226,7 @@
                 <template v-for="item in elementList" :key="item.id"  >
                   <div v-if="item.data_type==='天气现象'"  :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
                 </template>
-              </div>
+              </div>  
             </el-tab-pane>
           </el-tabs>
           <template #reference>
@@ -202,16 +238,23 @@
           </template>
         </el-popover>
       </div>
-    </div>
-
+    </div>  
+    
     <!-- 地图与经纬度显示区域 -->
-    <!-- <div id="map" class="map"></div>     -->
-    <div id="map" class="map" style="width: 100%; height: 100vh;"></div>
-
-    <div id="mouse-position" class="mouse-position">经纬度: </div>
+    <div id="map" class="map" style="width: 100%; height: 100vh;">
+      <!-- 九宫格盒子 -->
+      <div v-if="showNineGrid" :style="nineGridStyle" class="box">
+        <div class="cell" v-for="(value, index) in dataValues" :key="index">
+          {{ value }}
+        </div>
+      </div>
+      
+    </div>
+ 
+    <div id="mouse-position" class="mouse-position">经纬度: </div>    
 
     <!-- 地图底部控制栏 -->
-    <div class="gis-bottom-box">
+    <div class="gis-bottom-box">  
       <div class="gis-bottom-item">
         <div class="button-bg" @click="isPlay=!isPlay">
           <img v-if="isPlay" class="button-bg-c" style="margin-left: 3px"  src="../../../assets/images/stop.svg"/>
@@ -252,209 +295,233 @@
       <div class="gis-bottom-item">
         <div class="gis-bottom-hei-state">当前时间 {{formatTooltip(value2)}}</div>
       </div>
-    </div>
-
+    </div>   
   </div>
+  
 
 </template>
 
-<script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
-import 'ol/ol.css';
-// import { Map, View } from 'ol';
-import TileLayer from 'ol/layer/Tile';
-import { fromLonLat, toLonLat } from 'ol/proj';
-// import { TileWMS } from 'ol/source';
-import OverviewMap from 'ol/control/OverviewMap';
-import SwitchButton from './SwitchButton.vue';
-import { watch, defineComponent } from "vue";
-import { Vector as VectorLayer } from 'ol/layer'; // 引入矢量图层
-import { Vector as VectorSource } from 'ol/source';
-// import Feature from 'ol/Feature';
-// import { Point } from 'ol/geom';
-// import { Style, Icon } from 'ol/style';
-import { Platform} from "@/api/interface";
-import {getPlatformList,getRgDataList} from "@/api/modules/allData";
-import Vector from './Vector.vue';
-import { coordinateParser } from '@/utils/coordinateParser';
-import { l } from "vite/dist/node/types.d-aGj9QkWt";
-// import LayerVector from 'ol/layer/Vector';
-// import SourceVector from 'ol/source/Vector';
-import OverlayMap from './overLayer.vue'; // 引入OverlayMap组件
-import http from "@/api";
-import {ElementColumnsList, ResPage, ResultData} from "@/api/interface/index";
-import { PORT1 } from "@/api/config/servicePort";
-
-
-import 'ol/ol.css'
-import '@/assets/map/popup.css'
-import { Tile, Image } from 'ol/layer';
-import { XYZ, TileWMS, ImageWMS } from 'ol/source';
-import LayerVector from 'ol/layer/Vector';
-import SourceVector from 'ol/source/Vector';
-import { Map, View, Feature, Overlay } from 'ol';
-import { transform } from 'ol/proj';
-import { defaults, FullScreen, ScaleLine, ZoomToExtent, ZoomSlider, MousePosition } from 'ol/control'
-import { Point } from 'ol/geom';
-import { Style, Icon, Text, Fill, Stroke, Circle } from 'ol/style';
-import { createStringXY, format } from 'ol/coordinate';
-import { getCenter } from 'ol/extent';
-import { METERS_PER_UNIT } from 'ol/proj/Units';
-import { labelZoomSize, colorRGBtoHex } from "@/assets/map/maptool";
-import { Draw } from 'ol/interaction';
-
-// 新建VectorSource（矢量信息图层） 来存放台站数据
-const stationSource = new VectorSource();
-const stationLayer = new VectorLayer({
-  source: stationSource,
-});
-
-// 定义状态变量
-const value1 = ref('');
-const value2 = ref(0);
-const visible = ref(false);
-const visible2 = ref(false);
-const checkList = ref(['Value selected and disabled', 'Value A']);
-const isPlay = ref(true);
-const isEagleEyeOn = ref(true);
-const searchParam = reactive({ base: undefined, station: undefined });
-const baseOptions = ref([{ value: 0, label: '基地1' }, { value: 1, label: '基地2' }]);
-const stationOptions = ref([{ value: 0, label: 'M1986' }, { value: 1, label: 'M1987' }]);
-
-// 查询自动站列表
-const queryas = ref<Platform>({
-  pageSize: 10000,
-  pageNum: 1
-})
-const platformList =ref<any>([]); // 平台列表存储从后端获取的自动站数据列表
-
-// 获取站点列表
-const getPlatforms = async () => {
-  try{
-    const { data } = await getPlatformList(queryas.value);
-    platformList.value = data.list;
-    console.log("platformList.value:",+ platformList.value); // 在控制台输出平台列表
-    // 调用 getStations 以添加站点到地图
-    getStations(data.list);
-    // console.log("打印data.list的数据：",+data.list)
-  }catch(error){
-    console.log("获取平台列表失败：",error)
-  }
-};
+  <script setup lang="ts">
+  import { ref, reactive, onMounted } from "vue";
+  import 'ol/ol.css';
+  import TileLayer from 'ol/layer/Tile';
+  import OverviewMap from 'ol/control/OverviewMap';
+  import { watch, defineComponent } from "vue";
+  import { Vector as VectorLayer } from 'ol/layer'; // 引入矢量图层
+  import { Vector as VectorSource } from 'ol/source';
+  import { Platform} from "@/api/interface";
+  import {getDataItemList,getPlatformList,getRgDataList} from "@/api/modules/allData";
+  import { l } from "vite/dist/node/types.d-aGj9QkWt";
+  import http from "@/api";
+  import {ElementColumnsList, ResPage, ResultData} from "@/api/interface/index";
+  import { PORT1 } from "@/api/config/servicePort";
+  import '@/assets/map/popup.css'
+  import { Tile, Image } from 'ol/layer';
+  import { XYZ, TileWMS, ImageWMS } from 'ol/source';
+  import LayerVector from 'ol/layer/Vector';
+  import SourceVector from 'ol/source/Vector';
+  import { Map, View, Feature, Overlay } from 'ol';
+  import { fromLonLat, transform } from 'ol/proj';
+  import { defaults, FullScreen, ScaleLine, ZoomToExtent, ZoomSlider, MousePosition } from 'ol/control'
+  import { Point } from 'ol/geom';
+  import { Style, Icon, Text, Fill, Stroke, Circle } from 'ol/style';
+  import { createStringXY, format } from 'ol/coordinate';
+  import { getCenter } from 'ol/extent';
+  import { METERS_PER_UNIT } from 'ol/proj/Units';
+  import { labelZoomSize, colorRGBtoHex } from "@/assets/map/maptool";
+  import { Draw } from 'ol/interaction';
+  // import NineGrid from './NineGrid.vue';
+
+
+  const showNineGrid = ref(false); // 控制九宫格显示与否
+  const dataValues = ref(Array(9).fill(0)); // 替换为实际的数据 
+  const currentStationIndex = ref(0); // 选择的站点索引
+  // const stationCoordinates = { longitude: 116.397128, latitude: 39.916527 }; // 示例经纬度（北京天安门）
+
+  // 存储站点的经纬度和数据值
+  const stations = ref([
+    { lat: 34.638163632, lon: 116.426066261, value: 10 }, 
+    { lat: 34.638263632, lon: 116.426166261, value: 20 },
+    { lat: 34.638363632, lon: 116.426266261, value: 30 },
+    // 继续添加其他站点
+  ]);
+
+  // 切换九宫格的显示
+  const toggleNineGrid = () => {
+    showNineGrid.value = !showNineGrid.value;
+  };
+  // 计算九宫格样式，以站点的经纬度为基准
+  const getNineGridPosition = (stationIndex: number) => {
+    const station = stations.value[stationIndex];
+    return {
+      position: 'absolute',
+      top: `${station.lat}px`, // 根据需要转换为实际的像素值
+      left: `${station.lon}px`, // 根据需要转换为实际的像素值
+      transform: 'translate(-50%, -50%)',
+      zIndex: 10,
+    };
+  };
+
+  // 监视站点数据，更新九宫格的数据值
+  watch(stations, (newStations) => {
+    dataValues.value = newStations.map(station => station.value);
+  });
+  // 监视当前站点索引，更新九宫格位置
+  watch(currentStationIndex, (newIndex) => {
+    if (newIndex < stations.value.length) {
+      nineGridStyle.value = getNineGridPosition(newIndex);
+    }
+  });
 
-//查询观测要素
-//  const getDataItemList = (params:{}) => {
-//   return http.post<ResPage<any>>(PORT1 + `/querydataitem`,params);
-//     console.log("http.post<ResPage<any>>(PORT1 + `/querydataitem`,params)",http.post<ResPage<any>>(PORT1 + `/querydataitem`,params))
-// };
+  // 初始设置九宫格样式
+  const nineGridStyle = ref({
+    position: 'absolute',
+    top: '100px',
+    left: '100px',
+    zIndex: 100,
+  });
 
 
 
-// 获取台站信息
-const getStations = (stations) => {
-  stationSource.clear();  // 清除之前的站点标记
 
-  stations.forEach(station => {
-    console.log(`Station ${station.as_code} data_list:`, station.data_list); // 打印每个站点的 data_list  返回undefined
 
-    if (station.as_lon && station.as_lat) {
-      const latitude = parseFloat(station.as_lat.replace('N', ''));
-      const longitude = parseFloat(station.as_lon.replace('E', ''));
 
-      // 基础信息，如站号和站名
-      const featureTextParts = [
-        `${station.as_code}`,
-        // `站名: ${station.as_name}`
-      ];
+  // 新建VectorSource（矢量信息图层） 来存放台站数据
+  const stationSource = new VectorSource();
+  const stationLayer = new VectorLayer({
+    source: stationSource,
+  });
 
-      // 确保 data_list 存在且为数组
-      const selectedElementsText = copiedCustomizeColumns.value.map(selectedElem => {
-        if (station.data_list && Array.isArray(station.data_list)) {
-          // 在 `data_list` 中查找与当前选中要素 `data_id` 匹配的项
-          const dataItem = station.data_list.find(item => item.data_id === selectedElem.data_id);
+  // 定义状态变量
+  const value1 = ref('');
+  const value2 = ref(0);
+  const visible = ref(false);
+  const visible2 = ref(false);
+  const checkList = ref(['Value selected and disabled', 'Value A']);
+  const isPlay = ref(true);
+  const isEagleEyeOn = ref(true); // 鹰眼开关状态
+  const isjGG = ref(false); // 九宫格开关状态 默认关闭  
+  const isboxDrawn = ref(false); // 框选开关状态 默认关闭  boxDrawn 
+  const isstationName = ref(false); // 站名开关状态 默认关闭  isstationName
+  const isstreet = ref(true); // 街道地图开关状态 默认关闭  
+  const searchParam = reactive({ base: undefined, station: undefined });
+  const baseOptions = ref([{ value: 0, label: '基地1' }, { value: 1, label: '基地2' }]);
+  const stationOptions = ref([{ value: 0, label: 'M1986' }, { value: 1, label: 'M1987' }]);
+
+  // 查询自动站列表
+  const queryas = ref<Platform>({
+    pageSize: 10000,
+    pageNum: 1
+  })
+  const platformList =ref<any>([]); // 平台列表存储从后端获取的自动站数据列表
+
+  // 获取站点列表
+  const getPlatforms = async () => {
+    try{
+      const { data } = await getPlatformList(queryas.value);
+      platformList.value = data.list;    
+      console.log("platformList.value:",+ platformList.value); // 在控制台输出平台列表    
+
+      getStations(data.list);
+      // console.log("打印data.list的数据：",+data.list)
+    }catch(error){
+      console.log("获取平台列表失败：",error)
+    }    
+  };
+
+  const pageable = ref<any>({
+    data_type: true,
+    time_order: 0,
+    as_code_list:undefined,
+    data_items:[],
+    pageNum: 1,
+    pageSize: 20,
+    total: 0
+  });
 
-          // 检查数据项是否存在，并确保显示值和单位
-          if (dataItem) {
-            const value = dataItem.data_value || "暂无数据";  // 如果值不存在则显示“暂无数据”
-            return `${dataItem.data_name}: ${value}${dataItem.data_unit || ''}`;
+  // 存放选中要素的数据
+  const processTableData = ref<any>([]);
+  const getList = async () => {
+    try {
+      const { data } = await getDataItemList(pageable.value); // 假设此函数调用成功并返回数据
+      processTableData.value = data.list || []; //保证processTableData不会为null
+      getStations(platformList.value);  //更新getStation更新站点
+      
+      return data.list; // 确保返回数据
+    } catch (error) {
+      console.error("获取数据时出错:", error);
+      return null; // 如果出错，返回 null
+    }
+  };
+
+  // 地图台站信息标注 
+  const getStations = (stations) => {
+    console.log(stations,'getstation2');  
+    
+    stationSource.clear();  // 清除之前的站点标记
+    stations.forEach(station => {
+      console.log(processTableData.value,'11');    
+    
+      if (station.as_lon && station.as_lat) {
+      const result = processTableData.value.find(item => item.as_code === station.as_code)
+      console.log(result,'......result');    
+
+        const latitude = parseFloat(station.as_lat.replace('N', ''));
+        const longitude = parseFloat(station.as_lon.replace('E', ''));
+
+        // 打印解析后的经纬度
+        console.log('Parsed Latitude:', latitude);
+        console.log('Parsed Longitude:', longitude);
+        // 基础信息，如站号和站名
+        const featureTextParts = [
+          `${station.as_code}`,
+          // `站名: ${station.as_name}`
+        ];
+
+        // 确保 data_list 存在且为数组
+        const selectedElementsText = copiedCustomizeColumns.value.map(selectedElem => {
+          // 检查result是否存在，并且result[selectedElem.data_id]是否存在
+          if (result && result[selectedElem.data_id] !== undefined) {
+            const value = result[selectedElem.data_id] || "/";  // 如果值不存在则显示“暂无数据”
+            return `${selectedElem.data_name}: ${value}${selectedElem.data_unit || ''}`;
           } else {
             // 如果未找到匹配项
-            return `${selectedElem.data_name}: 暂无数据`;
+            return `${selectedElem.data_name}: /`;
           }
-        } else {
-          // 如果 data_list 不存在或不是数组
-          return `${selectedElem.data_name}: 暂无数据`;
-        }
-      }).join("\n");  // 使用换行符分隔每个选中要素
-
-      // 组合站点基础信息和选中要素信息
-      const featureText = `${featureTextParts.join("\n")}\n${selectedElementsText}`;
-
-      // 创建站点的特征（Feature）
-      const feature = new Feature({
-        geometry: new Point(fromLonLat([longitude, latitude], 'EPSG:3857')),
-        name: station.as_name,
-        code: station.as_code,
-      });
-
-      // 设置站点图标和文字样式
-      feature.setStyle(new Style({
-        image: new Icon({
-          src: '/src/assets/images/station_location.png',  // 图标路径
-          scale: 0.8,
-        }),
-        text: new Text({
-          text: featureText,  // 显示站号、站名和选中要素信息
-          font: '12px Calibri,sans-serif',
-          fill: new Fill({ color: '#000' }),
-          stroke: new Stroke({ color: '#fff', width: 2 }),
-          offsetY: -20,
-          textAlign: 'center',
-        })
-      }));
-
-      // 将站点特征添加到站点源
-      stationSource.addFeature(feature);
-    }
-  });
-};
-
-// 更新特征的样式，包括显示选中的要素值
-const updateFeatureStyle = (feature, station) => {
-  let featureTextParts = [`站号: ${feature.get('code')}`, `站名: ${feature.get('name')}`];
-
-  // 检查每个选中的要素是否在站点数据中，并添加到显示文本中
-  copiedCustomizeColumns.value.forEach(selectedElem => {
-    if (station.data_list && Array.isArray(station.data_list)) {
-      const dataItem = station.data_list.find(item => item.data_id === selectedElem.data_id);
-      if (dataItem) {
-        const value = dataItem.data_value || "暂无数据";  // 如果值不存在则显示“暂无数据”
-        featureTextParts.push(`${selectedElem.data_name}: ${value}${dataItem.data_unit || ''}`);
-      } else {
-        featureTextParts.push(`${selectedElem.data_name}: 暂无数据`);
-      }
-    } else {
-      featureTextParts.push(`${selectedElem.data_name}: 暂无数据`);
-    }
-
-  });
-
-  // 设置站点图标和文字样式
-  feature.setStyle(new Style({
-    image: new Icon({
-      src: '/src/assets/images/station_location.png',  // 图标路径
-      scale: 0.8,
-    }),
-    text: new Text({
-      text: featureTextParts.join("\n"),  // 显示站号、站名和选中要素信息
-      font: '12px Calibri,sans-serif',
-      fill: new Fill({ color: '#000' }),
-      stroke: new Stroke({ color: '#fff', width: 2 }),
-      offsetY: -20,
-      textAlign: 'center',
-    })
-  }));
-};
+        }).join("\n");  // 使用换行符分隔每个选中要素
+
+        // 组合站点基础信息和选中要素信息
+        const featureText = `${featureTextParts.join("\n")}\n${selectedElementsText}`;
+
+        // 创建站点的特征（Feature）
+        const feature = new Feature({
+          geometry: new Point(fromLonLat([longitude, latitude], 'EPSG:3857')),
+          name: station.as_name,
+          code: station.as_code,
+        });
+
+        // 设置站点图标和文字样式
+        feature.setStyle(new Style({
+          image: new Icon({
+            src: '/src/assets/images/logo.svg',  // 图标路径
+            scale: 0.008,
+          }),
+          text: new Text({
+            text: featureText,  // 显示站号、站名和选中要素信息
+            font: '12px Calibri,sans-serif',
+            fill: new Fill({ color: '#000' }),
+            stroke: new Stroke({ color: '#fff', width: 2 }),
+            offsetY: -20,
+            textAlign: 'center',
+          })
+        }));
+
+        // 将站点特征添加到站点源
+        stationSource.addFeature(feature);
+        
+      } 
+    });
+  };
 
 
 // 右侧图标
@@ -493,6 +560,13 @@ const layersConfig = [
   { layerName: 'basemap:provinceName', minZoom: 1, maxZoom:6 }
 ];
 
+// 操作2
+const info=ref<any>({
+  1:'222',
+  2:'99'
+})
+
+
 // 创建图层的函数
 const createWMSLayer = ({ layerName, minZoom, maxZoom, opacity = 1 }) => {
   return new TileLayer({
@@ -507,10 +581,12 @@ const createWMSLayer = ({ layerName, minZoom, maxZoom, opacity = 1 }) => {
   });
 };
 
+
 let map; // 定义为全局变量
 let overviewMapControl: OverviewMap;
 // 地图初始化
 const initializeMap = () => {
+
   let view =new View({
       center: fromLonLat([104.1954, 35.8617]),
       zoom: 4,
@@ -525,6 +601,7 @@ const initializeMap = () => {
     view: view
   });
 
+ 
   // 定义鹰眼视图层
   const overviewMapLayer = new TileLayer({
     source: new TileWMS({
@@ -546,10 +623,11 @@ const initializeMap = () => {
     layers: [overviewMapLayer]
   });
   map.addControl(overviewMapControl);
-
+  
   // 显示小数点经纬度
   map.on('pointermove', (evt) => {
-      const [lon, lat] = toLonLat(map.getCoordinateFromPixel(evt.pixel));
+      // const [lon, lat] = toLonLat(map.getCoordinateFromPixel(evt.pixel));
+      const [lon, lat] = transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'); // 转换为标准经纬度
       document.getElementById('mouse-position').innerHTML = `经度: ${lon.toFixed(6)}°,  纬度: ${lat.toFixed(6)}°`;
     });
 };
@@ -558,8 +636,8 @@ const initializeMap = () => {
 watch(isEagleEyeOn, (newValue) => {
   overviewMapControl.setCollapsed(!newValue);
 });
-// 鹰眼图层的初始化
-const initializeOverviewMap = () => {
+// 鹰眼图层的初始化  
+const initializeOverviewMap = () => {   
   const overviewMapLayer = new TileLayer({
     source: new TileWMS({
       url: 'http://192.168.43.77:8080/geoserver/wms',
@@ -573,7 +651,7 @@ const initializeOverviewMap = () => {
       serverType: 'geoserver'
     })
   })
-};
+};   
 
 // 查询所有人工要素字典表
 const elementList =ref<any>([])
@@ -585,10 +663,10 @@ const getAllRgDataList = async () => {
 
 // 存放选中要素列表
 const copiedCustomizeColumns = ref<any>([]);
-// 要素的选中和取消
+// 要素的选中和取消  
 const toggleSelection = (item) => {
   item.isSelected = !item.isSelected;
-
+  
   if (item.isSelected) {
     // 添加选中的要素
     copiedCustomizeColumns.value.push(item);
@@ -598,57 +676,88 @@ const toggleSelection = (item) => {
   }
   console.log("copiedCustomizeColumns.value:", copiedCustomizeColumns.value);
 
-  // 重新调用 getStations 更新地图上的显示内容
-  getStations(platformList.value);
-};
+  //根据要素查询数据
+  pageable.value.data_items  = copiedCustomizeColumns.value
+  getList().then((data) => {
+    console.log("getList 返回的数据:", data);
+  }).catch((error) => {
+    console.error("获取数据时出错:", error);
+  });
 
+};
 
-  // 在组件挂载时初始化地图
+  // 在组件挂载时初始化地图 
   onMounted(() => {
     getAllRgDataList(); // 存放人工选择的要素列表
     initializeMap();
-    getPlatforms();
+    getPlatforms();    
   });
 
 </script>
 
 
 
-
 <style>
 .ol-overviewmap {
     right: 0.5em!important;
-    bottom: 0.5em!important;
+    bottom: 1.5em!important;
     left: initial!important;
 }
 </style>
 
 <style scoped>
-.map {
+.map { 
   width: 100%;
   /* height: 100vh; */
   height: calc(100vh - 50px); /* 使用 calc() 来确保地图占满视口高度，减去上方的固定高度 */
+  position:relative;
+  overflow: hidden;
 }
 
-.slider-scale {
-  width: 720px;
-  margin-top: -10px;
+/**九宫格样式 */
+.box {
+  position: absolute;
+  top:20px;
+  right:20px;
+  transform: translate(-50%, -50%);
+  width: 90px;
+  height: 90px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr); /* 创建3列 */
+  grid-template-rows: repeat(3, 1fr); /* 创建3行 */
+  border: 1px solid rgba(0, 0, 0, 0.5); /* 盒子的边框 */
+  z-index: 10; /* 确保盒子覆盖在地图上方 */
+  box-sizing: border-box; /* 边框宽度包含在宽度和高度内 */
 }
 
-.gis-bottom-box {
-  display: flex;
+.box .cell {
+  border: 1px solid rgba(0, 0, 0, 0.5); /* 单元格的边框，设置为1px以确保一致性 */
+  box-sizing: border-box; /* 边框宽度包含在宽度和高度内 */
+  display: grid;
+  justify-content: center;
   align-items: center;
+}
+
+
+.slider-scale { 
+  width: 720px; 
+  margin-top: -10px; 
+}
+
+.gis-bottom-box {
+  display: flex; 
+  align-items: center; 
   }
 
 /* 经纬度所在位置 */
 .mouse-position {
-  position: absolute;
-  bottom: 0px;
-  right: 1px;
-  background-color: rgba(255, 255, 255, 0.7);
-  padding: 3px;
-  border: 1px solid #ccc;
-  font-size: 14px;
-  z-index: 1000;
+  position: absolute; 
+  bottom: 0px; 
+  right: 1px; 
+  background-color: rgba(255, 255, 255, 0.7); 
+  padding: 3px; 
+  border: 1px solid #ccc; 
+  font-size: 14px; 
+  z-index: 1000; 
 }
 </style>