[feature]webmap对接webmercator全球剖分瓦片 by qiw

Author: luoxiao-supermap

src/common/mapping/WebMapService.js

@@ -657,6 +657,7 @@ export class WebMapService {
     let type;
     let isHosted = (dataSource && dataSource.serverId) || layerType === 'MARKER' || layerType === 'HOSTED_TILE';
     let isTile =
+      layerType === 'ZXY_TILE' ||
       layerType === 'SUPERMAP_REST' ||
       layerType === 'TILE' ||
       layerType === 'WMS' ||

src/common/mapping/WebMapV2.js

@@ -403,6 +403,9 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
         case 'TILE':
           this._createDynamicTiledLayer(layerInfo, addedCallback);
           break;
+        case 'ZXY_TILE':
+          this._createZXYLayer(layerInfo, addedCallback);
+          break;
         case 'CLOUD':
         case 'XYZ':
           url = mapUrls[layerInfo.layerType]
@@ -442,6 +445,7 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
             layer.minzoom = Math.max(this._transformScaleToZoom(minScale, crs), 0);
             layer.maxzoom = Math.min(24, this._transformScaleToZoom(maxScale, crs) + 0.0000001);
           }
+          console.log('_initOverlayLayers')
 
           if (type === 'tile') {
             if (layer.autoUpdateTime) {
@@ -705,6 +709,14 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
       addedCallback && addedCallback();
     }
 
+    _createZXYLayer(layerInfo, addedCallback) {
+      const { url, subdomains, layerID, name, visible } = layerInfo;
+      const urls = (subdomains && subdomains.length) ? subdomains.map(item => url.replace('{s}', item)) : [url];
+      const layerId = layerID || name;
+      this._addBaselayer({ url: urls, layerID: layerId, visibility: visible });
+      addedCallback && addedCallback();
+    }
+
     _createDynamicTiledLayer(layerInfo, addedCallback) {
       const url = layerInfo.url;
       const layerId = layerInfo.layerID || layerInfo.name;

src/openlayers/mapping/WebMap.js

@@ -968,6 +968,9 @@ export class WebMap extends Observable {
       case 'SUPERMAP_REST':
         source = that.createDynamicTiledSource(layerInfo, isBaseLayer);
         break;
+      case 'ZXY_TILE':
+        source = this.createXYZTileSource(layerInfo);
+        break;
       case 'CLOUD':
       case 'CLOUD_BLACK':
       case 'OSM':
@@ -1321,6 +1324,25 @@ export class WebMap extends Observable {
     });
   }
 
+  /**
+   * @private
+   * @function WebMap.prototype.createXYZTileSource
+   * @description 创建图层的XYZTilesource。
+   * @param {Object} layerInfo - 图层信息
+   * @returns {ol.source.XYZ} xyz的source
+   */
+  createXYZTileSource(layerInfo) {
+    const { url, subdomains } = layerInfo;
+    const urls = (subdomains && subdomains.length) ? subdomains.map(item => url.replace('{s}', item)) : [url];
+    const tileGrid = TileSuperMapRest.createTileGrid([-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892]);
+    return new XYZ({
+      urls,
+      wrapX: false,
+      crossOrigin: 'anonymous',
+      tileGrid
+    });
+  }
+  
   /**
    * @private
    * @function WebMap.prototype.createWMSSource
@@ -2107,6 +2129,10 @@ export class WebMap extends Observable {
               that.errorCallback && that.errorCallback(e, 'getFeatureFaild', that.map);
             }
           );
+        } else if (layer.layerType === 'ZXY_TILE') {
+          that.map.addLayer(that.createBaseLayer(layer, layerIndex));
+          that.layerAdded++;
+          that.sendMapToUser(len);
         }
       }
     }

test/common/mapping/WebMapServiceSpec.js

@@ -179,6 +179,23 @@ describe('WebMapServiceSpec.js', () => {
     });
   });
 
+  xit('getsourcetype zxytile', done => {
+    const options = {
+      ...options,
+      serverUrl: 'https://fakeiportal.supermap.io/iportal/' // 没有通过处理在末尾加 '/',在此处理
+    };
+    spyOn(FetchRequest, 'get').and.callFake((url) => {
+      if (url.indexOf('map.json') > -1) {
+        return Promise.resolve(mapJson);
+      }
+      return Promise.resolve(new Response(JSON.stringify(iportal_serviceProxy)));
+    });
+    const service = new WebMapService(mapId, options);
+    const res = service.getDatasourceType({layerType: 'ZXY_TILE'});
+    expect(res).toBe('tile');
+    done()
+  });
+
   it('get the wrong iPortal service proxy', (done) => {
     const options = {
       ...options,

test/mapboxgl/mapping/WebMapV2Spec.js

@@ -1522,6 +1522,36 @@ describe('mapboxgl_WebMapV2', () => {
     });
   });
 
+  it('add zxytile layer', (done) => {
+    spyOn(FetchRequest, 'get').and.callFake((url) => {
+      if (url.indexOf('portal.json') > -1) {
+        return Promise.resolve(new Response(JSON.stringify(iportal_serviceProxy)));
+      } else if (url.indexOf('/map.json') > -1) {
+        return Promise.resolve(new Response(datavizWebmap_ZXYTILE));
+      }
+      return Promise.resolve();
+    });
+    datavizWebmap = new WebMap(
+      'test',
+      {
+        target: 'map',
+        serverUrl: 'http://fake/fakeiportal',
+        withCredentials: false
+      },
+      {
+        style: {
+          version: 8,
+          sources: {},
+          layers: []
+        }
+      }
+    );
+    datavizWebmap.on('mapcreatesucceeded', ({ layers }) => {
+      expect(layers.length).toBe(2);
+      done();
+    });
+  });
+
   it('isvj-5215', (done) => {
     spyOn(FetchRequest, 'get').and.callFake((url) => {
       if (url.indexOf('portal.json') > -1) {

test/openlayers/mapping/WebMapSpec.js

@@ -184,6 +184,28 @@ describe('openlayers_WebMap', () => {
         }
     });
 
+    it('initialize_ZXYtILE', (done) => {
+      let options = {
+          server: server,
+          successCallback,
+          errorCallback: function () { }
+      };
+      spyOn(FetchRequest, 'get').and.callFake((url) => {
+          if (url.indexOf('map.json') > -1) {
+              var mapJson = datavizWebmap_ZXYTILE;
+              return Promise.resolve(new Response(mapJson));
+          }
+          return Promise.resolve();
+      });
+      var datavizWebmap = new WebMap(id, options);
+
+      function successCallback() {
+          expect(datavizWebmap.mapParams.title).toBe('xyz');
+          // expect(datavizWebmap.layerAdded).toBe(2);
+          done();
+      }
+  });
+
     it('jsonsql', (done) => {
         let options = {
             server: server,