【feature】图层列表不可拖拽的图层排序

SuperMap · Sep 27, 2024 · 4a10639 · 4a10639
1 parent 30a29a8
commit 4a10639
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 11 deletions.
diff --git a/src/mapboxgl/_types/map-event.js b/src/mapboxgl/_types/map-event.js
@@ -61,10 +61,14 @@ export default new Vue({
               datas = sortLayerCatalog(datas, _this.customLayerCatalogCache[webmapTarget]);
             }
             _this.updateLayerCatalogsVisible(datas);
+            datas = _this.updateImmutableOrderLayers(datas);
           }
-          if (propKey === 'getAppreciableLayers' && _this.customLayerCatalogCache[webmapTarget]) {
-            const flatterLayers = flattenLayerCatalog(_this.customLayerCatalogCache[webmapTarget]);
-            datas = sortLayerCatalog(datas, flatterLayers.reverse());
+          if (propKey === 'getAppreciableLayers') {
+            if (_this.customLayerCatalogCache[webmapTarget]) {
+              const flatterLayers = flattenLayerCatalog(_this.customLayerCatalogCache[webmapTarget]);
+              datas = sortLayerCatalog(datas, flatterLayers.reverse());
+            }
+            datas = _this.updateImmutableOrderLayers(datas, true);
           }
           return () => datas;
         }
@@ -149,5 +153,17 @@ export default new Vue({
         this.updateLayerCatalogsVisible(data.children);
       }
     }
+  },
+  updateImmutableOrderLayers(layers, revert) {
+    let topLayers = layers.filter(item => item.layerOrder && item.layerOrder.toLowerCase() === 'top');
+    const migrationLayers = topLayers.filter(item => item.type === 'MIGRATION');
+    const leftTopLayers = topLayers.filter(item => item.type !== 'MIGRATION');
+    topLayers = migrationLayers.concat(leftTopLayers);
+    const bottomLayers = layers.filter(item => item.layerOrder && item.layerOrder.toLowerCase() === 'bottom');
+    const autoLayers = layers.filter(item => !item.layerOrder || item.layerOrder.toLowerCase() === 'auto');
+    if (revert) {
+      return bottomLayers.concat(autoLayers, topLayers);
+    }
+    return topLayers.concat(autoLayers, bottomLayers);
   }
 });
diff --git a/src/mapboxgl/web-map/LayerGroup.vue b/src/mapboxgl/web-map/LayerGroup.vue
@@ -159,6 +159,8 @@ export default {
         if (data.children) {
           const children = this.getTreeData(data.children);
           data.children = children;
+        } else if(item.layerOrder !== 'auto') {
+          data.disabled = true;
         }
         treeData.push(data);
       });

diff --git a/src/mapboxgl/web-map/WebMapViewModel.ts b/src/mapboxgl/web-map/WebMapViewModel.ts
@@ -138,6 +138,12 @@ interface AddlayerssucceededParams {
   allLoaded: boolean;
 }
 
+interface LayerUpdateChangedParams {
+  layers: Record<string, any>[];
+  relevantLayers: Record<string, any>[];
+  layerCatalog: Record<string, any>[];
+}
+
 export default class WebMapViewModel extends Events {
   map: mapboxglTypes.Map;
 
@@ -201,7 +207,6 @@ export default class WebMapViewModel extends Events {
       'mapcreatesucceeded',
       'mapcreatefailed',
       'layercreatefailed',
-      'layeraddchanged',
       'layerupdatechanged',
       'baidumapnotsupport',
       'projectionnotmatch',
@@ -212,7 +217,7 @@ export default class WebMapViewModel extends Events {
     this._mapInitializedHandler = this._mapInitializedHandler.bind(this);
     this._mapCreateSucceededHandlerHandler = this._mapCreateSucceededHandlerHandler.bind(this);
     this._mapBeforeRemoveHandler = this._mapBeforeRemoveHandler.bind(this);
-    this._layerAddChangedHandler = this._layerAddChangedHandler.bind(this);
+    this._layerUpdateChangedHandler = this._layerUpdateChangedHandler.bind(this);
     this._initWebMap();
   }
 
@@ -521,8 +526,10 @@ export default class WebMapViewModel extends Events {
     this.triggerEvent('addlayerssucceeded', params);
   }
 
-  private _layerAddChangedHandler({ layers }) {
-    this._cacheCleanLayers = layers;
+  private _layerUpdateChangedHandler(params: LayerUpdateChangedParams) {
+    const { relevantLayers } = params;
+    this._cacheCleanLayers = relevantLayers;
+    this.triggerEvent('layerupdatechanged', params);
   }
 
   private _createMap() {
@@ -535,7 +542,7 @@ export default class WebMapViewModel extends Events {
       }, {}),
       mapinitialized: this._mapInitializedHandler,
       mapcreatesucceeded: this._mapCreateSucceededHandlerHandler,
-      layeraddchanged: this._layerAddChangedHandler,
+      layerupdatechanged: this._layerUpdateChangedHandler,
       mapbeforeremove: this._mapBeforeRemoveHandler
     };
     this._handler = new mapboxgl.supermap.WebMap(this.mapId, this.options, this.mapOptions);

diff --git a/src/mapboxgl/web-map/layer/animate-marker/AnimateMarkerLayerViewModel.ts b/src/mapboxgl/web-map/layer/animate-marker/AnimateMarkerLayerViewModel.ts
@@ -90,6 +90,9 @@ export default class AnimateMarkerLayerViewModel extends mapboxgl.Evented {
       paint: {
         'circle-radius': 0,
         'circle-opacity': 1
+      },
+      metadata: {
+        SM_Layer_Order: 'Top'
       }
     });
 

diff --git a/static/libs/iclient-mapboxgl/iclient-mapboxgl.min.js b/static/libs/iclient-mapboxgl/iclient-mapboxgl.min.js
diff --git a/test/unit/mocks/mapboxgl_iclient_webmap.js b/test/unit/mocks/mapboxgl_iclient_webmap.js
@@ -20,8 +20,7 @@ class WebMap extends Evented {
       'mapbeforeremove',
       'mapinitialized',
       'layercreatefailed',
-      'layerupdatechanged',
-      'layeraddchanged'
+      'layerupdatechanged'
     ];
     this._initWebMap();
     if (this.mapOptions) {