From da9aaadda00b9bec6a45b0c5aa4f3d8755c63eb6 Mon Sep 17 00:00:00 2001
From: lin <648540858@qq.com>
Date: Fri, 10 Oct 2025 22:41:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BA=E5=9C=B0=E5=9B=BE=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=B1=82=E7=BA=A7=E6=8C=87=E7=A4=BA=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/common/MapComponent.vue | 40 +++++++++++++++++++++------
 1 file changed, 31 insertions(+), 9 deletions(-)

diff --git a/web/src/views/common/MapComponent.vue b/web/src/views/common/MapComponent.vue
index 1766d44c5..740c765a6 100755
--- a/web/src/views/common/MapComponent.vue
+++ b/web/src/views/common/MapComponent.vue
@@ -5,6 +5,7 @@
 <script>
 import 'ol/ol.css'
 import Map from 'ol/Map'
+import ZoomSlider from 'ol/control/ZoomSlider'
 import OSM from 'ol/source/OSM'
 import XYZ from 'ol/source/XYZ'
 import VectorSource from 'ol/source/Vector'
@@ -17,17 +18,15 @@ import View from 'ol/View'
 import Feature from 'ol/Feature'
 import Overlay from 'ol/Overlay'
 import { Point, LineString } from 'ol/geom'
-import { get as getProj, toLonLat as projToLonLat } from 'ol/proj'
+import { get as getProj } from 'ol/proj'
 import { containsCoordinate } from 'ol/extent'
-import {
-  defaults as defaultInteractions
-} from 'ol/interaction'
+import { defaults as defaultInteractions } from 'ol/interaction'
 import DragInteraction from './map/DragInteraction'
 import { fromLonLat, toLonLat } from './map/TransformLonLat'
 
 import { v4 } from 'uuid'
 import { getUid } from 'ol'
-import gcoord from 'gcoord'
+import {Fill} from "ol/style";
 
 let olMap, tileLayer = null
 export default {
@@ -107,6 +106,9 @@ export default {
         controls: [ // 控件
         ]
       })
+      olMap.addControl(new ZoomSlider({
+        className: 'zoom-slider'
+      }))
       olMap.once('loadend', event => {
         this.$emit('loaded')
       })
@@ -254,13 +256,14 @@ export default {
           const feature = new Feature(new Point(fromLonLat(data[i].position)))
           feature.setId(data[i].id)
           feature.customData = data[i].data
-          const cloneStyle = new Style()
-          cloneStyle.setImage(new Icon({
+          const style = new Style()
+          style.setImage(new Icon({
             anchor: data[i].image.anchor,
             crossOrigin: 'Anonymous',
-            src: data[i].image.src
+            src: data[i].image.src,
+            opacity: 1
           }))
-          feature.setStyle(cloneStyle)
+          feature.setStyle(style)
           features.push(feature)
         }
         const source = new VectorSource()
@@ -393,5 +396,24 @@ export default {
 </script>
 
 <style>
+#mapContainer .zoom-slider {
+  width: 14px;
+  height: 200px;
+  right: 20px;
+  bottom: 400px;
+  border-bottom: 1px #dfdfdf solid;
+  border-right: 1px #dfdfdf solid;
+  cursor: pointer;
+  background-color: #FFFFFF;
+  border-radius: 3px;
 
+}
+#mapContainer .zoom-slider button {
+  position: relative;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  margin: 0;
+  background-color: #606266;
+}
 </style>