fix isvj-6918 动态标记图层无法通过图层列表控制显隐 review by luox

SuperMap · Nov 7, 2023 · 88ca07b · 88ca07b
1 parent 1fa56eb
commit 88ca07b
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 3 deletions.
diff --git a/src/mapboxgl/web-map/layer/animate-marker/AnimateMarkerLayer.vue b/src/mapboxgl/web-map/layer/animate-marker/AnimateMarkerLayer.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { Component, Mixins, Prop, Watch } from 'vue-property-decorator';
 import MapGetter from 'vue-iclient/src/mapboxgl/_mixin/map-getter';
+import Layer from 'vue-iclient/src/mapboxgl/_mixin/layer';
 import AnimateMarkerLayerViewModel from './AnimateMarkerLayerViewModel';
 import BreathingApertureMarker from './marker/BreathingApertureMarker';
 import DiffusedApertureMarker from './marker/DiffusedApertureMarker';
@@ -19,7 +20,7 @@ import { FeatureCollection } from 'geojson';
 @Component({
   name: 'SmAnimateMarkerLayer'
 })
-class AnimateMarkerLayer extends Mixins(MapGetter) {
+class AnimateMarkerLayer extends Mixins(MapGetter, Layer) {
   viewModel: AnimateMarkerLayerViewModel;
   // eslint-disable-next-line
   map: mapboxglTypes.Map;
@@ -36,6 +37,8 @@ class AnimateMarkerLayer extends Mixins(MapGetter) {
 
   _pointFeatures: any;
 
+  layerId: string;
+
   @Prop() features: FeatureCollection;
 
   @Prop({ default: 'breathingAperture' }) type: any;
@@ -117,7 +120,7 @@ class AnimateMarkerLayer extends Mixins(MapGetter) {
   created() {
     this._pointFeatures = this._getPointFeatures(this.features);
     this._getMarkerElement(this._pointFeatures);
-    this.viewModel = new AnimateMarkerLayerViewModel(this._pointFeatures, this._markersElement, this.fitBounds);
+    this.viewModel = new AnimateMarkerLayerViewModel(this.layerId, this._pointFeatures, this._markersElement, this.fitBounds);
   }
 
   mounted() {

diff --git a/src/mapboxgl/web-map/layer/animate-marker/AnimateMarkerLayerViewModel.ts b/src/mapboxgl/web-map/layer/animate-marker/AnimateMarkerLayerViewModel.ts
@@ -15,12 +15,18 @@ export default class AnimateMarkerLayerViewModel extends mapboxgl.Evented {
 
   fitBounds: boolean;
 
-  constructor(features: FeatureCollection, markersElement: HTMLElement[], fitBounds = true) {
+  layerId: string;
+
+  updateLayerFn: (data?: mapboxglTypes.MapStyleDataEvent) => void;
+
+  constructor(layerId, features: FeatureCollection, markersElement: HTMLElement[], fitBounds = true) {
     super();
+    this.layerId = layerId;
     this.features = features;
     this.markers = [];
     this.markersElement = markersElement;
     this.fitBounds = fitBounds;
+    this.updateLayerFn = this._updateLayer.bind(this);
   }
 
   public setMap(mapInfo) {
@@ -61,6 +67,24 @@ export default class AnimateMarkerLayerViewModel extends mapboxgl.Evented {
     ) {
       return;
     }
+
+    this.map.addLayer({
+      id: this.layerId,
+      type: 'circle',
+      source: {
+        type: 'geojson',
+        data: this.features
+      },
+      layout: {
+        visibility: 'visible'
+      },
+      paint: {
+        'circle-radius': 0
+      }
+    });
+
+    this.map.on('styledata', this.updateLayerFn);
+
     this.features.features.forEach((point, index) => {
       // @ts-ignore
       let coordinates = point.geometry.coordinates;
@@ -85,7 +109,23 @@ export default class AnimateMarkerLayerViewModel extends mapboxgl.Evented {
     }
   }
 
+  private _updateLayer() {
+    let layer = this.map.getLayer(this.layerId);
+    if (layer) {
+      this.markers.length > 0 &&
+    this.markers.forEach(marker => {
+      // @ts-ignore
+      marker && (marker.getElement().style.display = layer.visibility === 'visible' ? 'block' : 'none');
+    });
+    }
+  }
+
   public removed() {
+    if(this.map && this.map.getLayer(this.layerId)) {
+      this.map.removeLayer(this.layerId);
+      this.map.removeSource(this.layerId);
+    }
+    this.map.off('styledata', this.updateLayerFn);
     this.markers.length > 0 &&
       this.markers.forEach(marker => {
         marker && marker.remove();

diff --git a/src/mapboxgl/web-map/layer/animate-marker/__tests__/AnimateMarkerLayer.spec.js b/src/mapboxgl/web-map/layer/animate-marker/__tests__/AnimateMarkerLayer.spec.js
@@ -431,4 +431,38 @@ describe('AnimateMarkerLayer.vue', () => {
     expect(mockFn.mock.calls).toEqual([[ true ], [ false ]]);
     done();
   });
+
+  it('test layerId', async done => {
+    const newFeatures= {
+      features: [
+        {
+          geometry: {
+            type: 'Point',
+            coordinates: [122, 53]
+          },
+          properties: {
+            SmID: '10'
+          },
+          type: 'Feature'
+        }
+      ],
+      type: 'FeatureCollection'
+    };
+    wrapper = mount(SmAnimateMarkerLayer, {
+      propsData: {
+        mapTarget: 'map',
+        textField: 'name',
+        layerId: 'test-id'
+      }
+    });
+    await mapSubComponentLoaded(wrapper);
+    const mockFn = jest.fn();
+    wrapper.vm.viewModel._createMarker = mockFn;
+    await wrapper.setProps({
+      features: newFeatures
+    });
+    expect(mockFn.mock.calls).toEqual([[true]]);
+    expect(wrapper.vm.viewModel.layerId).toBe('test-id');
+    done();
+  });
 });