1

src/assets/css/index.scss

@@ -899,3 +899,11 @@ body {
     }
   }
 }
+
+.zoom-control {
+  position: absolute;
+  left: 60px;
+  bottom: 10px;
+  z-index: 1000;
+  color: #000;
+}

src/views/contentData/LeftSidebar/index.vue

@@ -515,7 +515,7 @@ export default {
         allDay: true,
         startTime: this.startTime,
         endTime: this.endTime,
-        positionId: [],
+        positionId: [drone.positionId],
         company: " ",
         mark: " "
       };

src/views/mapControl/index.vue

@@ -3,7 +3,6 @@
     <div class="zoom-level" @click="soundAndMenu">
       <img :src="zoomLevelImage" alt="" />
     </div>
-    <div class="zoom-control">刻度尺：{{ zoomControl }}</div>
     <div class="zoom-text">版本号：V1.0</div>
     <div class="btn-container" v-if="closeBtnVisible">
       <el-button @click="handleClickClose()">返回</el-button>
@@ -60,7 +59,7 @@ import { mapGetters } from "vuex";
 import Map from "ol/Map";
 import View from "ol/View";
 import TileLayer from "ol/layer/Tile";
-import { fromLonLat } from "ol/proj";
+import { fromLonLat, transform } from "ol/proj";
 import XYZ from "ol/source/XYZ";
 import { Feature, Overlay } from "ol";
 import { Point, MultiPolygon } from "ol/geom";
@@ -69,6 +68,7 @@ import { Vector as VectorSource } from "ol/source";
 import { Style, Fill, Stroke, Circle } from "ol/style";
 import GeoJSON from "ol/format/GeoJSON";
 import LayerGroup from "ol/layer/Group";
+import { ScaleLine } from "ol/control.js";
 import AlertDialog from "../menuData/AlertDialog.vue";
 import { devPositionList } from "@/api/position.js";
 
@@ -303,6 +303,10 @@ export default {
     mapClickHandler(event) {
       // 处理地图点击事件
       console.log("地图点击:", event);
+      const mapCoords = event.coordinate;
+      const wgs84Coords = transform(mapCoords, "EPSG:3857", "EPSG:4326");
+      const [longitude, latitude] = wgs84Coords;
+      console.log("地图点击经纬度:", { longitude, latitude });
     },
     mapZoomHandler() {
       // 获取当前缩放等级
@@ -350,7 +354,7 @@ export default {
           .setCenter(
             fromLonLat([camera.cameraLon || 0, camera.cameraLat || 0])
           );
-        map.getView().setMinZoom(3); // 最小缩放等级
+        map.getView().setMinZoom(0); // 最小缩放等级
         map.getView().setMaxZoom(18); // 最大缩放等级
       }
       // 监听缩放级别变化
@@ -360,6 +364,13 @@ export default {
         this.zoomControl = Math.round(view.getZoom());
         console.log(this.zoomControl, "缩放级别已更改");
       });
+      var scaleLineControl = new ScaleLine({
+        //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
+        units: "metric",
+        className: "zoom-control" // 设置标尺的样式类名
+      });
+      console.log(scaleLineControl, "scaleLineControl");
+      map.addControl(scaleLineControl);
     },
     handleClose() {
       this.dialogVisible = false;
@@ -464,17 +475,6 @@ export default {
       height: 48px;
     }
   }
-  .zoom-control {
-    position: absolute;
-    left: 60px;
-    bottom: 10px;
-    z-index: 1000;
-    color: #fff;
-    img {
-      width: 48px;
-      height: 48px;
-    }
-  }
   .zoom-text {
     position: absolute;
     top: 18px;

src/views/menuData/AlertDialog.vue

@@ -361,71 +361,7 @@ export default {
         alarmDetail(params).then((res) => {
           if (res.code === 0) {
             console.log(res.data, "res.data");
-            this.historyList = [
-              {
-                lon: 118.71041006571824,
-                lat: 32.031231916027345,
-                alt: 41.3,
-                app_lat: 32.03116889069689,
-                app_lon: 118.71035276996328,
-                createTime: "2025-06-14 15:31:28",
-                alarmLevel: 0
-              },
-              {
-                lon: 118.7104387135957,
-                lat: 32.03126056390482,
-                alt: 41.3,
-                app_lat: 32.03116889069689,
-                app_lon: 118.71035276996328,
-                createTime: "2025-06-14 15:31:30",
-                alarmLevel: 0
-              },
-              {
-                lon: 118.71056476425662,
-                lat: 32.03135796668825,
-                alt: 45.7,
-                app_lat: 32.03116889069689,
-                app_lon: 118.71034704038777,
-                createTime: "2025-06-14 15:32:04",
-                alarmLevel: 0
-              },
-              {
-                lon: 118.71056476425662,
-                lat: 32.03135796668825,
-                alt: 45.7,
-                app_lat: 32.03116316112139,
-                app_lon: 118.71034704038777,
-                createTime: "2025-06-14 15:32:06",
-                alarmLevel: 0
-              },
-              {
-                lon: 118.71034704038777,
-                lat: 32.031077217488956,
-                alt: 24.4,
-                app_lat: 32.03117462027238,
-                app_lon: 118.71036422911426,
-                createTime: "2025-06-14 15:32:49",
-                alarmLevel: 0
-              },
-              {
-                lon: 118.71038141784075,
-                lat: 32.03106575833797,
-                alt: 22.3,
-                app_lat: 32.03116889069689,
-                app_lon: 118.71035276996328,
-                createTime: "2025-06-14 15:32:55",
-                alarmLevel: 0
-              },
-              {
-                lon: 118.71036995868977,
-                lat: 32.03092824852607,
-                alt: 34.6,
-                app_lat: 32.03118034984788,
-                app_lon: 118.71035849953877,
-                createTime: "2025-06-14 15:33:54",
-                alarmLevel: 0
-              }
-            ];
+            this.historyList = res.data;
             this.drawTrack();
             this.$store.commit("SET_CHECKFLAG", true);
           }