import mapboxgl from 'mapbox-gl';

import { FetchRequest } from '../../../src/common/util/FetchRequest';

import { createWebMapV3Extending } from '../../../src/common/mapping/WebMapV3';

import { createMapClassExtending } from '../../../src/common/mapping/MapBase';

import { L7LayerUtil } from '../../../src/common/mapping/utils/L7LayerUtil';

import { WebMap } from '../../../src/mapboxgl/mapping/WebMap';

import * as MapManagerUtil from '../../../src/mapboxgl/mapping/webmap/MapManager';

import { CRSManager } from '../../../src/mapboxgl/mapping/webmap/CRSManager';

import { featureFilter, expression } from '@mapbox/mapbox-gl-style-spec';

import spec from '@mapbox/mapbox-gl-style-spec/reference/v8';

import { L7, L7Layer } from '../../../src/mapboxgl/overlay/L7Layer';

import * as mockL7 from '../../tool/mock_l7';

import mbglmap, { CRS, proj4, revertCRS } from '../../tool/mock_mapboxgl_map';

import '../../resources/WebMapV3.js';

import '../../resources/WebMapV5.js';

describe('mapboxgl-webmap3.0', () => {

var originalTimeout, testDiv;

var server = 'http://localhost:8190/iportal/';

var id = 617580084;

var mapstudioWebmap;

const l7LayerUtil = L7LayerUtil({ featureFilter, expression, spec, L7Layer, L7 });

const extendOptions = {

MapManager: MapManagerUtil.default,

mapRepo: mapboxgl,

crsManager: new CRSManager(),

l7LayerUtil

};

const WebMapV3 = createWebMapV3Extending(createMapClassExtending(mapboxgl.Evented), extendOptions);

beforeEach(() => {

testDiv = window.document.createElement('div');

testDiv.setAttribute('id', 'map');

testDiv.style.styleFloat = 'left';

testDiv.style.marginLeft = '8px';

testDiv.style.marginTop = '50px';

testDiv.style.width = '500px';

testDiv.style.height = '500px';

window.document.body.appendChild(testDiv);

originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;

jasmine.DEFAULT_TIMEOUT_INTERVAL = 50000;

mapboxgl.Map.prototype.overlayLayersManager = {};

mbglmap.prototype.getL7Scene = mapboxgl.Map.prototype.getL7Scene;

mapboxgl.CRS = CRS;

mapboxgl.proj4 = proj4;

});

afterEach(() => {

if (mapstudioWebmap && mapstudioWebmap.map) {

const webMapV3 = mapstudioWebmap._getWebMapInstance ? mapstudioWebmap._getWebMapInstance() : mapstudioWebmap;

webMapV3.clean && webMapV3.clean();

mapstudioWebmap = null;

}

window.document.body.removeChild(testDiv);

jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;

mbglmap.prototype.getL7Scene = undefined;

mapboxgl.CRS = undefined;

mapboxgl.proj4 = undefined;

revertCRS();

});

it('initialize_background', (done) => {

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) {

var mapJson = mapstudioWebMap_background;

return Promise.resolve(new Response(mapJson));

}

if (url.indexOf('617580084.json') > -1) {

var appInfo = masBackgroundAppInfo;

return Promise.resolve(new Response(appInfo));

}

return Promise.resolve();

});

mapstudioWebmap = new WebMap(id, {

server: server

});

expect(mapstudioWebmap.options.target).toBe('map');

expect(mapstudioWebmap.mapId).toBe(id);

mapstudioWebmap.on('mapcreatesucceeded', ({ map }) => {

expect(mapstudioWebmap.map).toEqual(map);

expect(mapstudioWebmap.mapParams.title).toBe('空地图');

expect(mapstudioWebmap.mapParams.description).toBe('');

const style = map.getStyle();

expect(style.name).toBe(mapstudioWebmap.mapParams.title);

expect(style.layers.length).toBe(1);

expect(style.sources).toEqual({});

done();

});

});

it('initialize_raster', (done) => {

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) {

var mapJson = mapstudioWebMap_raster;

return Promise.resolve(new Response(mapJson));

}

if (url.indexOf('617580084.json') > -1) {

var appInfo = mapstudioAppInfo;

return Promise.resolve(new Response(appInfo));

}

return Promise.resolve();

});

