return class WebMapV3 extends SuperClass {

constructor(mapId, options, mapOptions = {}) {

super();

this.mapId = mapId;

this.options = options;

this.mapOptions = mapOptions;

this._mapResourceInfo = {};

this._relatedInfo = options.relatedInfo || {};

this._sprite = '';

this._spriteDatas = {};

this._appendLayers = false;

this._baseProjection = '';

}

initializeMap(mapInfo, map) {

this._mapInfo = mapInfo;

this._baseProjection = this._registerMapCRS(mapInfo);

if (map) {

this.map = map;

if (!crsManager.isSameProjection(this.map, this._baseProjection)) {

this.fire('projectionnotmatch');

return;

}

this._appendLayers = true;

// 处理图层管理添加 sprite

const sprite = this._mapInfo.sprite;

if (sprite) {

this._sprite = sprite;

this.map.addStyle({

sprite

});

}

this._initLayers();

return;

}

this._createMap();

}

cleanLayers(layers) {

super.cleanLayers(layers);

const l7MarkerLayers = l7LayerUtil.getL7MarkerLayers();

for (const layerId in l7MarkerLayers) {

l7LayerUtil.removeL7MarkerLayer(layerId, this.map.$l7scene);

}

}

clean(removeMap = true) {

if (this.map) {

if (this._sourceListModel) {

this._sourceListModel.destroy();

this._sourceListModel = null;

}

if (removeMap) {

const scene = this.map.$l7scene;

scene && scene.removeAllLayer();

this.map.remove();

}

this.map = null;

this._legendList = [];

this._mapResourceInfo = {};

this._sprite = '';

this._spriteDatas = {};

this.mapOptions = {};

this.options = {};

}

}

async copyLayer(id, layerInfo = {}) {

const matchLayer = this._mapInfo.layers.find(layer => layer.id === id);

if (!matchLayer || this._getLayerOnMap(layerInfo.id)) {

return;

}

const copyLayerId = layerInfo.id || `${matchLayer.id}_copy`;

const copyLayer = { ...matchLayer, ...layerInfo, id: copyLayerId };

if (l7LayerUtil.isL7Layer(copyLayer)) {

const layers = [copyLayer];

const params = this._getAddL7LayersParams(layers, this._mapInfo.sources, layers);

await l7LayerUtil.addL7Layers(params);

} else {

if (typeof copyLayer.source === 'object') {

this.map.addSource(copyLayer.id, copyLayer.source);

copyLayer.source = copyLayer.id;

}

this.map.addLayer(copyLayer);

}

return copyLayer;

}

updateOverlayLayer(layerInfo, features, mergeByField) {

if (layerInfo.renderSource.type === 'geojson') {

const sourceId = layerInfo.renderSource.id;

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

const featureCollection = {

type: 'FeatureCollection',

features

};

this.map.getSource(sourceId).setData(featureCollection);

}

}

/**

_createMap() {

let {

name = '',

center = new mapRepo.LngLat(0, 0),

zoom = 0,

bearing = 0,

pitch = 0,

minzoom,

maxzoom,

sprite = ''

} = this._mapInfo;

center = this.mapOptions.center || center;

zoom = this.mapOptions.zoom || zoom;

bearing = this.mapOptions.bearing || bearing;

pitch = this.mapOptions.pitch || pitch;

const fontFamilys = this._getLabelFontFamily();

// 初始化 map

const mapOptions = {

...this.mapOptions,

transformRequest: this._getTransformRequest(),

container: this.options.target,

crs: this._baseProjection,

center,

zoom,

style: {

sprite,

name,

version: 8,

sources: {},

layers: []

},

minZoom: minzoom,

maxZoom: maxzoom,

bearing,

pitch,

localIdeographFontFamily: fontFamilys || ''

};

this.map = new MapManager(mapOptions);

this._sprite = sprite;

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

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

this._initLayers();

});

}

_getTransformRequest() {

if (this.mapOptions.transformRequest) {

return this.mapOptions.transformRequest;

}

return (url, resourceType) => {

if (resourceType === 'Tile') {

const withCredentials = this.options.iportalServiceProxyUrlPrefix && url.indexOf(this.options.iportalServiceProxyUrlPrefix) >= 0;

return {

url: url,

credentials: withCredentials ? 'include' : undefined,

...(this.options.tileTransformRequest && this.options.tileTransformRequest(url))

};

}

return { url };

}

}

_registerMapCRS(mapInfo) {

const { crs } = mapInfo;

let epsgCode = crs;

if (typeof crs === 'object') {

crsManager.registerCRS(crs);

epsgCode = crs.name;

}

return epsgCode;

}

/**

async _initLayers() {

await this._getSpriteDatas();

if (Object.prototype.toString.call(this.mapId) === '[object Object]') {

this.mapParams = {

title: this._mapInfo.name,

description: this._relatedInfo.description

};

if (this._relatedInfo.projectInfo) {

this._mapResourceInfo = JSON.parse(this._relatedInfo.projectInfo);

}

this._createMapRelatedInfo();

this._addLayersToMap();

return;

}

this._getMapRelatedInfo()

.then((relatedInfo) => {

this.mapParams = {

title: this._mapInfo.name,

description: relatedInfo.description

};

this._mapResourceInfo = JSON.parse(relatedInfo.projectInfo);

this._createMapRelatedInfo();

this._addLayersToMap();

})

.catch((error) => {

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

console.error(error);

});

}

/**

_createMapRelatedInfo() {

const { glyphs } = this._mapInfo;

for (let key in glyphs) {

this.map.style.addGlyphs(key, glyphs[key]);

}

}

/**

_getMapRelatedInfo() {

const mapResourceUrl = transformUrl(

Object.assign({ url: `${this.options.server}web/maps/${this.mapId}` }, this.options)

);

return FetchRequest.get(mapResourceUrl, null, { withCredentials: this.options.withCredentials }).then((response) =>

response.json()

);

}

/**

async _addLayersToMap() {

try {

const { sources, layers, layerCatalog, catalogs } = this._setUniqueId(this._mapInfo, this._mapResourceInfo);

Object.assign(this._mapInfo, {

sources,

layers,

metadata: Object.assign(this._mapInfo.metadata, { layerCatalog })

});

Object.assign(this._mapResourceInfo, { catalogs });

const mapboxglLayers = layers.filter((layer) => !l7LayerUtil.isL7Layer(layer));

mapboxglLayers.forEach((layer) => {

if (layer.metadata && layer.metadata.reused) {

return;

}

layer.source && !this.map.getSource(layer.source) && this.map.addSource(layer.source, sources[layer.source]);

// L7才会用到此属性

if (layer.type === 'symbol' && layer.layout['text-z-offset'] === 0) {

delete layer.layout['text-z-offset'];

}

this.map.addLayer(layer);

});

const l7Layers = layers.filter((layer) => l7LayerUtil.isL7Layer(layer));

if (l7Layers.length > 0) {

const params = this._getAddL7LayersParams(layers, sources, l7Layers);

await l7LayerUtil.addL7Layers(params);

}

this._createLegendInfo();

this._sendMapToUser();

} catch (error) {

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

console.error(error);

}

}

_getAddL7LayersParams(layers, sources, l7Layers) {

return {

map: this.map,

webMapInfo: { ...this._mapInfo, layers, sources },

l7Layers,

spriteDatas: this._spriteDatas,

options: {

...this.options,

emitterEvent: this.fire.bind(this),

transformRequest: this._getTransformRequest()

}

}

}

/**

_setUniqueId(style, projectInfo) {

const unspportedLayers = this._handleUnSupportedLayers(style);

const layersToMap = JSON.parse(JSON.stringify(style.layers)).filter((layer) => {

return !unspportedLayers.includes(layer.id);

});

const nextSources = {};

const sourcesIdChangedMap = {};

const layerIdToChange = [];

const timestamp = `_${+new Date()}`;

for (const sourceId in style.sources) {

let nextSourceId = sourceId;

if (this.map.getSource(sourceId)) {

nextSourceId = sourceId + timestamp;

}

sourcesIdChangedMap[nextSourceId] = sourceId;

nextSources[nextSourceId] = style.sources[sourceId];

for (const layer of layersToMap) {

if (layer.source === sourceId) {

layer.source = nextSourceId;

}

}

}

for (const layer of layersToMap) {

const originId = layer.id;

const existLayer = this._getLayerOnMap(layer.id);

if (existLayer) {

if (

this.options.checkSameLayer &&

isSameRasterLayer(nextSources[layer.source], this.map.getSource(existLayer.source))

) {

layer.metadata = layer.metadata || {};

layer.metadata.reused = true;

layer.source = sourcesIdChangedMap[layer.source];

} else {

const layerId = layer.id + timestamp;

layer.id = layerId;

}

}

layerIdToChange.push({ originId: originId, renderId: layer.id, id: originId });

}

const layerCatalogFromMapJson = JSON.parse(JSON.stringify(style.metadata.layerCatalog), 'parts');

this._updateLayerCatalogsId({

loopData: JSON.parse(JSON.stringify(layerCatalogFromMapJson)),

catalogs: layerCatalogFromMapJson,

layerIdMapList: layerIdToChange,

unspportedLayers

});

const catalogsFromProjectInfo = JSON.parse(JSON.stringify(projectInfo.catalogs || []));

this._updateLayerCatalogsId({

loopData: JSON.parse(JSON.stringify(catalogsFromProjectInfo)),

catalogs: catalogsFromProjectInfo,

layerIdMapList: layerIdToChange,

catalogTypeField: 'catalogType',

layerIdsField: 'layersContent',

unspportedLayers

});

return {

sources: nextSources,

layers: layersToMap,

layerCatalog: layerCatalogFromMapJson,

catalogs: catalogsFromProjectInfo

};

}

_getLayerOnMap(layerId) {

const overlayLayer = this.map.overlayLayersManager[layerId];

if (overlayLayer) {

return overlayLayer;

}

const l7MarkerLayers = l7LayerUtil.getL7MarkerLayers();

const l7MarkerLayer = l7MarkerLayers[layerId];

if (l7MarkerLayer) {

return l7MarkerLayer;

}

return this.map.getLayer(layerId);

}

_findLayerCatalog(items, id) {

for (const item of items) {

if (item.id === id) {

return item;

}

if (item.children) {

const found = this._findLayerCatalog(item.children, id);

if (found) {

return found;

}

}

}

return null;

}

_deleteLayerCatalog(catalogs, id) {

for (let index = 0; index < catalogs.length; index++) {

const catalog = catalogs[index];

if (catalog.id === id) {

catalogs.splice(index, 1);

break;

}

if (catalog.children) {

this._deleteLayerCatalog(catalog.children, id);

}

}

}

_updateLayerCatalogsId({

loopData,

catalogs,

layerIdMapList,

catalogTypeField = 'type',

layerIdsField = 'parts',

unspportedLayers

}) {

loopData.forEach((loopItem) => {

const { id, children } = loopItem;

if (loopItem[catalogTypeField] === 'group') {

this._updateLayerCatalogsId({

loopData: children,

catalogs,

layerIdMapList,

catalogTypeField,

layerIdsField,

unspportedLayers

});

return;

}

const renderLayers = getLayerCatalogRenderLayers(loopItem[layerIdsField], id, layerIdMapList);

const matchLayer = layerIdMapList.find((item) => item.originId === renderLayers[0]);

if (matchLayer) {

const catalog = this._findLayerCatalog(catalogs, id);

catalog.id = matchLayer.renderId;

catalog.reused = matchLayer.reused;

if (catalog[layerIdsField]) {

catalog[layerIdsField] = this._renameLayerIdsContent(catalog[layerIdsField], layerIdMapList);

}

return;

}

if (unspportedLayers.includes(id) || renderLayers.some((layerId) => unspportedLayers.includes(layerId))) {

this._deleteLayerCatalog(catalogs, id);

}

});

}

/**

_sendMapToUser() {

this._sourceListModel = new SourceListModelV3({

map: this.map,

appendLayers: this._appendLayers,

mapInfo: this._mapInfo,

mapResourceInfo: this._mapResourceInfo,

legendList: this._legendList,

l7LayerUtil

});

this._sourceListModel.on({

layerupdatechanged: (params) => {

this.fire('layerupdatechanged', params);

}

});

this.fire('mapcreatesucceeded', { map: this.map, mapparams: this.mapParams, layers: this.getSelfAppreciableLayers() });

}

_renameLayerIdsContent(layerIds, layerIdRenameMapList) {

if (!layerIds) {

return layerIds;

}

return layerIds.map((id) => {

const matchItem = layerIdRenameMapList.find((item) => item.originId === id);

return matchItem.renderId;

});

}

_parseRendererStyleData(renderer) {

// 根据 map 的工程信息返回结果看，聚合图层的 renderer 是对象 其他图层是数组

if (renderer instanceof Array) {

return renderer;

}

return [renderer];

}

/**

_getLabelFontFamily() {

const fonts = ['sans-serif'];

const layers = this._mapInfo.layers;

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

layers.forEach((layer) => {

const textFont = (layer.layout && layer.layout['text-font']) || [];

fonts.push(...textFont);

});

}

const fontFamilys = fonts.join(',');

return fontFamilys;

}

/**

_getSpriteDatas() {

const sprite = this._sprite;

if (!sprite) {

return;

}

const spriteUrls = [];

if (typeof sprite === 'string') {

spriteUrls.push(sprite);

} else if (typeof sprite === 'object') {

Object.keys(sprite).forEach((sourceId) => {

spriteUrls.push(sprite[sourceId]);

});

}

return Promise.all(spriteUrls.map((url) => this._getSpriteData(url))).then((allResults) => {

allResults.forEach((result) => {

this._spriteDatas = {...this._spriteDatas, ...result};

});

return;

});

}

_getSpriteData(sprite) {

const url = sprite.replace(/.+(web\/maps\/.+)/, `${this.options.server}$1`);

return FetchRequest.get(url, null, { withCredentials: this.options.withCredentials })

.then((response) => {

return response.json();

});

}

_createLegendInfo() {

const { catalogs = [] } = this._mapResourceInfo;

const originLayers = getLayerInfosFromCatalogs(catalogs, 'catalogType');

for (const layer of originLayers) {

const { renderer, label } = layer.visualization || {};

if (!renderer) {

continue;

}

const layerFromMapInfo = getMainLayerFromCatalog(layer.layersContent, layer.id, this._mapInfo.layers);

let themeField;

const sourceInfo = this._mapInfo.sources[layerFromMapInfo.source];

if ('clusterField' in sourceInfo) {

themeField = sourceInfo.clusterField;

}

const nextLayer = Object.assign({}, layerFromMapInfo, { title: layer.title, themeField });

const styleSettings = this._parseRendererStyleData(renderer);

// 线面文本标签

if (label) {

styleSettings.push({...label, type: 'text'});

if (label.symbolsContent && label.symbolsContent.value.symbolId) {

styleSettings.push({...label, type: 'symbol'});

}

}

// 点文本标签

if (styleSettings[0].textField && styleSettings[0].textField.value) {

styleSettings.push({

...styleSettings[0],

type: 'text'

});

}

const layerLegends = styleSettings.reduce((legends, styleSetting) => {

const legendItems = this._createLayerLegendList(nextLayer, styleSetting);

legendItems && legends.push(...legendItems);

return legends;

}, []);

this._legendList.push(...layerLegends);

}

}

_getAliasKey(renderType, key) {

if (renderType === 'isoline3D' && key === 'dashArray') {

return 'lineDasharray';

}

return key;

}

_transStyleKeys(renderType, keys) {

return keys.map((key) => this._getAliasKey(renderType, key));

}

_transStyleSetting(renderType, styleSetting) {

for (const key in styleSetting) {

const aliasKey = this._getAliasKey(renderType, key);

if (aliasKey !== key) {

styleSetting[aliasKey] = styleSetting[key];

}

}

}

_getLegendSimpleStyle(styleSetting, keys) {

const simpleStyle = {};

if (keys) {

const simpleKeys = keys.filter((k) => styleSetting[k] && styleSetting[k].type === 'simple');

simpleKeys.forEach((k) => {

if (k === 'outlineColor' && !(styleSetting['antialias'] || {}).value) {

return;

}

simpleStyle[k] = (styleSetting[k] || {}).value;

});

}

return simpleStyle;

}

_getLegendRenderType(renderType) {

switch (renderType) {

case 'text':

return LEGEND_RENDER_TYPE.TEXT;

case 'circle':

case 'symbol':

case 'column':

return LEGEND_RENDER_TYPE.POINT;

case 'heatGrid':

case 'heatHexagon':

case 'heat3DGrid':

case 'heat3DHexagon':

return LEGEND_RENDER_TYPE.BUILTINSYMBOL;

case 'line':

case 'isoline3D':

return LEGEND_RENDER_TYPE.LINE;

case 'fill':

return LEGEND_RENDER_TYPE.FILL;

case 'fillExtrusion':

return LEGEND_RENDER_TYPE.FILLEXTRUSION;

case 'animatePoint':

return LEGEND_RENDER_TYPE.ANIMATEPOINT;

case 'line3D':

case 'animateLine':

return LEGEND_RENDER_TYPE.ANIMATELINE;

case 'radarPoint':

return LEGEND_RENDER_TYPE.RADARPOINT;

}

}

_getLegendShape(renderType, styleSetting) {

switch (renderType) {

case 'text':

return LEGEND_SHAPE_TYPE.TEXT;

case 'circle':

case 'symbol':

return LEGEND_SHAPE_TYPE.POINT;

case 'column': {

const symbolIds = {

cylinder: LEGEND_SHAPE_TYPE.POINT,

triangleColumn: LEGEND_SHAPE_TYPE.TRIANGLE,

squareColumn: LEGEND_SHAPE_TYPE.RECTANGLE,

hexagonColumn: LEGEND_SHAPE_TYPE.HEXAGON

};

return symbolIds[styleSetting.shape.value] || LEGEND_SHAPE_TYPE.POINT;