return class WebMapBase extends SuperClass {

constructor(

id,

options = {

layerFilter: function () {

return true;

}

},

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

) {

super();

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

this.mapId = id;

} else if (id !== null && typeof id === 'object') {

this.webMapInfo = id;

}

if (!this.mapId && !mapOptions.center && !mapOptions.zoom) {

mapOptions.center = [0, 0];

mapOptions.zoom = 0;

}

if (options.map) {

this.map = options.map;

}

this.options = Object.assign({}, options);

delete this.options.map;

this._setServer(options.server || 'https://www.supermapol.com');

this.options.target = options.target || 'map';

this.options.withCredentials = options.withCredentials || false;

this.mapOptions = mapOptions;

this.webMapService = new WebMapService(id, this.options);

this.eventTypes = [

/**

'mapinitialized',

/**

'mapcreatesucceeded',

/**

'addlayerssucceeded',

/**

'mapcreatefailed',

/**

'getmapfailed',

/**

'layercreatefailed',

/**

'getlayersfailed',

/**

'baidumapnotsupport',

/**

'layerorsourcenameduplicated',

/**

'dataflowfeatureupdated',

/**

'projectionnotmatch',

/**

'xyztilelayernotsupport',

'layeraddchanged',

'layerupdatechanged',

/**

'mapbeforeremove'

];

this._cacheCleanLayers = [];

this._mapInitializedHandler = this._mapInitializedHandler.bind(this);

this._mapCreateSucceededHandler = this._mapCreateSucceededHandler.bind(this);

this._addLayerChangedHandler = this._addLayerChangedHandler.bind(this);

}

/**

resize(keepBounds = false) {

this.map && this.map.resize();

this._handler && this._handler.echartsLayerResize();

const mapContainerStyle = window.getComputedStyle(document.getElementById(this.options.target));

const { bounds } = this.mapOptions;

if (keepBounds && this.map && bounds && mapContainerStyle) {

const zoom = this._getResizedZoom(bounds, mapContainerStyle);

if (zoom !== this.map.getZoom()) {

this.map && this.map.setZoom(zoom);

}

}

}

/**

setCenter(center) {

if (this.map && this._centerValid(center)) {

this.mapOptions.center = center;

const { lng, lat } = this.map.getCenter();

if (center[0] !== +lng.toFixed(4) || center[1] !== +lat.toFixed(4)) {

this.map.setCenter(center, { from: 'setCenter' });

}

}

}

/**

setRenderWorldCopies(isWorldCopy) {

if (this.map) {

this.mapOptions.renderWorldCopies = isWorldCopy;

this.map.setRenderWorldCopies(isWorldCopy);

}

}

/**

setBearing(bearing) {

if (this.map) {

this.mapOptions.bearing = bearing;

if (bearing !== +this.map.getBearing().toFixed(2)) {

(bearing || bearing === 0) && this.map.setBearing(bearing);

}

}

}

/**

setPitch(pitch) {

if (this.map) {

this.mapOptions.pitch = pitch;

if (pitch !== +this.map.getPitch().toFixed(2)) {

(pitch || pitch === 0) && this.map.setPitch(pitch);

}

}

}

/**

setStyle(style, preserveMap = false) {

if (this.map) {

this.mapOptions.style = style;

if (preserveMap) {

this.cleanLayers();

}

if (this._isWebMapV3(style)) {

this.setMapId(style, preserveMap)

return;

}

this._initWebMap(!preserveMap);

}

}

/**

setRasterTileSize(tileSize) {

if (!this.map || tileSize <= 0) {

return;

}

const sources = this.map.getStyle().sources;

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

if (sources[sourceId].type === 'raster' && sources[sourceId].rasterSource === 'iserver') {

this._updateRasterSource(sourceId, { tileSize });

}

});

}

/**

setMaxBounds(maxBounds) {

if (this.map) {

this.mapOptions.maxBounds = maxBounds;

maxBounds && this.map.setMaxBounds(maxBounds);

}

}

/**

setMinZoom(minZoom) {

if (this.map) {

this.mapOptions.minZoom = minZoom;

(minZoom || minZoom === 0) && this.map.setMinZoom(minZoom);

}

}

/**

setMaxZoom(maxZoom) {

if (this.map) {

this.mapOptions.maxZoom = maxZoom;

(maxZoom || maxZoom === 0) && this.map.setMaxZoom(maxZoom);

}

}

/**

setWebMapOptions(webMapOptions) {

this.setServerUrl(webMapOptions.server);

this._initWebMap();

}

/**

setMapOptions(mapOptions) {

let { center, zoom, maxBounds, minZoom, maxZoom, isWorldCopy, bearing, pitch } = mapOptions;

center && center.length && this.setCenter(center);

zoom && this.setZoom(zoom);

maxBounds && this.setMaxBounds(maxBounds);

minZoom && this.setMinZoom(minZoom);

maxZoom && this.setMaxZoom(maxZoom);

isWorldCopy && this.setRenderWorldCopies(isWorldCopy);

bearing && this.setBearing(bearing);

pitch && this.setPitch(pitch);

}

/**

getPopupInfos() {

return this._handler._getPopupInfos() || [];

}

/**

getLayers() {

return (this._handler && this._handler.getLayers()) || [];

}

/**

getLegends() {

return (this._handler && this._handler.getLegends()) || [];

}

/**

getLayerCatalog() {

return (this._handler && this._handler.getLayerCatalog()) || [];

}

setLayersVisible() {

this._handler && this._handler.setLayersVisible(...arguments);

}

/**

toggleLayerVisible() {

this._handler && this._handler.toggleLayerVisible(...arguments);

}

/**

getWebMapType() {

return this.type;

}

/**

rectifyLayersOrder() {

this._handler && this._handler.rectifyLayersOrder(...arguments);

}

/**

updateOverlayLayer() {

this._handler && this._handler.updateOverlayLayer(...arguments);

}

/**

copyLayer() {

return this._handler && this._handler.copyLayer(...arguments);

}

/**

clean(removeMap = true) {

if (this.map) {

removeMap && this._fire('mapbeforeremove', { map: this.map });

if (this._handler) {

this._handler.clean(removeMap);

this._handler = null;

}

removeMap && (this.map = null);

if (this.mapOptions && (this.mapId || this.webMapInfo)) {

this.mapOptions.center = null;

this.mapOptions.zoom = null;

}

}

}

/**

cleanLayers() {

// 清空追加的地图图层以及对应的事件

if (!this.map) {

return;

}

const layersToClean = this._cacheCleanLayers.filter((item) => !item.reused);

this._handler && this._handler.cleanLayers(layersToClean);

this._cacheCleanLayers = [];

this.clean(false);

}

/**

changeBaseLayer() {

return this._handler && this._handler.changeBaseLayer(...arguments);

}

_readyForInitializingWebMap() {

this._initWebMap(!this.map);

}

_initWebMap(clean = true) {

clean && this.clean();

if (this.webMapInfo) {

// 传入是webmap对象

const mapInfo = this.webMapInfo;

mapInfo.mapParams = {

title: this.webMapInfo.title,

description: this.webMapInfo.description

};

this.mapParams = mapInfo.mapParams;

Promise.resolve()

.then(() => {

this._getMapInfo(mapInfo);

})

.catch((error) => {

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

});

return;

} else if (!this.mapId || !this.options.serverUrl) {

Promise.resolve()

.then(() => {

this._createMap('MapStyle');

})

.catch((error) => {

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

});

return;

}

this._taskID = new Date();

this.getMapInfo(this._taskID);

}

setZoom(zoom) {

if (this.map) {

this.mapOptions.zoom = zoom;

if (zoom !== +this.map.getZoom().toFixed(2)) {

(zoom || zoom === 0) && this.map.setZoom(zoom, { from: 'setZoom' });

}

}

}

setServerUrl(serverUrl) {

this._setServer(serverUrl);

this.webMapService.setServerUrl(this.options.serverUrl);

}

setWithCredentials(withCredentials) {

this.options.withCredentials = withCredentials;

this.webMapService.setWithCredentials(withCredentials);

}

setProxy(proxy) {

this.options.proxy = proxy;

this.webMapService.setProxy(proxy);

}

setMapId(mapId, preserveMap = false) {

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

this.mapId = mapId;

this.webMapInfo = null;

} else if (mapId !== null && typeof mapId === 'object') {

this.webMapInfo = mapId;

this.mapId = '';

}

this.webMapService.setMapId(mapId);

if (!mapId) {

return;

}

setTimeout(() => {

this._initWebMap(!preserveMap);

}, 0);

}

getMapInfo(_taskID) {

this.webMapService

.getMapInfo()

.then(

(mapInfo) => {

if (this._taskID !== _taskID) {

return;

}

// 存储地图的名称以及描述等信息，返回给用户

this.mapParams = mapInfo.mapParams;

this._getMapInfo(mapInfo);

},

(error) => {

throw error;

}

)

.catch((error) => {

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

console.log(error);

});

}

/**

_createWebMapFactory() {

throw new Error('_createWebMapFactory is not implemented');

}

_mapInitializedHandler({ map }) {

this.map = map;

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

}

_mapCreateSucceededHandler(params) {

this.mapParams = params.mapparams;

this._cacheCleanLayers = params.layers;

this._fire('mapcreatesucceeded', params);

}

_addLayerChangedHandler(params) {

this._cacheCleanLayers = params.layers;

this.fire('layeraddchanged', params);

}

_isWebMapV3(styleInfo) {

if (!styleInfo.version) {

return false;

}

const subVersions = `${styleInfo.version}`.split('.')

if (subVersions.length <= 1) {

return false;

}

return +subVersions[0] >= 3;

}

_getMapInfo(mapInfo) {

const type = this._isWebMapV3(mapInfo) ? 'WebMap3' : 'WebMap2';

this._createMap(type, mapInfo);

}

_createMap(type, mapInfo) {

const commonOptions = {

...this.options,

iportalServiceProxyUrlPrefix: this.webMapService.iportalServiceProxyUrl

};

const commonEvents = {

...this.eventTypes.reduce((events, name) => {

events[name] = (params) => {

this._fire(name, params);

};

return events;

}, {}),

mapinitialized: this._mapInitializedHandler,

mapcreatesucceeded: this._mapCreateSucceededHandler,

layeraddchanged: this._addLayerChangedHandler

};

const mapOptions = cloneDeep(this.mapOptions);

/**

const WebMapFactory = this._createWebMapFactory(type);

const mapId = this.mapId || this.webMapInfo;

this._handler = new WebMapFactory(mapId, commonOptions, mapOptions);

for (const type in commonEvents) {

this._handler.on(type, commonEvents[type]);

}

let _mapInfo = {};

const layerFilter = this.options.layerFilter;

if (mapInfo) {

_mapInfo = {

...mapInfo,

layers: typeof layerFilter === 'function' ? mapInfo.layers.filter(layerFilter) : mapInfo.layers

};

}

this.type = type;

// initializeMap 完成3个步骤：1. 注册投影 2. 判断投影与存在的map是否一致 3. 创建地图

this._handler.initializeMap(_mapInfo, this.map);

}

_updateRasterSource(sourceId, options) {

if (!sourceId) {

return;

}

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

Object.assign(source, options);

this.map.style.sourceCaches[sourceId].clearTiles();

this.map.style.sourceCaches[sourceId].update(this.map.transform);

this.map.triggerRepaint();

}

_getResizedZoom(bounds, mapContainerStyle, tileSize = 512, worldWidth = WORLD_WIDTH) {

const { width, height } = mapContainerStyle;

const lngArcLength = Math.abs(bounds.getEast() - bounds.getWest());

const latArcLength = Math.abs(

this._getBoundsRadian(bounds.getSouth()) - this._getBoundsRadian(bounds.getNorth())

);

const lngResizeZoom = +Math.log2(worldWidth / ((lngArcLength / parseInt(width)) * tileSize)).toFixed(2);

const latResizeZoom = +Math.log2(worldWidth / ((latArcLength / parseInt(height)) * tileSize)).toFixed(2);

if (lngResizeZoom <= latResizeZoom) {

return lngResizeZoom;

}

return latResizeZoom;

}

_getBoundsRadian(point) {

return (180 / Math.PI) * Math.log(Math.tan(Math.PI / 4 + (point * Math.PI) / 360));

}

_centerValid(center) {

if (center && (center.length > 0 || typeof center === mapRepo.LngLat || center.lng)) {

return true;

}

return false;

}

_getWebMapInstance() {

return this._handler;

}

_setServer(url) {

this.options.server = transformServerUrl(url);

this.options.serverUrl = this.options.server;

}

_fire(type, params) {

const compatibleTypesList = [

['mapcreatesucceeded', 'addlayerssucceeded'],

['mapcreatefailed', 'getmapfailed'],

['layercreatefailed', 'getlayersfailed']

];

const matchTypes = compatibleTypesList.find((list) => list.includes(type));

const emitTypes = matchTypes || [type];

emitTypes.forEach((item) => {

this.fire(item, params);

});

}

};