mapstudioWebmap = new WebMap(id, {

server: server,

iportalServiceProxyUrlPrefix: 'initialize_raster'

});

expect(mapstudioWebmap.credentialKey).toBeUndefined();

expect(mapstudioWebmap.credentialValue).toBeUndefined();

expect(mapstudioWebmap.options.target).toBe('map');

expect(mapstudioWebmap.mapId).toBe(id);

mapstudioWebmap.on('mapcreatesucceeded', ({ map }) => {

expect(map).not.toBeUndefined();

expect(mapstudioWebmap.map).toEqual(map);

expect(map.getZoom()).toBeCloseTo(3.412, 0.001);

var center = map.getCenter();

expect(+center.lat.toFixed(4)).toEqual(39.9478);

expect(+center.lng.toFixed(4)).toEqual(116.3949);

expect(mapstudioWebmap.mapParams.title).toBe('restmap服务');

expect(mapstudioWebmap.mapParams.description).toBe('');

const style = map.getStyle();

expect(style.name).toBe(mapstudioWebmap.mapParams.title);

expect(style.layers.length).toBe(2);

done();

});

});

it('vector_symbol', (done) => {

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_symbol));

}

if (url.indexOf('617580084.json') > -1) {

return Promise.resolve(new Response(msProjectINfo_symbol));

}

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_symbol);

expect(style.layers.length).toBe(mapInfo.layers.length);

expect(webMapV3.getLegends().length).not.toBe(0);

expect(webMapV3.getLayerCatalog().length).not.toBe(0);

expect(webMapV3.getLayerCatalog().length).toBeLessThanOrEqual(webMapV3.getLayers().length);

done();

});

});

it('filters mapinfo', (done) => {

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_filters));

}

if (url.indexOf('932266699.json') > -1) {

return Promise.resolve(new Response(msProjectINfo_filters));

}

if (url.indexOf('/sprites') > -1) {

return Promise.resolve(new Response(spriteJson));

}

return Promise.resolve();

});

mapstudioWebmap = new WebMap('932266699', {

server: server

});

mapstudioWebmap.on('mapcreatesucceeded', ({ map }) => {

expect(map).not.toBeUndefined();

expect(mapstudioWebmap.map).toEqual(map);

const webMapV3 = mapstudioWebmap._getWebMapInstance();

expect(webMapV3._mapInfo.layers[1].filter).toEqual([

'all',

['all', ['==', ['get', 'Ctype'], ''], ['!=', ['get', 'smpid'], '']],

['all', ['all', ['all', ['all', ['!=', ['get', 'smpid'], 121]]]]]

]);

expect(webMapV3._mapInfo.layers[2].filter).toEqual([

'all',

['all', ['==', ['get', 'Ctype'], ''], ['!=', ['get', 'smpid'], '']],

['all', ['all', ['all', ['any', ['==', ['get', 'smpid'], 121]]]]]

]);

done();

});

});

it('filters mapId is JSON', (done) => {

spyOn(FetchRequest, 'get').and.callFake((url) => {

if (url.indexOf('/sprites') > -1) {

return Promise.resolve(new Response(msSpriteInfo));

}

return Promise.resolve();

});

const mapInfo = JSON.parse(mapstudioWebMap_filters);

mapstudioWebmap = new WebMapV3(mapInfo, {

server: server,

target: 'map',

iportalServiceProxyUrlPrefix: 'mapId is JSON',

relatedInfo: JSON.parse(msProjectINfo_filters)

});

mapstudioWebmap.initializeMap(mapInfo);

mapstudioWebmap.on('mapcreatesucceeded', ({ map }) => {

expect(map).not.toBeUndefined();

expect(mapstudioWebmap.map).toEqual(map);

expect(mapstudioWebmap._mapInfo.layers[1].filter).toEqual([

'all',

['all', ['==', ['get', 'Ctype'], ''], ['!=', ['get', 'smpid'], '']],

['all', ['all', ['all', ['all', ['!=', ['get', 'smpid'], 121]]]]]

]);

expect(mapstudioWebmap._mapInfo.layers[2].filter).toEqual([

'all',

['all', ['==', ['get', 'Ctype'], ''], ['!=', ['get', 'smpid'], '']],

['all', ['all', ['all', ['any', ['==', ['get', 'smpid'], 121]]]]]

]);

done();

});

});

