return class WebMapV2 extends SuperClass {

constructor(

id,

options = {

layerFilter: function () {

return true;

}

},

mapOptions = { style: { version: 8, sources: {}, layers: [] } }

) {

super(id, options, mapOptions);

if (typeof id === 'string' || typeof id === 'number') {

this.mapId = id;

}

if (this._centerValid(mapOptions.center)) {

this.center = mapOptions.center;

}

this.zoom = mapOptions.zoom;

this.renderWorldCopies = mapOptions.renderWorldCopies;

this.bounds = mapOptions.bounds;

this.bearing = mapOptions.bearing;

this.pitch = mapOptions.pitch;

this.rasterTileSize = mapOptions.rasterTileSize || 256;

this.layerFilter = options.layerFilter;

this.checkSameLayer = options.checkSameLayer;

this._taskID = new Date();

this._cacheLayerId = new Map();

this._layerTimerList = [];

this._appendLayers = false;

this._tileTransformRequest = options.tileTransformRequest;

}

async initializeMap(mapInfo, map) {

try {

this.baseProjection = await this._registerMapCRS(mapInfo);

if (map) {

if (!crsManager.isSameProjection(map, this.baseProjection) && !this.ignoreBaseProjection) {

this.fire('projectionnotmatch');

return;

}

this._appendLayers = true;

this.map = map;

}

this._mapInfo = mapInfo;

this._loadLayers(mapInfo, this._taskID);

} catch (error) {

console.error(error);

this.fire('mapcreatefailed', { error });

}

}

cleanLayers(layers) {

super.cleanLayers(layers);

this.echartslayer.forEach(echartLayer => {

echartLayer.remove();

echartLayer.features = null;

echartLayer.id = '';

});

}

clean(removeMap = true) {

if (this.map) {

if (this._sourceListModel) {

this._sourceListModel.destroy();

this._sourceListModel = null;

}

this.stopCanvg();

removeMap && this.map.remove();

this.map = null;

this._legendList = [];

this.center = null;

this.zoom = null;

if (this._dataflowService) {

this._dataflowService.off('messageSucceeded', this._handleDataflowFeaturesCallback);

this._dataflowService.off('subscribesucceeded', this._initDataflowLayerCallback);

}

this._unprojectProjection = null;

this._cacheLayerId = new Map();

}

if (this._layerTimerList.length) {

this._layerTimerList.forEach((timer) => {

clearInterval(timer);

});

this._layerTimerList = [];

}

}

_initWebMap() {}

_getMapInfo() {}

_loadLayers(mapInfo, _taskID) {

if (this.map) {

this._handleLayerInfo(mapInfo, _taskID);

} else {

setTimeout(() => {

this._createMap(mapInfo);

this.map.on('load', () => {

this._handleLayerInfo(mapInfo, _taskID);

});

}, 0);

}

}

async _registerMapCRS(mapInfo) {

const { projection, extent, baseLayer = {} } = mapInfo;

const epsgCode = toEpsgCode(projection);

let crs = {

name: epsgCode,

extent: [extent.leftBottom.x, extent.leftBottom.y, extent.rightTop.x, extent.rightTop.y],

wkt: this._getProjectionWKT(projection)

};

if (!crsManager.getCRS(epsgCode) && baseLayer.layerType !== 'ZXY_TILE') {

switch (baseLayer.layerType) {

case 'MAPBOXSTYLE': {

let url = baseLayer.dataSource.url;

if (url.indexOf('/restjsr/') > -1 && !/\/style\.json$/.test(url)) {

url += '/style.json';

}

const res = await this.webMapService.getMapBoxStyle(url);

if (res && res.metadata && res.metadata.indexbounds) {

crs.extent = res.metadata.indexbounds;

}

break;

}

case 'TILE': {

// 获取地图的wkt

if (!crs.wkt) {

crs.wkt = await this.getEpsgCodeWKT(`${baseLayer.url}/prjCoordSys.wkt`, {

withoutFormatSuffix: true,

withCredentials: this.webMapService.handleWithCredentials('', baseLayer.url, false)

});

}

const boundsRes = await this.getBounds(`${baseLayer.url}.json`, {

withoutFormatSuffix: true,

withCredentials: this.webMapService.handleWithCredentials('', baseLayer.url, false)

});

if (boundsRes && boundsRes.bounds) {

crs.extent = [

boundsRes.bounds.leftBottom.x,

boundsRes.bounds.leftBottom.y,

boundsRes.bounds.rightTop.x,

boundsRes.bounds.rightTop.y

];

}

break;

}

default:

crs = null;

break;

}

}

if (!crs) {

throw new Error('Unsupported coordinate system!')

}

crsManager.registerCRS(crs);

return epsgCode;

}

_handleLayerInfo(mapInfo, _taskID) {

mapInfo = this._setLayerID(mapInfo);

this._mapInfo = mapInfo;

this.layerAdded = 0;

this.expectLayerLen = 0;

const { layers, grid } = mapInfo;

this._setExpectLayerLen(mapInfo);

if (this.expectLayerLen === 0) {

this._sendMapToUser(0, 0);

}

if (this._shouldLoadBaseLayer(mapInfo, this.layerFilter)) {

this._initBaseLayer(mapInfo, () => {

this._addLayerSucceeded();

});

}

if (layers && layers.length !== 0) {

let filterLayers = layers;

if (typeof this.layerFilter === 'function') {

filterLayers = layers.filter(this.layerFilter);

}

this._initOverlayLayers(filterLayers, _taskID);

}

if (grid && grid.graticule) {

this._initGraticuleLayer(grid.graticule);

}

}

_setExpectLayerLen(mapInfo) {

if (this._shouldLoadBaseLayer(mapInfo, this.layerFilter)) {

this.expectLayerLen++;

}

let overLayers = mapInfo.layers;

if (overLayers && overLayers.length > 0) {

if (typeof this.layerFilter === 'function') {

overLayers = overLayers.filter(this.layerFilter);

}

this.expectLayerLen += overLayers.length;

}

if (mapInfo.grid && mapInfo.grid.graticule) {

this.expectLayerLen++;

}

}

_shouldLoadBaseLayer(mapInfo, layerFilter) {

const baseLayer = mapInfo.baseLayer;

if (!baseLayer) {

return false;

}

if (typeof layerFilter === 'function') {

return layerFilter(baseLayer);

}

return true;

}

_createMap(mapInfo) {

// 获取字体样式

const fontFamilys = this._getLabelFontFamily(mapInfo);

const center = this._getMapCenter(mapInfo);

// zoom

let zoom = mapInfo.level || 0;

let zoomBase = 0;

let { bounds, minZoom, maxZoom } = this.mapOptions;

const interactive = this.mapOptions.interactive;

if (isNaN(minZoom)) {

minZoom = mapInfo.minScale

? this._transformScaleToZoom(mapInfo.minScale, mapRepo.CRS.get(this.baseProjection))

: 0;

}

if (isNaN(maxZoom)) {

maxZoom = mapInfo.maxScale

? this._transformScaleToZoom(mapInfo.maxScale, mapRepo.CRS.get(this.baseProjection))

: 22;

}

if (mapInfo.visibleExtent && mapInfo.visibleExtent.length === 4 && !bounds) {

bounds = [

this._unproject([mapInfo.visibleExtent[0], mapInfo.visibleExtent[1]]),

this._unproject([mapInfo.visibleExtent[2], mapInfo.visibleExtent[3]])

];

}

if (minZoom > maxZoom) {

[minZoom, maxZoom] = [maxZoom, minZoom];

}

if (!bounds) {

if (mapInfo.minScale && mapInfo.maxScale) {

zoomBase = Math.min(

this._transformScaleToZoom(mapInfo.minScale, mapRepo.CRS.get(this.baseProjection)),

this._transformScaleToZoom(mapInfo.maxScale, mapRepo.CRS.get(this.baseProjection))

);

} else {

zoomBase = +Math.log2(

this._getResolution(mapRepo.CRS.get(this.baseProjection).getExtent()) / this._getResolution(mapInfo.extent)

).toFixed(2);

}

zoom += zoomBase;

}

// 初始化 map

this.map = new MapManager({

...this.mapOptions,

container: this.target,

center: this.center || center,

zoom: this.zoom || zoom,

minZoom,

maxZoom,

bearing: this.bearing || 0,

pitch: this.pitch || 0,

bounds,

interactive: interactive === void 0 ? true : interactive,

style: {

version: 8,

sources: {},

layers: []

},

crs: this.baseProjection,

localIdeographFontFamily: fontFamilys || '',

renderWorldCopies: this.renderWorldCopies || false,

transformRequest: (url, resourceType) => {

if (resourceType === 'Tile') {

if (this.isSuperMapOnline && url.indexOf('http://') === 0) {

url = `https://www.supermapol.com/apps/viewer/getUrlResource.png?url=${encodeURIComponent(url)}`;

}

if (this.webMapService.isIportalResourceUrl(url)) {

url = this.webMapService.handleParentRes(url);

}

const proxy = this.webMapService.handleProxy('image');

return {

url: url,

credentials: this.webMapService.handleWithCredentials(proxy, url, false) ? 'include' : undefined,

...(this._tileTransformRequest && this._tileTransformRequest(url))

};

}

return { url };

},

fadeDuration: 0

});

this.fire('mapinitialized', { map: this.map });

}

_createMVTBaseLayer(layerInfo, addedCallback) {

let url = layerInfo.dataSource.url;

if (url.indexOf('/restjsr/') > -1 && !/\/style\.json$/.test(url)) {

url += '/style.json';

}

const withoutFormatSuffix = url.indexOf('/restjsr/') === -1;

this.webMapService

.getMapBoxStyle(url, withoutFormatSuffix)

.then(

(style) => {

const sourceIds = Object.keys(style.sources);

if (sourceIds.some((id) => this.map.getSource(id))) {

this.fire('layerorsourcenameduplicated', {});

addedCallback && addedCallback();

return;

}

style.layers.forEach(layer => {

layer.layout && (layer.layout.visibility = this._getVisibility(layerInfo.visible));

});

this.map.addStyle(style);

const layerIds = [];

style.layers.forEach((item) => {

if (item.type !== 'background') {

layerIds.push(item.id);

}

});

this._setCacheLayer({

parentLayerId: layerInfo.layerID || layerInfo.name,

subRenderLayers: layerIds.map((layerId) => ({ layerId }))

});

addedCallback && addedCallback();

},

(error) => {

addedCallback && addedCallback();

throw new Error(error);

}

)

.catch((error) => {

this.fire('layercreatefailed', { error, layer: layerInfo, map: this.map });

});

}

_initBaseLayer(mapInfo, addedCallback) {

const layerInfo = mapInfo.baseLayer || mapInfo;

const layerType = this.getBaseLayerType(layerInfo);

const mapUrls = this.getMapurls();

let url;

this.baseLayerProxy = this.webMapService.handleProxy('image');

switch (layerType) {

case 'TIANDITU':

this.baseLayerProxy = null;

this._createTiandituLayer(mapInfo, addedCallback);

break;

case 'BING':

this.baseLayerProxy = null;

this._createBingLayer(layerInfo.layerID || layerInfo.name, layerInfo, addedCallback);

break;

case 'WMS':

this._createWMSLayer(layerInfo, addedCallback);

break;

case 'WMTS':

this._createWMTSLayer(layerInfo, addedCallback);

break;

case 'TILE':

this._createDynamicTiledLayer(layerInfo, addedCallback);

break;

case 'ZXY_TILE':

this._createZXYLayer(layerInfo, addedCallback);

break;

case 'CLOUD':

case 'XYZ':

url = mapUrls[layerInfo.layerType]

.replace('{googleMapsLanguage}', this.googleMapsLanguage)

.replace('{googleMapsAPIKey}', this.googleMapsAPIKey);

this._createXYZLayer(layerInfo, url, addedCallback);

break;

case 'BAIDU':

this.fire('baidumapnotsupport', {});

addedCallback && addedCallback();

break;

case 'MAPBOXSTYLE':

this._createMVTBaseLayer(layerInfo, addedCallback); // 添加矢量瓦片服务作为底图

break;

}

}

_initOverlayLayers(layers, _taskID) {

// 存储地图上所有的图层对象

if (this.expectLayerLen > 0) {

layers.forEach((layer) => {

const type = this.webMapService.getDatasourceType(layer);

// TODO --- 暂不支持 SAMPLE_DATA

if (type === 'SAMPLE_DATA') {

this._addLayerSucceeded();

this.fire('layercreatefailed', {

error: 'SAMPLE DATA is not supported',

layer,

map: this.map

});

return;

}

if (layer.visibleScale) {

const { minScale, maxScale } = layer.visibleScale;

const crs = this.map.getCRS();

layer.minzoom = Math.max(this._transformScaleToZoom(minScale, crs), 0);

layer.maxzoom = Math.min(24, this._transformScaleToZoom(maxScale, crs) + 0.0000001);

}

if (type === 'tile') {

if (layer.autoUpdateTime) {

this._layerTimerList.push(

setInterval(() => {

this._initBaseLayer(layer);

}, layer.autoUpdateTime)

);

}

this._initBaseLayer(layer, () => {

this._addLayerSucceeded();

});

} else {

this.getLayerFeatures(layer, _taskID, type);

if (layer.autoUpdateTime) {

this._layerTimerList.push(

setInterval(() => {

this.getLayerFeatures(layer, _taskID, type);

}, layer.autoUpdateTime)

);

}

}

}, this);

}

}

_initOverlayLayer(layerInfo, features = [], mergeByField, featureProjection) {

const { layerID, layerType, visible, style, featureType, projection } = layerInfo;

layerInfo.visible = visible ? 'visible' : 'none';

features = mergeFeatures({ sourceId: layerID, features, mergeByField, map: this.map });

if (layerType === 'restMap') {

this._createRestMapLayer(features, layerInfo);

return;

}

if (layerType === 'mvt') {

this._createMvtLayer(features.info, layerInfo, features.featureType);

return;

}

// mbgl 目前不能处理 geojson 复杂面情况

// mbgl isssue https://github.com/mapbox/mapbox-gl-js/issues/7023

if (features && features[0] && features[0].geometry && features[0].geometry.type === 'Polygon') {

features = this._handleMultyPolygon(features);

}

const realProjection = featureProjection || projection;

if (

features &&

realProjection &&

realProjection !== 'EPSG:4326' &&

layerInfo.dataSource &&

layerInfo.dataSource.type !== 'REST_DATA'

) {

this._unprojectProjection = toEpsgCode(projection);

features = this.transformFeatures(features);

}

features = this.handleLayerFeatures(features, layerInfo);

if (layerType === 'VECTOR') {

if (featureType === 'POINT') {

if (style.type === 'SYMBOL_POINT') {

this._createSymbolLayer(layerInfo, features);

} else {

this._createGraphicLayer(layerInfo, features);

}

} else {

// 线和面

this._createVectorLayer(layerInfo, features);

// 不在 _createVectorLayer 里面处理 layerAdded++ 的原因：_createDataflowLayer 也调用了_createVectorLayer ，会导致layerAdded > expectLayerLen

this._addLayerSucceeded({ layerInfo, features });

}

} else if (layerType === 'UNIQUE') {

this._createUniqueLayer(layerInfo, features);

} else if (layerType === 'RANGE') {

this._createRangeLayer(layerInfo, features);

} else if (layerType === 'HEAT') {

this._createHeatLayer(layerInfo, features);

} else if (layerType === 'MARKER') {

this._createMarkerLayer(layerInfo, features);

} else if (layerType === 'MIGRATION') {

this._createMigrationLayer(layerInfo, features);

} else if (layerType === 'RANK_SYMBOL') {

this._createRankSymbolLayer(layerInfo, features);

} else if (this._isDataflowLayer(layerType)) {

this._createDataflowLayer(layerInfo);

}

}

_initGraticuleLayer(graticuleInfo) {

const options = this._createGraticuleOptions(graticuleInfo);

const graticuleLayer = new GraticuleLayer(options);

this._setGraticuleDash(options.strokeStyle, graticuleLayer);

this._graticuleLayer = graticuleLayer;

this.map.addLayer(graticuleLayer);

this._setCacheLayer({

parentLayerId: graticuleLayer.id,

subRenderLayers: [{ layerId: graticuleLayer.id }, { layerId: graticuleLayer.sourceId }],

metadata: { SM_Layer_Order: 'Top' }

});

this._addLayerSucceeded();

}

_createGraticuleOptions(graticuleInfo) {

let { extent, lonLabelStyle, latLabelStyle } = graticuleInfo;

const { strokeColor, lineDash, strokeWidth, interval } = graticuleInfo;

const strokeStyle = {

lineColor: strokeColor,

lindDasharray: lineDash,

lineWidth: strokeWidth

};

lonLabelStyle = {

textFont: lonLabelStyle.fontFamily.split(','),

textSize: lonLabelStyle.fontSize,

textAnchor: latLabelStyle.textBaseline,

textColor: lonLabelStyle.fill,

textHaloColor: lonLabelStyle.outlineColor,

textHaloWidth: lonLabelStyle.outlineWidth

};

latLabelStyle = {

textFont: latLabelStyle.fontFamily.split(','),

textSize: latLabelStyle.fontSize,

textAnchor: latLabelStyle.textBaseline,

textColor: latLabelStyle.fill,

textHaloColor: latLabelStyle.outlineColor,

textHaloWidth: latLabelStyle.outlineWidth

};

extent = extent || this.map.getCRS().extent;

extent = [this._unproject([extent[0], extent[1]]), this._unproject([extent[2], extent[3]])];

return {

minZoom: 1,

strokeStyle,

extent,

interval: interval && interval[0],

lngLabelStyle: lonLabelStyle,

latLabelStyle,

layerID: `graticuleLayer_${+new Date()}`

};

}

_setGraticuleDash(strokeStyle, graticuleLayers) {

this.map.on('zoomend', () => {

if (this.map.getZoom() < 3) {

graticuleLayers.setStrokeStyle({

...strokeStyle,

lineOpacity: 0.5,

lineWidth: strokeStyle.lineWidth / 2,

lindDasharray: [0.1, 3]

});

} else {

graticuleLayers.setStrokeStyle(strokeStyle);

}

});

}

_createTiandituLayer(mapInfo, addedCallback) {

const tiandituUrls = this._getTiandituUrl(mapInfo);

const { labelLayerVisible, name, visible } = mapInfo.baseLayer;

const isLabel = Boolean(labelLayerVisible);

const labelUrl = tiandituUrls.labelUrl;

const tiandituUrl = tiandituUrls.tiandituUrl;

const bounds = INTERNET_MAP_BOUNDS['TIANDITU'];

this._addBaselayer({ url: tiandituUrl, layerID: name, visibility: visible, bounds });

isLabel &&

this._addBaselayer({

url: labelUrl,

layerID: this._getTdtLabelLayerName(name),

parentLayerId: name,

visibility: visible,

bounds

});

addedCallback && addedCallback();

}

_createWMTSLayer(layerInfo, addedCallback) {

this.webMapService

.getWmtsInfo(layerInfo, this.map.getCRS().epsgCode)

.then(

(result) => {

const layerId = layerInfo.layerID || layerInfo.name;

if (result.isMatched) {

const wmtsUrl = this._getWMTSUrl(Object.assign({}, layerInfo, result));

this._addBaselayer({

url: [wmtsUrl],

layerID: layerId,

visibility: layerInfo.visible,

minzoom: result.matchMinZoom,

maxzoom: result.matchMaxZoom,

isIserver: false,

bounds: result.bounds

});

addedCallback && addedCallback();

}

},

(error) => {

addedCallback && addedCallback();

throw new Error(error);

}

)

.catch((error) => {

this.fire('layercreatefailed', { error, layer: layerInfo, map: this.map });

});

}

async _createBingLayer(layerName, layerInfo, addedCallback) {

let metaInfoUrl = `https://dev.virtualearth.net/REST/v1/Imagery/Metadata/RoadOnDemand?uriScheme=https&include=ImageryProviders&key=${this.bingMapsKey}&c=zh-cn`;

const metaInfo = await this._fetchRequest(metaInfoUrl, 'json', {

withoutFormatSuffix: true

});

if (

metaInfo.statusCode !== 200 ||

metaInfo.resourceSets.length !== 1 ||

metaInfo.resourceSets[0].resources.length !== 1

) {

return;

}

const resource = metaInfo.resourceSets[0].resources[0];

const urls = resource.imageUrlSubdomains.map((subdomain) => {

const imageUrl = resource.imageUrl.replace('{subdomain}', subdomain);

return imageUrl;

});

this._addBaselayer({ url: urls, layerID: layerName, visibility: layerInfo.visible, bounds: INTERNET_MAP_BOUNDS['BING'] });

addedCallback && addedCallback();

}

_createXYZLayer(layerInfo, url, addedCallback) {

let urlArr = [];

if (layerInfo.layerType === 'OSM') {

const res = url.match(/\w\-\w/g)[0];

const start = res[0];

const end = res[2];

let alphabet = '';

for (let i = 97; i < 123; i++) {

alphabet += String.fromCharCode(i);

}

const alphabetArr = alphabet.split('');

const startIndex = alphabetArr.indexOf(start);

const endIndex = alphabetArr.indexOf(end);

const res3 = alphabetArr.slice(startIndex, endIndex + 1);

for (let i = 0; i < res3.length; i++) {

const replaceRes = url.replace(/{\w\-\w}/g, res3[i]);

urlArr.push(replaceRes);

}

} else if (layerInfo.layerType === 'GOOGLE_CN') {

const res = url.match(/\d\-\d/g)[0];

const start = parseInt(res[0]);

const end = parseInt(res[2]);

for (let i = start; i <= end; i++) {

const replaceRes = url.replace(/{\d\-\d}/g, i.toString());

urlArr.push(replaceRes);

}

} else {

urlArr = [url];

}

const layerId = layerInfo.layerID || layerInfo.name;

this._addBaselayer({ url: urlArr, layerID: layerId, visibility: layerInfo.visible, bounds: INTERNET_MAP_BOUNDS[layerInfo.layerType] || [-180, -90, 180, 90] });

addedCallback && addedCallback();

}

_createZXYLayer(layerInfo, addedCallback) {

const { url, subdomains, layerID, name, visible, tileSize, resolutions, origin, minZoom: minzoom, maxZoom: maxzoom } = layerInfo;

const urls = (subdomains && subdomains.length) ? subdomains.map(item => url.replace('{s}', item)) : [url];

const layerId = layerID || name;

const isSupport = this._isSupportZXYTileLayer({ resolutions, tileSize, origin });

if (isSupport) {

this._addBaselayer({ url: urls, layerID: layerId, visibility: visible, minzoom, maxzoom, isIserver: false, tileSize });

} else {

this.fire('xyztilelayernotsupport', { error: `The resolutions or origin of layer ${name} on XYZ Tile does not match the map`, error_code: 'XYZ_TILE_LAYER_NOT_SUPPORTED', layer: layerInfo});

}

addedCallback && addedCallback();

}

_isSupportZXYTileLayer({ resolutions, tileSize, origin }) {

const isOldWebMecartor = origin === undefined && resolutions === undefined;

if (isOldWebMecartor) {

return true;

}

return this._isSameOrigin(origin) && this._isSameResolutions(resolutions, tileSize);