频繁操作图层会引起内部报错问题

src/components/easyMap/class/ShipTrack.ts

@@ -65,7 +65,7 @@ class ShipTrack {
     this.map.addLayer(this.trackLayer);
     this.refreshStyle()
     this.functions.zoom = debounce(e => {
-      this.refreshStyle()
+      this.refreshData()
     }, 300)
     this.map.getView().on('change:resolution', this.functions.zoom)
     return this
@@ -162,13 +162,46 @@ class ShipTrack {
     this.directionLayer.set('layerName', this.uuid + '_direction')
     this.map.addLayer(this.directionLayer)
   }
+  refreshData() {
+    const resolution = this.map.getView().getResolution()
+    let radio = (30 * resolution);
+    if (this.map.getView().getZoom() == this.map.getView().getMaxZoom()) {
+      radio = 0
+    }
+    const simplifyGeom: any = new geom.LineString([...this.historyPointCoordinates, ...this.realPointCoordinates]).simplify(radio)
+    const simplifyCoor = simplifyGeom.getCoordinates()
+    const trackFeat = this.trackLayer.getSource().getFeatures()[0]
+    trackFeat.setGeometry(simplifyGeom)
+    const directionFeatures: any = []
+    const pointFeatures: any = []
+    simplifyCoor.forEach((v, i) => {
+      if (i > 0) {
+        const last = simplifyCoor[i - 1]
+        const dx = v[0] - last[0];
+        const dy = v[1] - last[1];
+        const rotation = Math.atan2(dy, dx) * -1;
+        const directFeat = new format.WKT().readFeature(`POINT(${(v[0] + last[0]) / 2} ${(v[1] + last[1]) / 2})`)
+        directFeat.set('rotation_', rotation)
+        directionFeatures.push(directFeat)
+      }
+      const d = this.pointMap.get(`${v[0]}_${v[1]}`)
+      const feat: any = new format.WKT().readFeature(`POINT(${v[0]} ${v[1]})`)
+      feat.set('data_', d)
+      feat.set('type_', 'track-point')
+      pointFeatures.push(feat)
+    });
+    this.pointLayer.getSource().clear()
+    this.pointLayer.getSource().addFeatures(pointFeatures)
+    this.directionLayer.getSource().clear()
+    this.directionLayer.getSource().addFeatures(directionFeatures)
+  }
   add(newPoints) {
     newPoints.forEach((v, i) => {
       this.pointMap.set(`${v[this.keyMapper.lon]}_${v[this.keyMapper.lat]}`, v)
       this.historyPointCoordinates.push([v[this.keyMapper.lon], v[this.keyMapper.lat]])
       this.historyPoints.push(v)
     })
-    this.refreshStyle()
+    this.refreshData()
   }
   update(newPoints) {
     newPoints.forEach((v, i) => {
@@ -176,7 +209,7 @@ class ShipTrack {
       this.realPointCoordinates.push([v[this.keyMapper.lon], v[this.keyMapper.lat]])
       this.realPoints.push(v)
     })
-    this.refreshStyle()
+    this.refreshData()
   }
   setColor(val) {
     this.color = val