it('mapId is JSON', (done) => {

spyOn(FetchRequest, 'get').and.callFake((url) => {

if (url.indexOf('/sprite') > -1) {

return Promise.resolve(new Response(msSpriteInfo));

}

return Promise.resolve();

});

const mapInfo = JSON.parse(mapstudioWebMap_symbol);

mapstudioWebmap = new WebMapV3(mapInfo, {

server: server,

target: 'map',

iportalServiceProxyUrlPrefix: 'mapId is JSON'

});

mapstudioWebmap.initializeMap(mapInfo);

mapstudioWebmap.on('mapcreatesucceeded', ({ map }) => {

expect(map).not.toBeUndefined();

expect(mapstudioWebmap.map).toEqual(map);

const style = map.getStyle();

expect(style.layers.length).toBe(mapInfo.layers.length);

const appreciableLayers = mapstudioWebmap.getLayers();

const layerCatalogs = mapstudioWebmap.getLayerCatalog();

expect(layerCatalogs.length).toBeLessThanOrEqual(appreciableLayers.length);

expect(mapstudioWebmap.getLegends().length).toBe(0);

map.addLayer({

metadata: {},

paint: {

'background-color': '#242424'

},

id: 'ms-background12',

type: 'background'

});

expect(map.getStyle().layers.length).toBe(mapInfo.layers.length + 1);

expect(mapstudioWebmap.getLayers().length).toBe(appreciableLayers.length + 1);

expect(mapstudioWebmap.getLayerCatalog().length).toBe(layerCatalogs.length + 1);

done();

});

});

it('projection is 4490 and not include mapbox-gl-enhance', (done) => {

const mapInfo = JSON.parse(mapstudioWebMap_symbol);

const nextMapInfo = {

...mapInfo,

crs: {

name: 'EPSG:4490',

extent: [-180, -270, 180, 90],

wkt: 'GEOGCS["China Geodetic Coordinate System 2000", DATUM["China 2000", SPHEROID["CGCS2000", 6378137.0, 298.257222101, AUTHORITY["EPSG","1024"]], AUTHORITY["EPSG","1043"]], PRIMEM["Greenwich", 0.0, AUTHORITY["EPSG","8901"]], UNIT["degree", 0.017453292519943295], AXIS["Geodetic latitude", NORTH], AXIS["Geodetic longitude", EAST], AUTHORITY["EPSG","4490"]]'

}

};

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('/sprite') > -1) {

return Promise.resolve(new Response(msSpriteInfo));

}

return Promise.resolve();

});

mapboxgl.CRS = undefined;

mapstudioWebmap = new WebMap(nextMapInfo, {

server: server,

target: 'map'

});

mapstudioWebmap.on('mapcreatefailed', ({ error }) => {

const throwError =

'WebMap needs to include mapbox-gl-enhance.js. Refer to the example: https://iclient.supermap.io/examples/mapboxgl/editor.html#mvtVectorTile_2362';

expect(mapstudioWebmap.map).toBeUndefined();

expect(error).toBe(throwError);

done();

});

});

it('projection is 4490 and include mapbox-gl-enhance', (done) => {

const mapInfo = JSON.parse(mapstudioWebMap_symbol);

const nextMapInfo = {

...mapInfo,

crs: {

name: 'EPSG:4490',

extent: [-180, -270, 180, 90],

wkt: 'GEOGCS["China Geodetic Coordinate System 2000", DATUM["China 2000", SPHEROID["CGCS2000", 6378137.0, 298.257222101, AUTHORITY["EPSG","1024"]], AUTHORITY["EPSG","1043"]], PRIMEM["Greenwich", 0.0, AUTHORITY["EPSG","8901"]], UNIT["degree", 0.017453292519943295], AXIS["Geodetic latitude", NORTH], AXIS["Geodetic longitude", EAST], AUTHORITY["EPSG","4490"]]'

}

};

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('/sprite') > -1) {

return Promise.resolve(new Response(msSpriteInfo));

}

return Promise.resolve();

});

