优化图标展示性能

web/src/views/common/MapComponent.vue

@@ -296,8 +296,7 @@ export default {
           feature.setId(data[i].id)
           feature.customData = data[i].data
           feature.setProperties({
-            status: 'offline',
-            iconSrc: 'static/images/gis/camera1-offline.png'
+            status: data[i].status,
           })
           // const style = new Style()
           // style.setImage(new Icon({
@@ -321,17 +320,23 @@ export default {
             // 'circle-fill-color': 'red',
             // 'circle-stroke-color': 'white',
             // 'circle-stroke-width': 0.5
-            'icon-src': 'static/images/gis/camera1.png',
-            // 'icon-src': [
-            //   'case',
-            //   ['==', ['get', 'status'], 'online'], 'static/images/gis/camera1.png',
-            //   ['==', ['get', 'status'], 'offline'], 'static/images/gis/camera1-offline.png',
-            //   ['==', ['get', 'status'], 'checked'], 'static/images/gis/camera1-red.png',
-            //   'static/images/gis/camera1.png'
-            // ],
-            // 'icon-src': ['get', 'iconSrc'],
-            'icon-width': 40,
-            'icon-height': 40
+            'icon-src': 'static/images/gis/sprite.png',
+            'icon-width': 120,
+            'icon-height': 40,
+            'icon-size': [40, 40],
+            'icon-anchor': [0.5, 1],
+            'icon-offset-origin': 'bottom-left',
+            'icon-offset': [
+              'match',
+              ['get', 'status'],
+              'ON',
+              [0, 0],
+              'OFF',
+              [40, 0],
+              'checked',
+              [80, 0],
+              [120, 60]
+            ]
           }
         })
         if (clickEvent && typeof clickEvent === 'function') {
@@ -473,13 +478,9 @@ export default {
       const feature = new Feature(new Point(fromLonLat(data.position)))
       feature.setId(data.id)
       feature.customData = data.data
-      const style = new Style()
-      style.setImage(new Icon({
-        anchor: data.image.anchor,
-        crossOrigin: 'Anonymous',
-        src: data.image.src
-      }))
-      feature.setStyle(style)
+      feature.setProperties({
+        status: data.status
+      })
       layer.getSource().addFeature(feature)
     },
 

web/src/views/map/index.vue

@@ -246,6 +246,7 @@ export default {
           id: data.gbId,
           position: position,
           data: data,
+          status: data.gbStatus,
           image: {
             anchor: [0.5, 1],
             src: this.getImageByChannel(data)
@@ -290,6 +291,7 @@ export default {
             let cameraData = {
               id: item.gbId,
               position: position,
+              status: item.gbStatus,
               data: item,
               image: {
                 anchor: [0.5, 1],
@@ -465,6 +467,7 @@ export default {
         id: channel.gbId,
         position: position,
         data: channel,
+        status: 'checked',
         image: {
           anchor: [0.5, 1],
           src: 'static/images/gis/camera1-red.png'
@@ -485,6 +488,7 @@ export default {
         id: channel.gbId,
         position: [channel.gbLongitude, channel.gbLatitude],
         data: channel,
+        status: channel.gbStatus,
         image: {
           anchor: [0.5, 1],
           src: this.getImageByChannel(channel)
@@ -506,6 +510,7 @@ export default {
             id: channel.gbId,
             position: position,
             data: channel,
+            status: channel.gbStatus,
             image: {
               anchor: [0.5, 1],
               src: this.getImageByChannel(channel)
@@ -766,6 +771,7 @@ export default {
           id: item.gbId,
           position: position,
           data: item,
+          status: item.gbStatus,
           image: {
             anchor: [0.5, 1],
             src: this.getImageByChannel(item)