constructor(id, options) {

super();

this.mapId = id;

options = options || {};

this.server = options.server;

this.credentialKey = options.credentialKey;

this.credentialValue = options.credentialValue;

this.withCredentials = options.withCredentials || false;

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

this._canvgsV = [];

this._createWebMap();

this.on('mapinitialized', () => {

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

this._stopCanvg();

});

});

}

/**

resize() {

this.map.resize();

}

/**

setMapId(mapId) {

this.mapId = mapId;

this._createWebMap();

}

/**

setWebMapOptions(webMapOptions) {

this.server = webMapOptions.server;

this._createWebMap();

}

/**

setMapOptions(mapOptions) {

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

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

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

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

minZoom && this.map.setMinZoom(minZoom);

maxZoom && this.map.setMaxZoom(maxZoom);

isWorldCopy && this.map.setRenderWorldCopies(isWorldCopy);

bearing && this.map.setBearing(bearing);

pitch && this.map.setPitch(pitch);

}

/**

_createWebMap() {

let urlArr = this.server.split('');

if (urlArr[urlArr.length - 1] !== '/') {

this.server += '/';

}

let mapUrl = this.server + 'web/maps/' + this.mapId + '/map';

if (this.credentialValue && this.credentialKey) {

mapUrl += '?' + this.credentialKey + '=' + this.credentialValue;

}

let filter = 'getUrlResource.json?url=';

if (this.excludePortalProxyUrl && this.server.indexOf(filter) > -1) {

//大屏需求,或者有加上代理的

let urlArray = this.server.split(filter);

if (urlArray.length > 1) {

mapUrl = urlArray[0] + filter + this.server + 'web/maps/' + this.mapId + '/map.json';

}

}

this._getMapInfo(mapUrl);

}

/**

_createMap(mapInfo) {

// 获取字体样式

let fonts = [];

let layers = mapInfo.layers;

// 获取 label 图层字体类型

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

layers.forEach(layer => {

layer.labelStyle && fonts.push(layer.labelStyle.fontFamily);

}, this);

}

fonts.push("'supermapol-icons'");

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

// zoom center

let oldcenter = mapInfo.center,

zoom = mapInfo.level || 0,

center,

zoomBase = 0;

// zoom = zoom === 0 ? 0 : zoom - 1;

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

zoomBase = this._transformScaleToZoom(mapInfo.minScale, mapboxgl.CRS ? mapboxgl.CRS.get(this.baseProjection):'EPSG:3857');

} else {

const e =

this._getResolution(

mapboxgl.CRS

? mapboxgl.CRS.get(this.baseProjection).getExtent()

: [-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892]

) / this._getResolution(mapInfo.extent);

zoomBase = +Math.log(e) / Math.LN2.toFixed(2);

}

zoom += zoomBase;

center = oldcenter ? this._unproject([oldcenter.x, oldcenter.y]) : new mapboxgl.LngLat(0, 0);

// 初始化 map

this.map = new mapboxgl.Map({

container: this.target,

center: center,

zoom: zoom,

style: {

version: 8,

sources: {},

// "glyphs": 'https://iclient.supermap.io/iserver/services/map-beijing/rest/maps/beijingMap/tileFeature/sdffonts/{fontstack}/{range}.pbf',

layers: []

},

crs: this.baseProjection,

localIdeographFontFamily: fontFamilys || ''

});

this.fire('mapinitialized');

}

/**

_getMapInfo(url) {

let mapUrl = url.indexOf('.json') === -1 ? `${url}.json` : url;

FetchRequest.get(mapUrl, null, { withCredentials: this.withCredentials })

.then(response => {

return response.json();

})

.then(mapInfo => {

this.baseProjection = mapInfo.projection;

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

this.mapParams = {

title: mapInfo.title,

description: mapInfo.description

};

const projectionMap = {

'EPSG:4490': 'EPSG:4490',

'EPSG:4214': 'EPSG:4214',

'EPSG:4610': 'EPSG:4610',

'EPSG:3857': 'EPSG:3857',

'EPSG:4326': 'EPSG:4326'

}; // 坐标系异常处理

if (this.baseProjection in projectionMap) {

this._createMap(mapInfo, this.mapSetting);

let layers = mapInfo.layers;

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

this._addBaseMap(mapInfo);

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

this._sendMapToUser(0, 0);

} else {

this._addLayers(layers);

}

});

} else {

throw Error(Lang.i18n('msg_crsunsupport'));

}

})

.catch(error => {

/**

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

});

}

/**

_addBaseMap(mapInfo) {

this._createBaseLayer(mapInfo);

}

/**

_createBaseLayer(mapInfo) {

let layerInfo = mapInfo.baseLayer || mapInfo;

let layerType = layerInfo.layerType; //底图和rest地图兼容

if (

layerType.indexOf('TIANDITU_VEC') > -1 ||

layerType.indexOf('TIANDITU_IMG') > -1 ||

layerType.indexOf('TIANDITU_TER') > -1

) {

layerType = layerType.substr(0, 12);

}

let mapUrls = {

CLOUD: 'http://t2.dituhui.com/FileService/image?map=quanguo&type=web&x={x}&y={y}&z={z}',

CLOUD_BLACK: 'http://t3.dituhui.com/MapService/getGdp?x={x}&y={y}&z={z}',

OSM: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',

GOOGLE:

'https://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0',

GOOGLE_CN: 'https://mt{0-3}.google.cn/vt/lyrs=m&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}',

JAPAN_STD: 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',

JAPAN_PALE: 'https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',

JAPAN_RELIEF: 'https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png',

JAPAN_ORT: 'https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg'

},

url;

switch (layerType) {

case 'TIANDITU_VEC':

case 'TIANDITU_IMG':

case 'TIANDITU_TER':

this._createTiandituLayer(mapInfo);

break;

case 'BING':

this._createBingLayer(layerInfo.name);

break;

case 'WMS':

this._createWMSLayer(layerInfo);

break;

case 'WMTS':

this._createWMTSLayer(layerInfo);

break;

case 'TILE':

case 'SUPERMAP_REST':

this._createDynamicTiledLayer(layerInfo);

break;

case 'ZXY_TILE':

this._createZXYLayer(layerInfo);

break;

case 'CLOUD':

case 'CLOUD_BLACK':

case 'OSM':

case 'JAPAN_ORT':

case 'JAPAN_RELIEF':

case 'JAPAN_PALE':

case 'JAPAN_STD':

case 'GOOGLE_CN':

case 'GOOGLE':

url = mapUrls[layerType];

this._createXYZLayer(layerInfo, url);

break;

case 'MAPBOXSTYLE':

this._createMapboxStyle(layerInfo);

break;

default:

break;

}

}

/**

_createMapboxStyle(mapInfo) {

let _this = this,

{ dataSource = {} } = mapInfo,

{ serverId, url } = dataSource,

styleUrl;

styleUrl = serverId !== undefined ? `${this.server}web/datas/${serverId}/download` : url;

FetchRequest.get(styleUrl, null, {

withCredentials: this.withCredentials,

withoutFormatSuffix: true,

headers: {

'Content-Type': 'application/json;chartset=uft-8'

}

}).then(response => {

return response.json();

}).then(style => {

_this._matchStyleObject(style);

_this.map.setStyle(style);

})

}

/**

_matchStyleObject(style) {

let { sprite, glyphs } = style;

if (sprite && typeof sprite === 'object'){

style.sprite = Object.values(sprite)[0];

}

if (glyphs && typeof glyphs === 'object'){

style.glyphs = Object.values(glyphs)[0];

}

}

/**

_createTiandituLayer(mapInfo) {

let tiandituUrls = this._getTiandituUrl(mapInfo);

let layerType = mapInfo.baseLayer.layerType;

let isLabel = Boolean(mapInfo.baseLayer.labelLayerVisible);

let labelUrl = tiandituUrls['labelUrl'];

let tiandituUrl = tiandituUrls['tiandituUrl'];

this._addBaselayer(tiandituUrl, 'tianditu-layers-' + layerType);

isLabel && this._addBaselayer(labelUrl, 'tianditu-label-layers-' + layerType);

}

/**

_createWMTSLayer(layerInfo) {

let wmtsUrl = this._getWMTSUrl(layerInfo);

this._filterWMTSIsMatched(layerInfo, (isMatched, matchMaxZoom) => {

isMatched && this._addBaselayer([wmtsUrl], 'wmts-layers' + layerInfo.name, 0, matchMaxZoom);

});

}

/**

_filterWMTSIsMatched(mapInfo, matchedCallback) {

let isMatched = false,

matchMaxZoom = 22,

url = mapInfo.url;

let options = {

withCredentials: false,

withoutFormatSuffix: true

};

FetchRequest.get(url, null, options)

.then(response => {

return response.text();

})

.then(capabilitiesText => {

const parser = new XMLParser({numberParseOptions:{hex : false, leadingZeros: false,eNotation: false},alwaysCreateTextNode: true, textNodeName: "_text"});

let tileMatrixSet = parser.parse(capabilitiesText)

.Capabilities.Contents.TileMatrixSet;

if (!Array.isArray(tileMatrixSet)) {

tileMatrixSet = [tileMatrixSet];

}

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

if (

tileMatrixSet[i]['ows:Identifier'] &&

(tileMatrixSet[i]['ows:Identifier']['_text'] + '') === mapInfo.tileMatrixSet

) {

if (DEFAULT_WELLKNOWNSCALESET.indexOf(tileMatrixSet[i]['WellKnownScaleSet']['_text']) > -1) {

isMatched = true;

} else if (

tileMatrixSet[i]['WellKnownScaleSet'] &&

tileMatrixSet[i]['WellKnownScaleSet']['_text'] === 'Custom'

) {

let matchedScaleDenominator = [];

//坐标系判断

let defaultCRSScaleDenominators =

this.map.crs === 'EPSG:3857' ? MB_SCALEDENOMINATOR_3857 : MB_SCALEDENOMINATOR_4326;

for (let j = 0, len = defaultCRSScaleDenominators.length; j < len; j++) {

if (!tileMatrixSet[i].TileMatrix[j]) {

break;

}

if (

defaultCRSScaleDenominators[j] !==

(tileMatrixSet[i].TileMatrix[j]['ScaleDenominator']['_text'] + '')

) {

break;

}

matchedScaleDenominator.push(defaultCRSScaleDenominators[j]);

}

matchMaxZoom = matchedScaleDenominator.length - 1;

if (matchedScaleDenominator.length !== 0) {

isMatched = true;

} else {

throw Error(Lang.i18n('msg_tilematrixsetunsupport'));

}

} else {

throw Error(Lang.i18n('msg_tilematrixsetunsupport'));

}

}

}

matchedCallback(isMatched, matchMaxZoom);

})

.catch(error => {

/**

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

});

}

/**

_createBingLayer(layerName) {

let bingUrl =

'https://dynamic.t0.tiles.ditu.live.com/comp/ch/{quadkey}?it=G,TW,L,LA&mkt=zh-cn&og=109&cstl=w4c&ur=CN&n=z';

this.addLayer([bingUrl], 'bing-layers-' + layerName);

}

/**

_createXYZLayer(layerInfo, url) {

let urlArr = [];

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

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

let start = res[0];

let end = res[2];

let alphabet = '';

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

alphabet += String.fromCharCode(i);

}

let alphabetArr = alphabet.split('');

let startIndex = alphabetArr.indexOf(start);

let endIndex = alphabetArr.indexOf(end);

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

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

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

urlArr.push(replaceRes);

}

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

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

let start = res[0];

let end = res[2];

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

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

urlArr.push(replaceRes);

}

} else {

urlArr = [url];

}

this._addBaselayer(urlArr, 'XYZ-layers-' + layerInfo.name);

}

_createZXYLayer(layerInfo) {

const { url, subdomains, layerID, name, visible } = layerInfo;

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

const layerId = layerID || name;

this._addBaselayer(urls, layerId, undefined, undefined, false, visible);

}

/**

_createDynamicTiledLayer(layerInfo) {

let url = layerInfo.url;

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

const { minzoom, maxzoom } = layerInfo;

this._addBaselayer([url], layerId, minzoom, maxzoom, true);

}

/**

_createWMSLayer(layerInfo) {

let WMSUrl = this._getWMSUrl(layerInfo);

this._addBaselayer([WMSUrl], 'WMS-layers-' + layerInfo.name);

}

/**

_createVectorLayer(layerInfo, features) {

let style = layerInfo.style;

let type = layerInfo.featureType;

let layerID = layerInfo.layerID;

let visible = layerInfo.visible;

let layerStyle = {};

layerStyle.style = this._transformStyleToMapBoxGl(style, type);

layerStyle.layout = { visibility: visible };

let source = {

type: 'geojson',

data: {

type: 'FeatureCollection',

features: features

}

};

this._addOverlayToMap(type, source, layerID, layerStyle);

// 如果面有边框

type === 'POLYGON' &&

style.strokeColor &&

this._addStrokeLineForPoly(style, source, layerID + '-strokeLine', visible);

}

/**

_getTiandituUrl(mapInfo) {

let re = /t0/gi;

let tiandituUrls = {};

let layerType = mapInfo.baseLayer.layerType.split('_')[1].toLowerCase();

let isLabel = Boolean(mapInfo.baseLayer.labelLayerVisible);

// let isLabel = true;

let url = 'https://t0.tianditu.gov.cn/{layer}_{proj}/wmts?';

let labelUrl = url;

let layerLabelMap = {

vec: 'cva',

ter: 'cta',

img: 'cia'

};

let tilematrixSet = this.baseProjection === 'EPSG:4326' ? 'c' : 'w';

let options = {

service: 'WMTS',

request: 'GetTile',

style: 'default',

version: '1.0.0',

layer: layerType,

tilematrixSet: tilematrixSet,

format: 'tiles',

width: 256,

height: 256

};

url += this._getParamString(options, url) + '&tilematrix={z}&tilerow={y}&tilecol={x}';

let tiandituUrl = url.replace('{layer}', layerType).replace('{proj}', tilematrixSet);

let tiandituUrlArr = [];

for (let i = 0; i < 8; i++) {

tiandituUrlArr.push(tiandituUrl.replace(re, `t${i}`));

}

tiandituUrls['tiandituUrl'] = tiandituUrlArr;

// 如果有 label 图层

if (isLabel) {

let labelLayer = layerLabelMap[layerType];

options.layer = labelLayer;

labelUrl += this._getParamString(options, labelUrl) + '&tilematrix={z}&tilerow={y}&tilecol={x}';

labelUrl = labelUrl.replace('{layer}', labelLayer).replace('{proj}', tilematrixSet);

let labelUrlArr = [];

for (let i = 0; i < 8; i++) {

labelUrlArr.push(labelUrl.replace(re, `t${i}`));

}

tiandituUrls['labelUrl'] = labelUrlArr;

}

return tiandituUrls;

}

/**

_getWMSUrl(mapInfo) {

let url = mapInfo.url;

url = url.split('?')[0];

let strArr = url.split('/');

let options = {

service: 'WMS',

request: 'GetMap',

layers: strArr[strArr.length - 1],

styles: '',

format: 'image/png',

transparent: 'true',

version: '1.1.1',

width: 256,

height: 256,

srs: this.baseProjection

};

let bbox = this.baseProjection === 'EPSG:4326' ? '{bbox-epsg-4326}' : '{bbox-epsg-3857}';

url += this._getParamString(options, url) + `&bbox=${bbox}`;

return url;

}

/**

_addLayers(layers) {

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

this.layers = layers;

let features,

layerAdded = 0,

len = layers.length;

layers.forEach((layer, index) => {

if ((layer.dataSource && layer.dataSource.serverId) || layer.layerType === 'MARKER') {

// 获取 serverID

let serverId = layer.dataSource ? layer.dataSource.serverId : layer.serverId;

let url = `${this.server}web/datas/${serverId}/content.json?pageSize=9999999&currentPage=1`;

// 获取图层数据

serverId &&

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

.then(response => {

return response.json();

})

.then(data => {

if (data.succeed === false) {

//请求失败

layerAdded++;

this._sendMapToUser(layerAdded, len);

/**

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

return;

}

if (data.type) {

if (data.type === 'JSON' || data.type === 'GEOJSON') {

data.content = JSON.parse(data.content.trim());

features = this._formatGeoJSON(data.content, layer);

} else if (data.type === 'EXCEL' || data.type === 'CSV') {

features = this._excelData2Feature(data.content, layer);

}

this._addLayer(layer, features, index);

layerAdded++;

this._sendMapToUser(layerAdded, len);

}

})

.catch(error => {

layerAdded++;

this._sendMapToUser(layerAdded, len);

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

});

} else if (

layer.layerType === 'ZXY_TILE' ||

layer.layerType === 'SUPERMAP_REST' ||

layer.layerType === 'TILE' ||

layer.layerType === 'WMS' ||

layer.layerType === 'WMTS'

) {

this._createBaseLayer(layer);

layerAdded++;

this._sendMapToUser(layerAdded, len);

} else if (layer.dataSource && layer.dataSource.type === 'REST_DATA') {

let dataSource = layer.dataSource;

//从restData获取数据

this._getFeatureBySQL(

dataSource.url,

[dataSource.dataSourseName || layer.name],

result => {

features = this._parseGeoJsonData2Feature({

allDatas: { features: result.result.features.features },

fileCode: layer.projection,

featureProjection: this.baseProjection

});

this._addLayer(layer, features, index);

layerAdded++;

this._sendMapToUser(layerAdded, len);

},

err => {

layerAdded++;

this._sendMapToUser(layerAdded, len);

/**

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

}

);

} else if (layer.dataSource && layer.dataSource.type === 'REST_MAP' && layer.dataSource.url) {

this._queryFeatureBySQL(

layer.dataSource.url,

layer.dataSource.layerName,

'smid=1',

null,

null,

result => {

let recordsets = result && result.result.recordsets;

let recordset = recordsets && recordsets[0];

let attributes = recordset.fields;

if (recordset && attributes) {

let fileterAttrs = [];

for (let i in attributes) {

let value = attributes[i];

if (value.indexOf('Sm') !== 0 || value === 'SmID') {

fileterAttrs.push(value);

}

}

this._getFeatures(

fileterAttrs,

layer,

features => {

this._addLayer(layer, features, index);

layerAdded++;

this._sendMapToUser(layerAdded, len);

},

err => {

layerAdded++;

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