【feature】点击数据查询结果高亮

SuperMap · Oct 12, 2024 · 587e0b3 · 587e0b3
1 parent e0b704b
commit 587e0b3
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 31 deletions.
diff --git a/src/mapboxgl/_utils/HightlighLayer.ts b/src/mapboxgl/_utils/HightlighLayer.ts
@@ -161,7 +161,7 @@ export default class HighlightLayer extends mapboxgl.Evented {
     });
   }
 
-  addHighlightLayers(layer: mapboxglTypes.Layer, filter?: any[]) {
+  addHighlightLayers(layer: mapboxglTypes.Layer, filter: any[] = this.filterExp) {
     let type = layer.type as unknown as StyleTypes[number];
     let paint = layer.paint;
     const id = layer.id;
@@ -213,6 +213,22 @@ export default class HighlightLayer extends mapboxgl.Evented {
     });
   }
 
+  createFilterExp(feature: LayerClickedFeature, fields: string[] = this.filterFields) {
+    // 高亮过滤(所有字段)
+    const filterKeys = ['smx', 'smy', 'lon', 'lat', 'longitude', 'latitude', 'x', 'y', 'usestyle', 'featureinfo'];
+    const isBasicType = (item: any) => {
+      return typeof item === 'string' || typeof item === 'number' || typeof item === 'boolean';
+    };
+    const filter: any[] = ['all'];
+    const featureKeys: string[] = fields || feature._vectorTileFeature._keys;
+    return featureKeys.reduce((exp, key) => {
+      if (filterKeys.indexOf(key.toLowerCase()) === -1 && isBasicType(feature.properties[key])) {
+        exp.push(['==', key, feature.properties[key]]);
+      }
+      return exp;
+    }, filter);
+  }
+
   _createLayerHighlightStyle(types: StyleTypes, layerId: string) {
     const highlightStyle: HighlightStyle = JSON.parse(JSON.stringify(this.hightlightStyle));
     types
@@ -272,7 +288,7 @@ export default class HighlightLayer extends mapboxgl.Evented {
     const features = this._queryLayerFeatures(e);
     this.removeHighlightLayers();
     if (features[0]?.layer) {
-      this.addHighlightLayers(features[0].layer, this.filterExp ?? this._createFilterExp(features[0], this.filterFields));
+      this.addHighlightLayers(features[0].layer, this.filterExp ?? this.createFilterExp(features[0]));
     }
     this.fire('mapselectionchanged', { features });
   }
@@ -297,20 +313,4 @@ export default class HighlightLayer extends mapboxgl.Evented {
     }) as unknown as LayerClickedFeature[];
     return features;
   }
-
-  _createFilterExp(feature: LayerClickedFeature, fields?: string[]) {
-    // 高亮过滤(所有字段)
-    const filterKeys = ['smx', 'smy', 'lon', 'lat', 'longitude', 'latitude', 'x', 'y', 'usestyle', 'featureinfo'];
-    const isBasicType = (item: any) => {
-      return typeof item === 'string' || typeof item === 'number' || typeof item === 'boolean';
-    };
-    const filter: any[] = ['all'];
-    const featureKeys: string[] = fields || feature._vectorTileFeature._keys;
-    return featureKeys.reduce((exp, key) => {
-      if (filterKeys.indexOf(key.toLowerCase()) === -1 && isBasicType(feature.properties[key])) {
-        exp.push(['==', key, feature.properties[key]]);
-      }
-      return exp;
-    }, filter);
-  }
 }
diff --git a/src/mapboxgl/query/Query.vue b/src/mapboxgl/query/Query.vue
@@ -307,8 +307,10 @@ export default {
       this.activeResultIndex = index;
       this.popup && this.popup.remove() && (this.popup = null);
       let filter = e.target.innerHTML;
-      let feature = this.viewModel.getFilterFeature(filter.split('：')[1].trim());
+      const fieldValue = filter.split('：')[1].trim();
+      let feature = this.viewModel.getFilterFeature(fieldValue);
       this.addPopup(feature);
+      this.viewModel.highlightSelection(fieldValue);
     },
     registerEvents() {
       this.viewModel.on('querysucceeded', e => {

diff --git a/src/mapboxgl/query/QueryViewModel.js b/src/mapboxgl/query/QueryViewModel.js
@@ -128,15 +128,8 @@ export default class QueryViewModel extends HighlightLayer {
    * @returns {Object} 要素信息。
    */
   getFilterFeature(filter) {
-    let features = this.queryResult.result;
-    let feature;
-    for (let i = 0; i < features.length; i++) {
-      let propertiesValue = getValueCaseInsensitive(features[i].properties, 'smid');
-      if (filter === propertiesValue) {
-        feature = this._getFeatrueInfo(features[i]);
-        break;
-      }
-    }
+    let matchFeature = this._findFeatureByFieldValue(filter);
+    const feature = this._getFeatrueInfo(matchFeature);
     this.map.flyTo({ center: feature.coordinates });
     return feature;
   }
@@ -201,6 +194,13 @@ export default class QueryViewModel extends HighlightLayer {
       .addTo(this.map);
   }
 
+  highlightSelection(fieldValue) {
+    const feature = this._findFeatureByFieldValue(fieldValue);
+    const filterExp = this.createFilterExp(feature, this.filterFields);
+    this.removeHighlightLayers();
+    this.addHighlightLayers(this.map.getLayer(this.layerID).serialize(), filterExp);
+  }
+
   _addOverlayToMap(type, source, layerID) {
     let mbglStyle = {
       circle: {
@@ -261,4 +261,17 @@ export default class QueryViewModel extends HighlightLayer {
   _handleMapSelectionChanged(e) {
     this.getPopupFeature(e);
   }
+
+  _findFeatureByFieldValue(fieldValue) {
+    let features = this.queryResult.result;
+    let feature;
+    for (let i = 0; i < features.length; i++) {
+      let propertiesValue = getValueCaseInsensitive(features[i].properties, 'smid');
+      if (fieldValue === propertiesValue) {
+        feature = features[i];
+        break;
+      }
+    }
+    return feature;
+  }
 }
diff --git a/src/mapboxgl/query/__tests__/Query.spec.js b/src/mapboxgl/query/__tests__/Query.spec.js
@@ -252,8 +252,9 @@ describe('query', () => {
     const spyquery = jest.spyOn(wrapper.vm, 'query');
     wrapper.find(SmButton).find('.sm-component-query__a-button').trigger('click');
     wrapper.vm.viewModel.on('querysucceeded', async e => {
-      await wrapper.vm.$nextTick();
-      wrapper.find('.sm-component-query__result-body ul li').trigger('click');
+      const selectionSpy = jest.spyOn(wrapper.vm.viewModel, 'highlightSelection');
+      await wrapper.find('.sm-component-query__result-body ul li').trigger('click');
+      expect(selectionSpy).toBeCalled();
       done();
     });
     expect(spyquery).toBeCalled();

diff --git a/test/unit/mocks/map.js b/test/unit/mocks/map.js
@@ -367,7 +367,10 @@ var Map = function (options) {
       if(id === 'POINT-0'){
         return ''
       }
-      return this.addedLayers[id];
+      return {
+        ...this.addedLayers[id],
+        serialize: () => this.addedLayers[id]
+      };
     }
     else if(id === 'China-identify-SM-highlighted'){
       return {}