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

super();

this.mapId = mapId;

this.options = options;

this.mapOptions = mapOptions;

this._legendList = [];

this._mapResourceInfo = {};

this._sprite = '';

this._spriteDatas = {};

this.excludeSourceNames = ['tdt-search-', 'tdt-route-', 'smmeasure', 'mapbox-gl-draw', /tracklayer-\d+-line/];

this._appendLayers = false;

this._baseProjection = '';

}

/**

initializeMap(mapInfo, map) {

this._mapInfo = mapInfo;

const proj = this._setBaseProjection();

if (!proj) {

return;

}

if (map) {

this._appendLayers = true;

this.map = map;

// 处理图层管理添加 sprite

const { sources, sprite } = this._mapInfo;

if (sprite && sources) {

Object.keys(sources).forEach((sourceName) => {

if (sources[sourceName].type === 'vector') {

this.map.style.addSprite(sourceName, sprite);

}

});

}

this._initLayers();

return;

}

this._createMap();

}

/**

getAppreciableLayers() {

return this._generateLayers();

}

getLayerCatalog() {

return this._generateLayerCatalog();

}

getLegendInfo() {

return this._legendList;

}

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 (isL7Layer(copyLayer)) {

const layers = [copyLayer];

await addL7Layers({

map: this.map,

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

l7Layers: layers,

spriteDatas: this._spriteDatas,

options: this.options

});

return;

}

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

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

copyLayer.source = copyLayer.id;

}

this.map.addLayer(copyLayer);

}

updateOverlayLayer(layerInfo, features, mergeByField) {

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

const sourceId = layerInfo.renderSource.id;

features = this._mergeFeatures(sourceId, features, mergeByField);

const featureCollection = {

type: 'FeatureCollection',

features

};

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

}

}

_mergeFeatures(sourceId, features, mergeByField) {

if (!(features instanceof Array)) {

return features;

}

features = features.map((feature, index) => {

if (!Object.prototype.hasOwnProperty.call(feature.properties, 'index')) {

feature.properties.index = index;

}

return feature;

});

if (!features.length || !mergeByField && features[0].geometry) {

return features;

}

const source = this.map.getSource(sourceId);

if ((!source || !source._data.features) && features[0].geometry) {

return features;

}

const prevFeatures = source && source._data && source._data.features;

const nextFeatures = [];

if (!mergeByField && prevFeatures) {

return prevFeatures;

}

features.forEach((feature) => {

const prevFeature = prevFeatures.find((item) => {

if (isNaN(+item.properties[mergeByField]) && isNaN(+feature.properties[mergeByField])) {

return (

JSON.stringify(item.properties[mergeByField] || '') ===

JSON.stringify(feature.properties[mergeByField] || '')

);

} else {

return +item.properties[mergeByField] === +feature.properties[mergeByField];

}

});

if (prevFeature) {

nextFeatures.push({

...prevFeature,

...feature

});

} else if (feature.geometry) {

nextFeatures.push(feature);

}

});

return nextFeatures;

}

/**

_createMap() {

let {

name = '',

center = new mapboxgl.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 = {

transformRequest: (url, resourceType) => {

const res = { url };

if (

resourceType === 'Tile' &&

this.options.iportalServiceProxyUrl &&

url.indexOf(this.options.iportalServiceProxyUrl) >= 0

) {

res.credentials = 'include';

}

return res;

},

...this.mapOptions,

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 mapboxgl.Map(mapOptions);

this._sprite = sprite;

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

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

this._initLayers();

});

}

_setBaseProjection() {

let crs = this._mapInfo.crs;

let baseProjection = crs;

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

baseProjection = crs.name;

if (!mapboxgl.CRS) {

const error = `The EPSG code ${baseProjection} needs to include mapbox-gl-enhance.js. Refer to the example: https://iclient.supermap.io/examples/mapboxgl/editor.html#mvtVectorTile_2362`;

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

console.error(error);

return;

}

this._setCRS(crs);

}

this._baseProjection = baseProjection;

return this._baseProjection;

}

_setCRS({ name, wkt, extent }) {

const crs = new mapboxgl.CRS(name, wkt, extent, extent[2] > 180 ? 'meter' : 'degree');

mapboxgl.CRS.set(crs);

}

/**

_initLayers() {

if (this.map.getCRS && this.map.getCRS().epsgCode !== this._baseProjection) {

this.fire('projectionisnotmatch');

return;

}

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

this.mapParams = {

title: this._mapInfo.name,

description: ''

};

this._createMapRelatedInfo();

this._addLayersToMap();

return;

}

Promise.all([this._getMapRelatedInfo(), this._getSpriteDatas()])

.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('getmapinfofailed', { 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 = Util.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) => !isL7Layer(layer));

mapboxglLayers.forEach((layer) => {

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) => isL7Layer(layer));

if (l7Layers.length > 0) {

await addL7Layers({

map: this.map,

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

l7Layers,

spriteDatas: this._spriteDatas,

options: {

...this.options,

emitterEvent: this.fire.bind(this)

}

});

}

this._createLegendInfo();

this._sendMapToUser();

} catch (error) {

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

console.error(error);

}

}

/**

_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 layerIdToChange = [];

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

for (const sourceId in style.sources) {

let nextSourceId = sourceId;

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

nextSourceId = sourceId + timestamp;

}

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;

if (this.getLayerOnMap(layer.id)) {

const layerId = layer.id + timestamp;

layer.id = layerId;

}

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

}

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 = 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 matchLayer = layerIdMapList.find((item) => item.originId === id);

if (matchLayer) {

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

catalog.id = matchLayer.renderId;

if (catalog[layerIdsField]) {

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

}

return;

}

if (unspportedLayers.includes(id)) {

this._deleteLayerCatalog(catalogs, id);

}

});

}

/**

_sendMapToUser() {

const appreciableLayers = this.getAppreciableLayers();

const selfLayerIds = this._getSelfLayerIds();

const matchLayers = appreciableLayers.filter((item) => selfLayerIds.some((id) => id === item.id));

this.fire('addlayerssucceeded', { map: this.map, mapparams: this.mapParams, layers: matchLayers });

}

_getLayerInfosFromCatalogs(catalogs, catalogTypeField = 'type') {

const results = [];

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

const catalogType = catalogs[i][catalogTypeField];

if (catalogType !== 'group') {

results.push(catalogs[i]);

continue;

}

const { children } = catalogs[i];

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

const result = this._getLayerInfosFromCatalogs(children, catalogTypeField);

results.push(...result);

}

}

return results;

}

clean() {

if (this.map) {

const scene = this.map.$l7scene;

if (scene) {

scene.removeAllLayer();

}

this.map.remove();

this.map = null;

this._legendList = [];

this._mapResourceInfo = {};

this._sprite = '';

this._spriteDatas = {};

this.mapOptions = {};

this.options = {};

}

}

excludeSource(key) {

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

if (key && key.match(this.excludeSourceNames[i])) {

return false;

}

}

return true;

}

_getSelfLayerIds() {

return this._mapInfo.layers.map((item) => item.id);

}

_getLayersOnMap() {

const selfLayers = [].concat(this._mapInfo.layers).map((item) => {

const layer = Object.assign({}, item);

if (item['source-layer']) {

layer.sourceLayer = item['source-layer'];

delete layer['source-layer'];

}

return layer;

});

if (this._appendLayers) {

return selfLayers;

}

const layersOnMap = this.map.getStyle().layers.map((layer) => {

const nextLayer = this.map.getLayer(layer.id);

return { ...nextLayer, layout: Object.assign({}, layer.layout, nextLayer.layout) };

});

for (const layerId in this.map.overlayLayersManager) {

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

if (overlayLayer.id && !layersOnMap.some((item) => item.id === overlayLayer.id)) {

const visibility =

overlayLayer.visibility === 'visible' ||

overlayLayer.visibility ||

overlayLayer.visible ||

(!('visible' in overlayLayer) && !('visibility' in overlayLayer))

? 'visible'

: 'none';

let source = overlayLayer.source || overlayLayer.sourceId;

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

source = overlayLayer.id;

}

layersOnMap.push({

id: overlayLayer.id,

layout: { visibility },

source,

type: overlayLayer.type

});

}

}

const selfLayerIds = this._getSelfLayerIds();

const extraLayers = layersOnMap

.filter((layer) => !selfLayerIds.some((id) => id === layer.id))

.filter((layer) => this.excludeSource(layer.source))

.filter((layer) => !layer.id.includes('-SM-'));

return selfLayers.concat(extraLayers);

}

/**

_generateLayers() {

const allLayersOnMap = this._getLayersOnMap();

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

const projectCataglogs = this._getLayerInfosFromCatalogs(catalogs, 'catalogType');

const metadataCatalogs = this._getLayerInfosFromCatalogs(this._mapInfo.metadata.layerCatalog);

const l7MarkerLayers = getL7MarkerLayers();

const layers = allLayersOnMap.reduce((layersList, layer) => {

const containLayer = metadataCatalogs.find((item) => {

if (item.parts && item.id !== layer.id) {

return item.parts.includes(layer.id);

}

return false;

});

if (containLayer) {

return layersList;

}

const matchProjectCatalog = projectCataglogs.find((item) => item.id === layer.id) || {};

const matchMetadataCatalog = metadataCatalogs.find((item) => item.id === layer.id) || {};

const { msDatasetId } = matchProjectCatalog;

const { title = layer.id, parts } = matchMetadataCatalog;

let dataSource = {};

if (msDatasetId) {

for (const data of datas) {

const matchData = data.datasets && data.datasets.find((dataset) => dataset.msDatasetId === msDatasetId);

if (matchData) {

dataSource = {

serverId: matchData.datasetId,

type: data.sourceType

}

if (data.sourceType === 'REST_DATA') {

const [serverUrl, datasourceName] = data.url.split('/rest/data/datasources/');

dataSource.url = `${serverUrl}/rest/data`;

dataSource.dataSourceName = `${datasourceName}:${matchData.datasetName}`;

delete dataSource.serverId;

}

break;

}

}

}

const sourceOnMap = this.map.getSource(layer.source);

if (!Object.keys(dataSource).length && sourceOnMap && sourceOnMap.type === 'vector') {

const matchSource = this._mapInfo.sources[layer.source] || sourceOnMap;

if (matchSource.tiles && matchSource.tiles[0].includes('/rest/maps/')) {

const tileUrl = matchSource.tiles[0];

const [serverUrl, leftParts] = tileUrl.split('/rest/maps/');