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

Author: luoxiao-supermap

src/mapboxgl/mapping/WebMap.js

@@ -343,6 +343,9 @@ export class WebMap extends mapboxgl.Evented {
 			case 'SUPERMAP_REST':
 				this._createDynamicTiledLayer(layerInfo);
 				break;
+      case 'ZXY_TILE':
+        this._createZXYLayer(layerInfo);
+        break;
 			case 'CLOUD':
 			case 'CLOUD_BLACK':
 			case 'OSM':
@@ -566,6 +569,13 @@ export class WebMap extends mapboxgl.Evented {
 		this._addBaselayer(urlArr, 'XYZ-layers-' + layerInfo.name);
 	}
 
+  _createZXYLayer(layerInfo) {
+    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(urls, layerId, undefined, undefined, false, visible);
+    }
+
 	/**
 	 * @private
 	 * @function WebMap.prototype._createDynamicTiledLayer
@@ -758,6 +768,7 @@ export class WebMap extends mapboxgl.Evented {
 							this.fire('getlayersfailed', { error: error, map: this.map });
 						});
 			} else if (
+        layer.layerType === 'ZXY_TILE' ||
 				layer.layerType === 'SUPERMAP_REST' ||
 				layer.layerType === 'TILE' ||
 				layer.layerType === 'WMS' ||
@@ -1955,7 +1966,7 @@ export class WebMap extends mapboxgl.Evented {
 		}
 	}
 
-	_addBaselayer(url, layerID, minzoom = 0, maxzoom = 22, isIserver) {
+	_addBaselayer(url, layerID, minzoom = 0, maxzoom = 22, isIserver, visible = true) {
 		this.map.addLayer({
 			id: layerID,
 			type: 'raster',
@@ -1966,6 +1977,7 @@ export class WebMap extends mapboxgl.Evented {
                 rasterSource: isIserver ? 'iserver' : '',
                 prjCoordSys: isIserver ? { epsgCode: this.baseProjection.split(':')[1] } : ''
 			},
+      layout: { visibility: visible ? 'visible': 'none' },
 			minzoom: minzoom,
 			maxzoom: maxzoom
 		});

src/openlayers/mapping/WebMap.js

@@ -917,6 +917,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':
@@ -1116,6 +1119,26 @@ export class WebMap extends Observable {
                 break;
         }
     }
+
+  /**
+   * @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.createDynamicTiledSource
@@ -1939,6 +1962,10 @@ export class WebMap extends Observable {
                       that.layerAdded++;
                       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/mapboxgl/mapping/WebMapSpec.js

@@ -161,6 +161,28 @@ describe('mapboxgl_WebMap', () => {
             done();
         });
     });
+    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
+        }
+      );
+      datavizWebmap.on('addlayerssucceeded', ({ layers }) => {
+        expect(layers.length).toBe(2);
+        done();
+      });
+    });
     it('initialize_TIANDITU_IMAGE', (done) => {
         spyOn(FetchRequest, 'get').and.callFake((url) => {
             if (url.indexOf('map.json') > -1) {

test/openlayers/mapping/WebMapSpec.js

@@ -389,6 +389,27 @@ 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('initialize_CLOUD', (done) => {
         let options = {
             server: server,