From 2ba0399b7b787add61420427044924ff91e7a616 Mon Sep 17 00:00:00 2001
From: lin <648540858@qq.com>
Date: Sat, 18 Oct 2025 20:19:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8E=BB=E9=99=A4=E6=97=A7=E7=9A=84gps?=
 =?UTF-8?q?=E9=80=9A=E7=9F=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../iot/vmp/storager/IRedisCatchStorage.java  |  4 +-
 web/package.json                              |  2 +-
 web/src/views/common/MapComponent.vue         | 57 ++++++++++++++++++-
 web/vue.config.js                             |  1 +
 4 files changed, 59 insertions(+), 5 deletions(-)

diff --git a/src/main/java/com/genersoft/iot/vmp/storager/IRedisCatchStorage.java b/src/main/java/com/genersoft/iot/vmp/storager/IRedisCatchStorage.java
index 7728f981e..e7bdffa32 100755
--- a/src/main/java/com/genersoft/iot/vmp/storager/IRedisCatchStorage.java
+++ b/src/main/java/com/genersoft/iot/vmp/storager/IRedisCatchStorage.java
@@ -101,10 +101,8 @@ public interface IRedisCatchStorage {
 
     /**
      * 判断设备状态
-     * @param deviceId 设备ID
-     * @return
      */
-    public boolean deviceIsOnline(String deviceId);
+    boolean deviceIsOnline(String deviceId);
 
     /**
      * 存储推流的鉴权信息
diff --git a/web/package.json b/web/package.json
index 3ac213819..b13697130 100644
--- a/web/package.json
+++ b/web/package.json
@@ -27,7 +27,7 @@
     "moment-duration-format": "^2.3.2",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
-    "ol": "^6.14.1",
+    "ol": "^10.6.1",
     "path-to-regexp": "2.4.0",
     "screenfull": "5.1.0",
     "strip-ansi": "^7.1.0",
diff --git a/web/src/views/common/MapComponent.vue b/web/src/views/common/MapComponent.vue
index 73fe7ca39..55dcac67a 100755
--- a/web/src/views/common/MapComponent.vue
+++ b/web/src/views/common/MapComponent.vue
@@ -5,13 +5,13 @@
 <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'
 import Tile from 'ol/layer/Tile'
 import VectorLayer from 'ol/layer/Vector'
 import LayerGroup from 'ol/layer/Group'
+import WebGLPointslayer from 'ol/layer/WebGLPoints'
 import Style from 'ol/style/Style'
 import Stroke from 'ol/style/Stroke'
 import Icon from 'ol/style/Icon'
@@ -284,6 +284,61 @@ export default {
       }
     },
     createPointLayer(data, clickEvent, option){
+      if (data.length > 0) {
+        const features = []
+        let maxZoom = (option && option.maxZoom) ? option.maxZoom : olMap.getView().getMaxZoom()
+        let minZoom = (option && option.minZoom) ? option.minZoom : olMap.getView().getMinZoom()
+        let declutter = option && option.declutter
+
+        for (let i = 0; i < data.length; i++) {
+          const feature = new Feature(new Point(fromLonLat(data[i].position)))
+          feature.setId(data[i].id)
+          feature.customData = data[i].data
+          // const style = new Style()
+          // style.setImage(new Icon({
+          //   anchor: data[i].image.anchor,
+          //   crossOrigin: 'Anonymous',
+          //   src: data[i].image.src,
+          //   opacity: 1
+          // }))
+          // feature.setStyle(style)
+          features.push(feature)
+        }
+        const source = new VectorSource()
+        source.addFeatures(features)
+        const vectorLayer = new WebGLPointslayer({
+          source: source,
+          maxZoom: maxZoom,
+          minZoom: minZoom,
+          style: {
+            // 必须提供 style 配置，可以是对象或函数
+            // 'circle-radius': 3,
+            // 'circle-fill-color': 'red',
+            // 'circle-stroke-color': 'white',
+            // 'circle-stroke-width': 0.5
+            'icon-src': 'static/images/gis/camera1.png',
+            'icon-offset': [0, 12],
+            'icon-width': 40,
+            'icon-height': 40
+          }
+        })
+        if (clickEvent && typeof clickEvent === 'function') {
+          vectorLayer.on('click', (event) => {
+
+            if (event.features.length > 0) {
+              const items = []
+              for (let i = 0; i < event.features.length; i++) {
+                items.push(event.features[i].customData)
+              }
+              clickEvent(items)
+            }
+          })
+        }
+
+        return vectorLayer
+      }
+    },
+    createPointLayer2(data, clickEvent, option){
       if (data.length > 0) {
         const features = []
         let maxZoom = (option && option.maxZoom) ? option.maxZoom : olMap.getView().getMaxZoom()
diff --git a/web/vue.config.js b/web/vue.config.js
index 4e51d5b97..ad8876cff 100644
--- a/web/vue.config.js
+++ b/web/vue.config.js
@@ -28,6 +28,7 @@ module.exports = {
   assetsDir: "static",
   lintOnSave: false, // Disable ESLint to avoid warnings
   productionSourceMap: false,
+  transpileDependencies: ["ol"],
   devServer: {
     public: "localhost:" + port,
     host: "localhost",