【feature】webmapv3 layercatalog 查找上图layer的逻辑优化; review by qiw

xiongjiaojiao · xiongjiaojiao · commit 1515af9499d7 · 2024-11-13T11:03:08.000+08:00
diff --git a/src/common/mapping/WebMapV3.js b/src/common/mapping/WebMapV3.js
@@ -2,7 +2,7 @@
  * This program are made available under the terms of the Apache License, Version 2.0
  * which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/
 import { FetchRequest } from '../util/FetchRequest';
-import { getLayerInfosFromCatalogs, isSameRasterLayer, mergeFeatures, transformUrl } from './utils/util';
+import { getLayerInfosFromCatalogs, getMainLayerFromCatalog, isSameRasterLayer, mergeFeatures, transformUrl } from './utils/util';
 import { SourceListModelV3 } from './utils/SourceListModelV3';
 
 const LEGEND_RENDER_TYPE = {
@@ -710,9 +710,7 @@ export function createWebMapV3Extending(SuperClass, { MapManager, mapRepo, mapRe
       if (!renderer) {
         continue;
       }
-      const layerFromMapInfo = this._mapInfo.layers.find((item) => {
-        return item.id === layer.id;
-      });
+      const layerFromMapInfo = getMainLayerFromCatalog(layer.layersContent, layer.id, this._mapInfo.layers);
       let themeField;
       const sourceInfo = this._mapInfo.sources[layerFromMapInfo.source];
       if ('clusterField' in sourceInfo) {
diff --git a/src/common/mapping/utils/SourceListModelV3.js b/src/common/mapping/utils/SourceListModelV3.js
@@ -1,6 +1,6 @@
 
 import { AppreciableLayerBase } from './AppreciableLayerBase';
-import { getLayerInfosFromCatalogs } from './util';
+import { getLayerCatalogRenderLayers, getLayerInfosFromCatalogs, getMainLayerFromCatalog } from './util';
 
 export class SourceListModelV3 extends AppreciableLayerBase {
   constructor(options = {}) {
@@ -50,7 +50,7 @@ export class SourceListModelV3 extends AppreciableLayerBase {
   _createSourceCatalogs(catalogs, appreciableLayers) {
     const formatCatalogs = catalogs.map((catalog) => {
       let formatItem;
-      const { id, title = id, type, visible, children } = catalog;
+      const { id, title = id, type, visible, children, parts } = catalog;
       if (type === 'group') {
         formatItem = {
           children: this._createSourceCatalogs(children, appreciableLayers),
@@ -60,7 +60,8 @@ export class SourceListModelV3 extends AppreciableLayerBase {
           visible
         };
       } else {
-        const matchLayer = appreciableLayers.find((layer) => layer.id === id);
+        const renderLayers = getLayerCatalogRenderLayers(parts, id, this._mapInfo.layers);
+        const matchLayer = appreciableLayers.find((layer) => layer.id === renderLayers[0]);
         this.removeLayerExtralFields([matchLayer]);
         formatItem = Object.assign({}, matchLayer);
       }
@@ -75,8 +76,9 @@ export class SourceListModelV3 extends AppreciableLayerBase {
     const metadataCatalogs = getLayerInfosFromCatalogs(this._mapInfo.metadata.layerCatalog);
     const l7MarkerLayers = this._l7LayerUtil.getL7MarkerLayers();
     const layerDatas = metadataCatalogs.map(layerCatalog => {
-      const layer = this._mapInfo.layers.find(item => item.id === layerCatalog.id) || {};
-      const layerInfo = { id: layer.id, title: layerCatalog.title, renderLayers: this._getRenderLayers(layerCatalog.parts, layerCatalog.id), reused: layer.metadata && layer.metadata.reused };
+      const renderLayers = getLayerCatalogRenderLayers(layerCatalog.parts, layerCatalog.id, this._mapInfo.layers);
+      const layer = getMainLayerFromCatalog(layerCatalog.parts, layerCatalog.id, this._mapInfo.layers);
+      const layerInfo = { id: layer.id, title: layerCatalog.title, renderLayers, reused: layer.metadata && layer.metadata.reused };
       const matchProjectCatalog = projectCataglogs.find((item) => item.id === layerCatalog.id) || {};
       const { msDatasetId } = matchProjectCatalog;
       let dataSource = {};
@@ -133,16 +135,4 @@ export class SourceListModelV3 extends AppreciableLayerBase {
     layerDatas.reverse();
     return layerDatas;
   }
-
-  _getRenderLayers(layerIds, layerId) {
-    if (layerIds) {
-      if (layerIds.includes(layerId)) {
-        return layerIds;
-      } else {
-        return [layerId, ...layerIds];
-      }
-    } else {
-      return [layerId];
-    }
-  }
 }
diff --git a/src/common/mapping/utils/util.js b/src/common/mapping/utils/util.js
@@ -185,4 +185,18 @@ export function createAppreciableLayerId(layer) {
   // 针对 MapboxStyle 或者其它额外的 layer
   // type: background 和某些 overlaymanager layers 只有 id
   return layer.sourceLayer || layer.source || layer.id;
+}
+
+export function getLayerCatalogRenderLayers(parts, catalogId, layersOnMap) {
+  // ms 3.0.5以下的版本 layerCatalogs layersContent/parts 不包括自身的上图layerid 只包含复合图层的id
+  const renderLayers = layersOnMap.some(item => item.id === catalogId) ? [catalogId] : [];
+  if (parts) {
+    renderLayers.push(...parts);
+  }
+  return Array.from(new Set(renderLayers)).filter(item => !!item);
+}
+
+export function getMainLayerFromCatalog(layerParts, catalogId, layersOnMap) {
+  const renderLayers = getLayerCatalogRenderLayers(layerParts, catalogId, layersOnMap);
+  return layersOnMap.find(item => item.id === renderLayers[0]);
 }
diff --git a/test/common/mapping/utils/SourceListModelV3Spec.js b/test/common/mapping/utils/SourceListModelV3Spec.js
@@ -271,6 +271,66 @@ describe('SourceListV3', () => {
     done();
   });
 
+  it('layerCatalog parts not include self layer and ui id is layerId on Map', (done) => {
+    const mapInfo = JSON.parse(mapstudioWebMap_symbol);
+    const sourceListModel = new SourceListModelV3({
+      map,
+      mapInfo,
+      mapResourceInfo: {},
+      legendList: [],
+      l7LayerUtil: {
+        isL7Layer,
+        getL7MarkerLayers: () => ({})
+      }
+    });
+    const layerList = sourceListModel.getLayerCatalog();
+    expect(layerList.length).toBe(mapInfo.metadata.layerCatalog.length + 4);
+    const selfIds = mapInfo.metadata.layerCatalog.map(item => item.id);
+    const selfLayerCatalogs = layerList.filter(layer => selfIds.includes(layer.id));
+    expect(selfLayerCatalogs.some(layer => !layer.renderLayers.includes(layer.id))).toBe(false);
+    done();
+  });
+
+  it('layerCatalog parts include self layer', (done) => {
+    const mapInfo = JSON.parse(mapstudioWebMap_labelLegend);
+    const sourceListModel = new SourceListModelV3({
+      map,
+      mapInfo,
+      mapResourceInfo: {},
+      legendList: [],
+      l7LayerUtil: {
+        isL7Layer,
+        getL7MarkerLayers: () => ({})
+      }
+    });
+    const layerList = sourceListModel.getLayerCatalog();
+    expect(layerList.length).toBe(mapInfo.metadata.layerCatalog.length + 3);
+    const selfIds = mapInfo.metadata.layerCatalog.map(item => item.id);
+    const selfLayerCatalogs = layerList.filter(layer => selfIds.includes(layer.id));
+    expect(selfLayerCatalogs.some(layer => !layer.renderLayers.includes(layer.id))).toBe(false);
+    done();
+  });
+
+  it('layerCatalog parts not include self layer and ui id is not layerId on Map', (done) => {
+    const mapInfo = JSON.parse(mapstudioWebMap_separate_layerCatalogId);
+    const sourceListModel = new SourceListModelV3({
+      map,
+      mapInfo,
+      mapResourceInfo: {},
+      legendList: [],
+      l7LayerUtil: {
+        isL7Layer,
+        getL7MarkerLayers: () => ({})
+      }
+    });
+    const layerList = sourceListModel.getLayerCatalog();
+    expect(layerList.length).toBe(mapInfo.metadata.layerCatalog.length + 4);
+    const selfIds = mapInfo.metadata.layerCatalog.filter(item => item.parts).map(item => item.id);
+    const selfLayerCatalogs = layerList.filter(layer => selfIds.includes(layer.id));
+    expect(selfLayerCatalogs.some(layer => layer.renderLayers.includes(layer.id))).toBe(false);
+    done();
+  });
+
   it('destroy', (done) => {
     const mapInfo = JSON.parse(mapstudioWebMap_chart);
     const sourceListModel = new SourceListModelV3({
diff --git a/test/mapboxgl/mapping/WebMapV3Spec.js b/test/mapboxgl/mapping/WebMapV3Spec.js
@@ -1370,4 +1370,42 @@ describe('mapboxgl-webmap3.0', () => {
       mapstudioWebmap.setLayersVisible([layers[0]], 'visible');
     });
   });
+
+  it('layerCatalog separate ui id and render id', (done) => {
+    spyOn(MapManagerUtil, 'default').and.callFake(mbglmap);
+    spyOn(FetchRequest, 'get').and.callFake((url) => {
+      if (url.indexOf('web/config/portal.json') > -1) {
+        return Promise.resolve(new Response(JSON.stringify(iportal_serviceProxy)));
+      }
+      if (url.indexOf('map.json') > -1) {
+        return Promise.resolve(new Response(mapstudioWebMap_separate_layerCatalogId));
+      }
+      if (url.indexOf('617580084.json') > -1) {
+        return Promise.resolve(new Response(msProjectINfo_separate_layerCatalogId));
+      }
+      if (url.indexOf('/sprite') > -1) {
+        return Promise.resolve(new Response(msSpriteInfo));
+      }
+      return Promise.resolve();
+    });
+    mapstudioWebmap = new WebMap(id, {
+      server: server
+    });
+
+    mapstudioWebmap.on('mapcreatesucceeded', ({ map }) => {
+      expect(map).not.toBeUndefined();
+      expect(mapstudioWebmap.map).toEqual(map);
+      const style = map.getStyle();
+      const webMapV3 = mapstudioWebmap._getWebMapInstance();
+      const mapInfo = JSON.parse(mapstudioWebMap_separate_layerCatalogId);
+      expect(style.layers.length).toBe(mapInfo.layers.length);
+      expect(webMapV3.getLegends().length).not.toBe(0);
+      const layerCatalogs = webMapV3.getLayerCatalog();
+      expect(layerCatalogs.length).not.toBe(0);
+      expect(layerCatalogs.length).toBe(mapInfo.metadata.layerCatalog.length);
+      const appreciableLayers = webMapV3.getLayers();
+      expect(layerCatalogs.length).toBe(appreciableLayers.length);
+      done();
+    });
+  });
 });
diff --git a/test/maplibregl/mapping/WebMapV3Spec.js b/test/maplibregl/mapping/WebMapV3Spec.js
@@ -1323,4 +1323,42 @@ describe('maplibregl-webmap3.0', () => {
       mapstudioWebmap.setLayersVisible([layers[0]], 'visible');
     });
   });
+
+  it('layerCatalog separate ui id and render id', (done) => {
+    spyOn(MapManagerUtil, 'default').and.callFake(mbglmap);
+    spyOn(FetchRequest, 'get').and.callFake((url) => {
+      if (url.indexOf('web/config/portal.json') > -1) {
+        return Promise.resolve(new Response(JSON.stringify(iportal_serviceProxy)));
+      }
+      if (url.indexOf('map.json') > -1) {
+        return Promise.resolve(new Response(mapstudioWebMap_separate_layerCatalogId));
+      }
+      if (url.indexOf('617580084.json') > -1) {
+        return Promise.resolve(new Response(msProjectINfo_separate_layerCatalogId));
+      }
+      if (url.indexOf('/sprite') > -1) {
+        return Promise.resolve(new Response(msSpriteInfo));
+      }
+      return Promise.resolve();
+    });
+    mapstudioWebmap = new WebMap(id, {
+      server: server
+    });
+
+    mapstudioWebmap.on('mapcreatesucceeded', ({ map }) => {
+      expect(map).not.toBeUndefined();
+      expect(mapstudioWebmap.map).toEqual(map);
+      const style = map.getStyle();
+      const webMapV3 = mapstudioWebmap._getWebMapInstance();
+      const mapInfo = JSON.parse(mapstudioWebMap_separate_layerCatalogId);
+      expect(style.layers.length).toBe(mapInfo.layers.length);
+      expect(webMapV3.getLegends().length).not.toBe(0);
+      const layerCatalogs = webMapV3.getLayerCatalog();
+      expect(layerCatalogs.length).not.toBe(0);
+      expect(layerCatalogs.length).toBe(mapInfo.metadata.layerCatalog.length);
+      const appreciableLayers = webMapV3.getLayers();
+      expect(layerCatalogs.length).toBe(appreciableLayers.length);
+      done();
+    });
+  });
 });
diff --git a/test/resources/WebMapV3.js b/test/resources/WebMapV3.js