mapstudioWebmap = new WebMap(nextMapInfo, {

server: server,

target: 'map',

iportalServiceProxyUrlPrefix: 'projection is 4490 and include mapbox-gl-enhance'

});

mapstudioWebmap.on('mapcreatesucceeded', ({ map }) => {

expect(map).not.toBeUndefined();

expect(mapstudioWebmap.map).toEqual(map);

const style = map.getStyle();

expect(style.layers.length).toBe(nextMapInfo.layers.length);

const appreciableLayers = mapstudioWebmap.getLayers();

const layerCatalogs = mapstudioWebmap.getLayerCatalog();

expect(layerCatalogs.length).toBeLessThanOrEqual(appreciableLayers.length);

expect(mapstudioWebmap.getLegends().length).toBe(0);

done();

});

});

it('projection is 4490 and with map', (done) => {

spyOn(FetchRequest, 'get').and.callFake((url) => {

if (url.indexOf('/sprite') > -1) {

return Promise.resolve(new Response(msSpriteInfo));

}

return Promise.resolve();

});

spyOn(mapboxgl, 'Map').and.callFake(mbglmap);

const mapInfo = JSON.parse(mapstudioWebMap_symbol);

const nextMapInfo = {

...mapInfo,

crs: {

name: 'EPSG:4490',

extent: [-180, -270, 180, 90],

wkt: 'GEOGCS["China Geodetic Coordinate System 2000", DATUM["China 2000", SPHEROID["CGCS2000", 6378137.0, 298.257222101, AUTHORITY["EPSG","1024"]], AUTHORITY["EPSG","1043"]], PRIMEM["Greenwich", 0.0, AUTHORITY["EPSG","8901"]], UNIT["degree", 0.017453292519943295], AXIS["Geodetic latitude", NORTH], AXIS["Geodetic longitude", EAST], AUTHORITY["EPSG","4490"]]'

}

};

mapstudioWebmap = new WebMapV3(nextMapInfo, {

server: server,

target: 'map'

});

const existedMap = new mapboxgl.Map({

container: testDiv,

style: {

version: 8,

sources: {},

layers: [

{

paint: {

'background-color': '#242424'

},

id: 'background1',

type: 'background'

}

]

},

crs: 'EPSG:4490',

center: [116.640545, 40.531714],

zoom: 7

});

existedMap.getCRS = function () {

return { epsgCode: 'EPSG:4490' };

};

existedMap.on('load', function () {

mapstudioWebmap.initializeMap(nextMapInfo, existedMap);

});

const isSameCrs = extendOptions.crsManager.isSameProjection(existedMap, 'EPSG:4326');

expect(isSameCrs).toBe(true);

mapstudioWebmap.on('mapcreatesucceeded', ({ map }) => {

expect(mapstudioWebmap._appendLayers).toBe(true);

expect(map).toEqual(existedMap);

expect(mapstudioWebmap.map).toEqual(map);

const style = map.getStyle();

expect(style.layers.length).toBe(nextMapInfo.layers.length + 1);

const appreciableLayers = mapstudioWebmap.getLayers();

const layerCatalogs = mapstudioWebmap.getLayerCatalog();

expect(layerCatalogs.length).toBeLessThanOrEqual(appreciableLayers.length);

done();

});

});

