[fix]图层管理投影不匹配提示 review by qiw

src/common/_lang/en.js

@@ -132,7 +132,8 @@ export default {
     sampleDataNotSupport: 'Sample datas is not supported yet!',
     drillLayersNotSupport: 'Drill-down layers are not supported yet!',
     mvtNotSupport: 'Vector tile layers is not supported yet!',
-    mapCreatedFailed: 'Failed to load map!'
+    mapCreatedFailed: 'Failed to load map!',
+    projectionnotmatch: '{title} does not match the current map projection!'
   },
   drillMap: {
     goBack: 'Go Back'

src/common/_lang/zh.js

@@ -134,7 +134,8 @@ export default {
     sampleDataNotSupport: '暂不支持加载示例数据！',
     drillLayersNotSupport: '暂不支持加载下钻图层！',
     mvtNotSupport: '暂不支持加载矢量瓦片图层！',
-    mapCreatedFailed: '地图加载失败！'
+    mapCreatedFailed: '地图加载失败！',
+    projectionnotmatch: '{title}与当前地图投影不匹配！'
   },
   videoPlus: {
     loadingTip: '视频加载中...'

src/mapboxgl/web-map/WebMapViewModel.ts

@@ -52,7 +52,7 @@ const OPACITY_MAP = {
  * @param {String} [options.googleMapsLanguage] - 用于定义在谷歌地图图块上显示标签的语言。当设置 `id` 且底图为谷歌地图时有效。
  * @param {boolean} [options.withCredentials=false] - 请求是否携带 cookie。当设置 `id` 时有效。
  * @param {boolean} [options.excludePortalProxyUrl] - server 传递过来的 URL 是否带有代理。当设置 `id` 时有效。
- * @param {boolean} [options.ignoreBaseProjection = 'false'] - 是否忽略底图坐标系和叠加图层坐标系不一致。
+ * @param {boolean} [options.ignoreBaseProjection =false] - 是否忽略底图坐标系和叠加图层坐标系不一致。
  * @param {String} [options.iportalServiceProxyUrlPrefix] - iportal的代理服务地址前缀。
  */
 interface webMapOptions {

src/mapboxgl/web-map/control/layer-manager/LayerManager.vue

@@ -148,11 +148,13 @@ export default {
     this.viewModel.on('layersadded', this.addMapCombination);
     this.viewModel.on('layerorsourcenameduplicated', this.handleLayerOrSourceNameDuplicated);
     this.viewModel.on('layersremoved', this.removeMapCombination);
+    this.viewModel.on('projectionnotmatch', this.addLayerField);
   },
   beforeDestroy() {
     this.viewModel.off('layersadded', this.addMapCombination);
     this.viewModel.off('layerorsourcenameduplicated', this.handleLayerOrSourceNameDuplicated);
     this.viewModel.off('layersremoved', this.removeMapCombination);
+    this.viewModel.off('projectionnotmatch', this.addLayerField);
   },
   methods: {
     omitVisible(val) {
@@ -299,6 +301,10 @@ export default {
     },
     handleLayerOrSourceNameDuplicated() {
       Message.error(this.$t('webmap.layerorsourcenameduplicated'));
+    },
+    addLayerField({ e, nodeKey }) {
+      const node = this.getNodeByKey(this.treeData, nodeKey);
+      Message.error(this.$t(`webmap.${e.type}`, { title: node ? node.title : '' }));
     }
   },
   loaded() {

src/mapboxgl/web-map/control/layer-manager/LayerManagerViewModel.js

@@ -67,7 +67,11 @@ class LayerManageViewModel extends mapboxgl.Evented {
         // 判断 是否缓存数组里有值，取出最新的，调用this.addLayer();
         this.fire('layersadded', { nodeKey, nodeValue: webMapViewModel });
         this.handleNextMap();
-      }
+      },
+      projectionnotmatch: (e) => {
+        this.fire('projectionnotmatch', { nodeKey, e });
+        this.handleNextMap();
+      },
     });
     // this.webMapViewModel.addWebMap(layerFilter);
     this.cacheMaps[nodeKey] = this.webMapViewModel;

src/mapboxgl/web-map/control/layer-manager/__tests__/LayerManager.spec.js

@@ -8,6 +8,7 @@ import mockFetch from 'vue-iclient/test/unit/mocks/FetchRequest';
 import flushPromises from 'flush-promises';
 import mapWrapperLoaded from 'vue-iclient/test/unit/mapWrapperLoaded.js';
 import mapEvent from 'vue-iclient/src/mapboxgl/_types/map-event';
+import Message from 'vue-iclient/src/common/message/index.js';
 
 const layers = [
   {
@@ -27,7 +28,8 @@ describe('LayerManager.vue', () => {
     const fetchresource = {
       'https://fakeiportal.supermap.io/iportal/web/config/portal.json': iportal_serviceProxy,
       'https://fakeiportal.supermap.io/iportal/web/maps/123/map.json': uniqueLayer_point,
-      'https://fakeiportal.supermap.io/iportal/web/datas/676516522/content.json?pageSize=9999999&currentPage=1&parentResType=MAP&parentResId=123': layerData
+      'https://fakeiportal.supermap.io/iportal/web/datas/676516522/content.json?pageSize=9999999&currentPage=1&parentResType=MAP&parentResId=123':
+        layerData
     };
     mockFetch(fetchresource);
     mapWrapper = mount(SmWebMap, {
@@ -154,6 +156,24 @@ describe('LayerManager.vue', () => {
     done();
   });
 
+  it('projectionnotmatch', async done => {
+    wrapper = mount(SmLayerManager, {
+      propsData: {
+        defaultExpandAll: true,
+        mapTarget: 'map',
+        layers: [
+          {
+            mapInfo: { serverUrl: 'https://fakeiportal.supermap.io/iportal', mapId: '801571284' },
+            title: '民航数据-单值'
+          }
+        ]
+      }
+    });
+    const spyFn = jest.spyOn(Message, 'error');
+    wrapper.vm.viewModel.fire('projectionnotmatch', { e: { type: 'projectionnotmatch' } });
+    expect(spyFn).toHaveBeenCalled();
+    done();
+  });
   it('toggle mapCombination', async done => {
     wrapper = mount(SmLayerManager, {
       propsData: {
@@ -198,7 +218,7 @@ describe('LayerManager.vue', () => {
         visible: true
       }
     ];
-    const spyadd= jest.spyOn(wrapper.vm, 'addLayer');
+    const spyadd = jest.spyOn(wrapper.vm, 'addLayer');
     await wrapper.setData({
       treeData: treeData
     });

src/mapboxgl/web-map/control/layer-manager/__tests__/LayerManagerViewModel.spec.js

@@ -170,6 +170,20 @@ describe('LayerManagerViewModel', () => {
     }).not.toThrow();
   });
 
+  it('projectionnotmatch', (done) => {
+    let nodeKey = 'key1';
+    const data = { nodeKey, mapId: 123, serviceUrl: 'http://fakeservice' };
+    expect(viewModel.cacheMaps[nodeKey]).toBeUndefined();
+    viewModel.addLayer(data);
+    expect(viewModel.cacheMaps[nodeKey]).not.toBeUndefined();
+    expect(viewModel.readyNext).toBeFalsy();
+    const spyon = jest.fn();
+    viewModel.on('projectionnotmatch', spyon);
+    viewModel.cacheMaps[nodeKey].triggerEvent('projectionnotmatch', {});
+    expect(viewModel.readyNext).toBeTruthy();
+    expect(spyon).toHaveBeenCalledTimes(1);
+    done();
+  });
   it('layersadded', (done) => {
     let nodeKey = 'key1';
     const data = { nodeKey, mapId: 123, serviceUrl: 'http://fakeservice' };