it('overlayLayersManager', (done) => {

spyOn(FetchRequest, 'get').and.callFake((url) => {

if (url.indexOf('/sprite') > -1) {

return Promise.resolve(new Response(msSpriteInfo));

}

return Promise.resolve();

});

const mapInfo = JSON.parse(mapstudioWebMap_symbol);

mapstudioWebmap = new WebMapV3(mapInfo, {

server: server,

target: 'map',

iportalServiceProxyUrlPrefix: 'overlayLayersManager'

});

mapstudioWebmap.initializeMap(mapInfo);

mapstudioWebmap.on('mapcreatesucceeded', ({ map }) => {

expect(map).not.toBeUndefined();

expect(mapstudioWebmap.map).toEqual(map);

const style = map.getStyle();

expect(style.layers.length).toBe(mapInfo.layers.length);

const appreciableLayers = mapstudioWebmap.getLayers();

const layerCatalogs = mapstudioWebmap.getLayerCatalog();

expect(layerCatalogs.length).toBeLessThanOrEqual(appreciableLayers.length);

expect(mapstudioWebmap.getLegends().length).toBe(0);

map.overlayLayersManager = {

GraticuleLayer: {

id: 'GraticuleLayer',

overlay: true,

sourceId: 'GraticuleLayer',

visible: true,

type: 'custom'

},

EchartLayer: {

id: 'EchartLayer',

visibility: 'visible',

source: {

type: 'geoJSON',

data: null

},

type: 'custom'

},

TestLayer: {

id: 'TestLayer',

overlay: true,

type: 'custom'

},

TestLayer2: {

id: 'TestLayer2',

overlay: true,

type: 'custom',

visible: false

},

GraticuleLayer1: {

id: 'GraticuleLayer',

overlay: true,

type: 'custom'

}

};

const validNum = 4;

const appreciableLayers2 = mapstudioWebmap.getLayers();

expect(appreciableLayers2.length).toBe(appreciableLayers.length + validNum);

expect(mapstudioWebmap.getLayerCatalog().length).toBe(layerCatalogs.length + validNum);

expect(appreciableLayers2.find((item) => item.id === 'EchartLayer')).toBeTruthy();

const testLayer = appreciableLayers2.find((item) => item.id === 'TestLayer');

expect(testLayer).not.toBeUndefined();

expect(testLayer.visible).toBeTruthy();

expect(testLayer.renderSource.id).toBeUndefined();

const testLayer2 = appreciableLayers2.find((item) => item.id === 'TestLayer2');

expect(testLayer2).not.toBeUndefined();

expect(testLayer2.visible).toBeFalsy();

done();

});

});

it('filter drill test', (done) => {

spyOn(FetchRequest, 'get').and.callFake((url) => {

if (url.indexOf('/sprite') > -1) {

return Promise.resolve(new Response(msSpriteInfo));

}

return Promise.resolve();

});

const mapInfo = JSON.parse(mapstudioWebMap_drill);

const originMapInfo = JSON.parse(mapstudioWebMap_drill);

const mapstudioWebmap = new WebMapV3(mapInfo, {

server: server,

target: 'map'

});

mapstudioWebmap.on('layercreatefailed', ({ error, error_code }) => {

expect(['drill'].indexOf(error.split(' ')[0]) > -1).toBeTruthy();

expect(error_code).toBe('DRILL_LAYERS_NOT_SUPPORTED');

});

mapstudioWebmap.on('mapcreatesucceeded', ({ map }) => {

const style = map.getStyle();

expect(style.layers.length).toBeLessThan(originMapInfo.layers.length);

expect(style.layers.length).toBe(mapInfo.layers.length);

expect(mapstudioWebmap.getLayers().length).toBe(1);

expect(mapstudioWebmap.getLayerCatalog().length).toBe(1);

done();

});

mapstudioWebmap.initializeMap(mapInfo);

});

it('filter drill ui id test', (done) => {

spyOn(FetchRequest, 'get').and.callFake((url) => {

if (url.indexOf('/sprite') > -1) {

return Promise.resolve(new Response(msSpriteInfo));

}

return Promise.resolve();

});

const mapInfo = JSON.parse(mapstudioWebMap_drill_layers1);

const originMapInfo = JSON.parse(mapstudioWebMap_drill_layers1);

const mapstudioWebmap = new WebMapV3(mapInfo, {

server: server,

target: 'map'

});

mapstudioWebmap.on('layercreatefailed', ({ error, error_code }) => {

expect(['drill'].indexOf(error.split(' ')[0]) > -1).toBeTruthy();

expect(error_code).toBe('DRILL_LAYERS_NOT_SUPPORTED');

});

mapstudioWebmap.on('mapcreatesucceeded', ({ map }) => {

const style = map.getStyle();

expect(style.layers.length).toBeLessThan(originMapInfo.layers.length);

expect(style.layers.length).toBe(mapInfo.layers.length);

expect(mapstudioWebmap.getLayers().length).toBe(1);

expect(mapstudioWebmap.getLayerCatalog().length).toBe(1);

done();

});

mapstudioWebmap.initializeMap(mapInfo);

});

it('filter drill interaction changed test', (done) => {

spyOn(FetchRequest, 'get').and.callFake((url) => {

if (url.indexOf('/sprite') > -1) {

return Promise.resolve(new Response(msSpriteInfo));

}

return Promise.resolve();

});

const mapInfo = JSON.parse(mapstudioWebMap_drill_layers2);

const originMapInfo = JSON.parse(mapstudioWebMap_drill_layers2);

const mapstudioWebmap = new WebMapV3(mapInfo, {

server: server,

target: 'map'

});

mapstudioWebmap.on('layercreatefailed', ({ error, error_code }) => {

expect(['drill'].indexOf(error.split(' ')[0]) > -1).toBeTruthy();

expect(error_code).toBe('DRILL_LAYERS_NOT_SUPPORTED');

});

mapstudioWebmap.on('mapcreatesucceeded', ({ map }) => {

const style = map.getStyle();

expect(style.layers.length).toBeLessThan(originMapInfo.layers.length);

expect(style.layers.length).toBe(mapInfo.layers.length);

expect(mapstudioWebmap.getLayers().length).toBe(1);

expect(mapstudioWebmap.getLayerCatalog().length).toBe(1);

done();

});

mapstudioWebmap.initializeMap(mapInfo);

});

it('exclude source and layer', (done) => {

spyOn(FetchRequest, 'get').and.callFake((url) => {

if (url.indexOf('/sprite') > -1) {

return Promise.resolve(new Response(msSpriteInfo));

}

return Promise.resolve();

});

const mapInfo = JSON.parse(mapstudioWebMap_symbol);

mapstudioWebmap = new WebMapV3(mapInfo, {

server: server,

target: 'map',

iportalServiceProxyUrlPrefix: 'exclude source and layer'

});

mapstudioWebmap.initializeMap(mapInfo);

mapstudioWebmap.on('mapcreatesucceeded', ({ map }) => {

expect(map).not.toBeUndefined();

expect(mapstudioWebmap.map).toEqual(map);

const style = map.getStyle();

expect(style.layers.length).toBe(mapInfo.layers.length);

const appreciableLayers = mapstudioWebmap.getLayers();

const layerCatalogs = mapstudioWebmap.getLayerCatalog();

expect(layerCatalogs.length).toBeLessThanOrEqual(appreciableLayers.length);

map.addLayer({

metadata: {},

paint: {

'background-color': '#242424'

},

id: 'layer-identify-SM-highlighted',

type: 'background'

});

map.addSource('mapbox-gl-draw-hot', {

type: 'geojson',

data: {

type: 'FeatureCollection',

features: []

}

});

map.addLayer({

metadata: {},

paint: {

'circle-color': '#f75564'

},

id: 'draw-vertex-active.hot',

source: 'mapbox-gl-draw-hot',

type: 'circle'

});

expect(mapstudioWebmap.getLayers().length).toBe(appreciableLayers.length);

expect(mapstudioWebmap.getLayerCatalog().length).toBe(layerCatalogs.length);

done();

});

});

it('load l7Layers', (done) => {

const mapInfo = JSON.parse(mapstudioWebMap_L7Layers);

spyOn(L7, 'PointLayer').and.callFake(mockL7.PointLayer);

spyOn(L7, 'LineLayer').and.callFake(mockL7.PointLayer);

spyOn(L7, 'PolygonLayer').and.callFake(mockL7.PointLayer);

spyOn(L7, 'HeatmapLayer').and.callFake(mockL7.PointLayer);

spyOn(L7, 'Scene').and.callFake(mockL7.Scene);

spyOn(L7, 'Mapbox').and.callFake(mockL7.Mapbox);

mapboxgl.Map.prototype.getCRS = function () {