diff --git a/src/common/mapping/MapStyle.js b/src/common/mapping/MapStyle.js
index 6446f273e..9b9bceb83 100644
--- a/src/common/mapping/MapStyle.js
+++ b/src/common/mapping/MapStyle.js
@@ -2,7 +2,7 @@ import { WebMapService } from './WebMapService';
import { SourceListModelV2 } from './utils/SourceListModelV2';
import { createAppreciableLayerId, isSameRasterLayer } from './utils/util';
-export function createMapStyleExtending(SuperClass, { MapManager, mapRepo }) {
+export function createMapStyleExtending(SuperClass, { MapManager, crsManager }) {
return class MapStyle extends SuperClass {
constructor(id, options = {}, mapOptions = {}) {
super();
@@ -11,24 +11,22 @@ export function createMapStyleExtending(SuperClass, { MapManager, mapRepo }) {
this.webMapService = new WebMapService(id, options);
this._layerIdRenameMapList = [];
this._appendLayers = false;
+ this._baseProjection = '';
}
initializeMap(_, map) {
+ this._baseProjection = this._registerMapCRS(this.mapOptions);
if (map) {
+ if (!crsManager.isSameProjection(map, this._baseProjection)) {
+ this.fire('projectionnotmatch');
+ return;
+ }
this._appendLayers = true;
this.map = map;
this._addLayersToMap();
return;
}
this.mapOptions.container = this.options.target;
- if (typeof this.mapOptions.crs === 'object' && this.mapOptions.crs.epsgCode) {
- this.mapOptions.crs = new mapRepo.CRS(
- this.mapOptions.crs.epsgCode,
- this.mapOptions.crs.WKT,
- this.mapOptions.crs.extent,
- this.mapOptions.crs.unit
- );
- }
if (!this.mapOptions.transformRequest) {
this.mapOptions.transformRequest = (url, resourceType) => {
let proxy = '';
@@ -53,7 +51,7 @@ export function createMapStyleExtending(SuperClass, { MapManager, mapRepo }) {
if (Object.prototype.hasOwnProperty.call(this.mapOptions, 'fadeDuration')) {
fadeDuration = this.mapOptions.fadeDuration;
}
- this.map = new MapManager({ ...this.mapOptions, fadeDuration });
+ this.map = new MapManager({ ...this.mapOptions, fadeDuration, crs: this._baseProjection });
this.fire('mapinitialized', { map: this.map });
this.map.on('load', () => {
this._sendMapToUser();
@@ -71,6 +69,17 @@ export function createMapStyleExtending(SuperClass, { MapManager, mapRepo }) {
}
}
+ _registerMapCRS(mapOptions) {
+ const { crs } = mapOptions;
+ let epsgCode = crs;
+ if (typeof crs === 'object' && crs.epsgCode) {
+ const { epsgCode: name, WKT: wkt, extent, unit } = crs;
+ crsManager.registerCRS({ name, wkt, extent, unit });
+ epsgCode = name;
+ }
+ return epsgCode;
+ }
+
_addLayersToMap() {
const { sources, layers, layerIdMapList } = this._setUniqueId(this.mapOptions.style);
layers.forEach((layer) => {
diff --git a/src/common/mapping/WebMapBase.js b/src/common/mapping/WebMapBase.js
index 2a202c90e..7268c2682 100644
--- a/src/common/mapping/WebMapBase.js
+++ b/src/common/mapping/WebMapBase.js
@@ -172,7 +172,6 @@ export function createWebMapBaseExtending(SuperClass, { mapRepo }) {
this._mapInitializedHandler = this._mapInitializedHandler.bind(this);
this._mapCreateSucceededHandler = this._mapCreateSucceededHandler.bind(this);
this._addLayerChangedHandler = this._addLayerChangedHandler.bind(this);
- this._initWebMap(!this.map);
}
/**
@@ -193,33 +192,6 @@ export function createWebMapBaseExtending(SuperClass, { mapRepo }) {
}
}
- /**
- * @function WebMapBase.prototype.setCRS
- * @description 更新地图投影。
- * @param {string|Object} crs - 地图 crs。
- */
- setCRS(crs) {
- if (this.map) {
- this.mapOptions.crs = crs;
- if (this.mapOptions.crs) {
- if (this.map.getCRS(typeof crs === 'string' ? crs : crs.epsgCode)) {
- return;
- }
- if (crs.epsgCode) {
- this.mapOptions.crs = new mapRepo.CRS(
- this.mapOptions.crs.epsgCode,
- this.mapOptions.crs.WKT,
- this.mapOptions.crs.extent,
- this.mapOptions.crs.unit
- );
- this.map.setCRS(this.mapOptions.crs);
- } else {
- this.map.setCRS(mapRepo.CRS.get(crs));
- }
- }
- }
- }
-
/**
* @function WebMapBase.prototype.setCenter
* @description 更新地图中心点。
@@ -500,6 +472,10 @@ export function createWebMapBaseExtending(SuperClass, { mapRepo }) {
this.clean(false);
}
+ _readyForInitializingWebMap() {
+ this._initWebMap(!this.map);
+ }
+
_initWebMap(clean = true) {
clean && this.clean();
if (this.webMapInfo) {
@@ -660,6 +636,7 @@ export function createWebMapBaseExtending(SuperClass, { mapRepo }) {
};
}
this.type = type;
+ // initializeMap 完成3个步骤：1. 注册投影 2. 判断投影与存在的map是否一致 3. 创建地图
this._handler.initializeMap(_mapInfo, this.map);
}
diff --git a/src/common/mapping/WebMapV2.js b/src/common/mapping/WebMapV2.js
index 247fa58c6..6711f3587 100644
--- a/src/common/mapping/WebMapV2.js
+++ b/src/common/mapping/WebMapV2.js
@@ -2,7 +2,7 @@
* This program are made available under the terms of the Apache License, Version 2.0
* which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html. */
import cloneDeep from 'lodash.clonedeep';
-import { getProjection, registerProjection, toEpsgCode, transformCoodinates } from './utils/epsg-define';
+import { getProjection, toEpsgCode, transformCoodinates } from './utils/epsg-define';
import { ColorsPickerUtil } from '../util/ColorsPickerUtil';
import { Util } from '../commontypes/Util';
import { ArrayStatistic } from '../util/ArrayStatistic';
@@ -17,7 +17,7 @@ const INTERNET_MAP_BOUNDS = {
BING: [-180, -90, 180, 90]
}
-export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo, DataFlowService, GraticuleLayer }) {
+export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo, crsManager, DataFlowService, GraticuleLayer }) {
return class WebMapV2 extends SuperClass {
constructor(
id,
@@ -49,12 +49,23 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo, DataF
this._appendLayers = false;
}
- initializeMap(mapInfo, map) {
- if (map) {
- this._appendLayers = true;
- this.map = map;
+ 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 });
}
- this._getMapInfo(mapInfo, this._taskID);
}
cleanLayers(layers) {
@@ -95,12 +106,10 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo, DataF
_initWebMap() {}
+ _getMapInfo() {}
+
_loadLayers(mapInfo, _taskID) {
if (this.map) {
- if (this.map.getCRS().epsgCode !== this.baseProjection && !this.ignoreBaseProjection) {
- this.fire('projectionnotmatch', {});
- return;
- }
this._handleLayerInfo(mapInfo, _taskID);
} else {
setTimeout(() => {
@@ -112,95 +121,59 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo, DataF
}
}
- _setCRS(baseProjection, wkt, bounds) {
- if (mapRepo.CRS.get(baseProjection)) {
- return;
- }
- const crs = new mapRepo.CRS(baseProjection, wkt, bounds, bounds[2] > 180 ? 'meter' : 'degree');
- mapRepo.CRS.set(crs);
- }
-
- _getMapInfo(mapInfo, _taskID) {
- this._mapInfo = mapInfo;
- const { projection } = mapInfo;
- let bounds, wkt;
- this.baseProjection = toEpsgCode(projection);
- let defaultWktValue = getProjection(this.baseProjection, this.specifiedProj4);
-
- if (defaultWktValue) {
- wkt = defaultWktValue;
- }
- if (!mapRepo.CRS.get(this.baseProjection)) {
- if (mapInfo.baseLayer && mapInfo.baseLayer.layerType === 'MAPBOXSTYLE') {
- let url = mapInfo.baseLayer.dataSource.url;
- if (url.indexOf('/restjsr/') > -1 && !/\/style\.json$/.test(url)) {
- url += '/style.json';
- }
- this.webMapService.getMapBoxStyle(url).then((res) => {
+ 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)) {
+ 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) {
- bounds = res.metadata.indexbounds;
- } else {
- bounds = [
- mapInfo.extent.leftBottom.x,
- mapInfo.extent.leftBottom.y,
- mapInfo.extent.rightTop.x,
- mapInfo.extent.rightTop.y
- ];
+ crs.extent = res.metadata.indexbounds;
}
- this._defineProj4(projection);
- this._setCRS(this.baseProjection, wkt, bounds);
- this._loadLayers(mapInfo, _taskID);
- });
- } else if (mapInfo.baseLayer && mapInfo.baseLayer.layerType === 'TILE') {
- // 获取地图的wkt
- this.getEpsgCodeWKT(`${mapInfo.baseLayer.url}/prjCoordSys.wkt`, {
- withoutFormatSuffix: true,
- withCredentials: this.webMapService.handleWithCredentials('', mapInfo.baseLayer.url, false)
- }).then((res) => {
- if (!wkt) {
- wkt = res;
+ 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)
+ });
}
- this.getBounds(`${mapInfo.baseLayer.url}.json`, {
+ const boundsRes = await this.getBounds(`${baseLayer.url}.json`, {
withoutFormatSuffix: true,
- withCredentials: this.webMapService.handleWithCredentials('', mapInfo.baseLayer.url, false)
- }).then((res) => {
- if (res && res.bounds) {
- bounds = [
- res.bounds.leftBottom.x,
- res.bounds.leftBottom.y,
- res.bounds.rightTop.x,
- res.bounds.rightTop.y
- ];
- } else {
- bounds = [
- mapInfo.extent.leftBottom.x,
- mapInfo.extent.leftBottom.y,
- mapInfo.extent.rightTop.x,
- mapInfo.extent.rightTop.y
- ];
- }
- this._defineProj4(wkt, projection);
- this._setCRS(this.baseProjection, wkt, bounds);
- this._loadLayers(mapInfo, _taskID);
+ withCredentials: this.webMapService.handleWithCredentials('', baseLayer.url, false)
});
- });
- } else {
- const error = new Error('Unsupported coordinate system!');
- console.log(error);
- this.fire('mapcreatefailed', { error });
+ 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;
}
- } else {
- wkt = mapRepo.CRS.get(this.baseProjection).WKT
- this._defineProj4(wkt || projection);
- bounds = [
- mapInfo.extent.leftBottom.x,
- mapInfo.extent.leftBottom.y,
- mapInfo.extent.rightTop.x,
- mapInfo.extent.rightTop.y
- ];
- this._setCRS(this.baseProjection, wkt, bounds);
- this._loadLayers(mapInfo, _taskID);
}
+ if (!crs) {
+ throw new Error('Unsupported coordinate system!')
+ }
+ crsManager.registerCRS(crs);
+ return epsgCode;
}
_handleLayerInfo(mapInfo, _taskID) {
@@ -499,7 +472,7 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo, DataF
layerInfo.dataSource &&
layerInfo.dataSource.type !== 'REST_DATA'
) {
- this._unprojectProjection = this._defineProj4(projection);
+ this._unprojectProjection = toEpsgCode(projection);
features = this.transformFeatures(features);
}
@@ -2772,15 +2745,10 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo, DataF
return tiandituUrls;
}
- _defineProj4(projection, defaultEpsgCode) {
+ _getProjectionWKT(projection) {
let epsgCode = toEpsgCode(projection);
const reg = /^EPSG:/;
- const defValue = epsgCode && projection.match(reg) ? getProjection(epsgCode, this.specifiedProj4) : projection;
- if (!epsgCode && defaultEpsgCode && defaultEpsgCode.match(reg)) {
- epsgCode = defaultEpsgCode;
- }
- registerProjection(epsgCode, defValue, this.specifiedProj4);
- return epsgCode;
+ return epsgCode && projection.match(reg) ? getProjection(epsgCode, this.specifiedProj4) : projection;
}
_fetchRequest(url, type, options) {
@@ -2805,7 +2773,7 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo, DataF
getBounds(baseUrl, options) {
if (!baseUrl) {
- return;
+ return Promise.resolve(null);
}
return this._fetchRequest(baseUrl, 'json', options);
}
diff --git a/src/common/mapping/WebMapV3.js b/src/common/mapping/WebMapV3.js
index 951231c87..308f6070d 100644
--- a/src/common/mapping/WebMapV3.js
+++ b/src/common/mapping/WebMapV3.js
@@ -158,7 +158,7 @@ export const LEGEND_STYLE_TYPES = {
IMAGE: 'image',
STYLE: 'style'
};
-export function createWebMapV3Extending(SuperClass, { MapManager, mapRepo, mapRepoName, l7LayerUtil }) {
+export function createWebMapV3Extending(SuperClass, { MapManager, mapRepo, crsManager, l7LayerUtil }) {
return class WebMapV3 extends SuperClass {
constructor(mapId, options, mapOptions = {}) {
super();
@@ -175,13 +175,14 @@ export function createWebMapV3Extending(SuperClass, { MapManager, mapRepo, mapRe
initializeMap(mapInfo, map) {
this._mapInfo = mapInfo;
- const proj = this._setBaseProjection();
- if (!proj) {
- return;
- }
+ this._baseProjection = this._registerMapCRS(mapInfo);
if (map) {
- this._appendLayers = true;
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) {
@@ -323,29 +324,14 @@ export function createWebMapV3Extending(SuperClass, { MapManager, mapRepo, mapRe
});
}
- _setBaseProjection() {
- let crs = this._mapInfo.crs;
- let baseProjection = crs;
+ _registerMapCRS(mapInfo) {
+ const { crs } = mapInfo;
+ let epsgCode = crs;
if (typeof crs === 'object') {
- baseProjection = crs.name;
- if (!mapRepo.CRS) {
- const error = `The EPSG code ${baseProjection} needs to include ${mapRepoName}-enhance.js. Refer to the example: https://iclient.supermap.io/examples/${mapRepoName.replace('-', '')}/editor.html#mvtVectorTile_2362`;
- this.fire('mapcreatefailed', { error: error });
- console.error(error);
- return;
- }
- this._setCRS(crs);
- }
- this._baseProjection = baseProjection;
- return this._baseProjection;
- }
-
- _setCRS({ name, wkt, extent }) {
- if (mapRepo.CRS.get(name)) {
- return;
+ crsManager.registerCRS(crs);
+ epsgCode = crs.name;
}
- const crs = new mapRepo.CRS(name, wkt, extent, extent[2] > 180 ? 'meter' : 'degree');
- mapRepo.CRS.set(crs);
+ return epsgCode;
}
/**
@@ -354,10 +340,6 @@ export function createWebMapV3Extending(SuperClass, { MapManager, mapRepo, mapRe
* @description emit 图层加载成功事件。
*/
async _initLayers() {
- if (this.map.getCRS && this.map.getCRS().epsgCode !== this._baseProjection) {
- this.fire('projectionnotmatch');
- return;
- }
await this._getSpriteDatas();
if (Object.prototype.toString.call(this.mapId) === '[object Object]') {
this.mapParams = {
diff --git a/src/common/mapping/utils/epsg-define.js b/src/common/mapping/utils/epsg-define.js
index 83f6339a9..ede2fa5e2 100644
--- a/src/common/mapping/utils/epsg-define.js
+++ b/src/common/mapping/utils/epsg-define.js
@@ -35,7 +35,7 @@ export function getProjection(epsgKey, proj4 = proj4FromNpm) {
'GEOGCS["China Geodetic Coordinate System 2000", DATUM["China 2000", SPHEROID["CGCS2000", 6378137.0, 298.257222101, AUTHORITY["EPSG","1024"]], AUTHORITY["EPSG","1043"]], PRIMEM["Greenwich", 0.0, AUTHORITY["EPSG","8901"]], UNIT["degree", 0.017453292519943295], AXIS["Geodetic latitude", NORTH], AXIS["Geodetic longitude", EAST], AUTHORITY["EPSG","4490"]]'
};
if (epsgCodes[epsgKey]) {
- registerProjection(epsgKey, epsgCodes[epsgKey]);
+ registerProjection(epsgKey, epsgCodes[epsgKey], proj4);
}
}
return proj4.defs(epsgKey);
diff --git a/src/mapboxgl/mapping/WebMap.js b/src/mapboxgl/mapping/WebMap.js
index 03cb934eb..6fbbda329 100644
--- a/src/mapboxgl/mapping/WebMap.js
+++ b/src/mapboxgl/mapping/WebMap.js
@@ -10,71 +10,118 @@ import { featureFilter, expression } from '@mapbox/mapbox-gl-style-spec';
import spec from '@mapbox/mapbox-gl-style-spec/reference/v8';
import { L7Layer, L7 } from '../overlay/L7Layer';
import MapManager from './webmap/MapManager';
+import { CRSManager } from './webmap/CRSManager';
import { DataFlowService } from '../services/DataFlowService';
import { GraticuleLayer } from '../overlay/GraticuleLayer';
/**
- * @class WebMap
- * @version 9.1.2
- * @extends {WebMapBase}
- * @category iPortal/Online Resources Map
- * @classdesc 对接 iPortal/Online 地图类。
- *
- *
Notice
- *
该功能可能依赖以下插件，请确认引入该插件。
- *
geostats: <script type="text/javascript" src="https://iclient.supermap.io/web/libs/geostats/geostats.js"></script>
- *
jsonsql: <script type="text/javascript" src="https://iclient.supermap.io/web/libs/jsonsql/jsonsql.js"></script>
- *
EchartLayer: <script type="text/javascript" src="https://iclient.supermap.io/web/libs/echartsLayer/EchartsLayer.min.js"></script>
- *
echarts: <script type="text/javascript" src="https://iclient.supermap.io/web/libs/echarts/5.5.0/echarts.min.js"></script>
- *
L7: <script type="text/javascript" src="https://iclient.supermap.io/web/libs/mapboxgl-l7-render/0.0.1/mapboxgl-l7-render.js"></script>
- *
G2: <script type="text/javascript" src="https://iclient.supermap.io/web/libs/antv/g2/4.2.8/g2.min.js"></script>
- *
G6: <script type="text/javascript" src="https://iclient.supermap.io/web/libs/antv/g6/4.3.2/g6.min.js"></script>
- *
fast-xml-parser: <script type="text/javascript" src="https://iclient.supermap.io/web/libs/fast-xml-parser/4.2.7/fxparser.min.js"></script>
- *
mapbox-gl-js-enhance: <script type="text/javascript" src="https://iclient.supermap.io/web/libs/mapbox-gl-js-enhance/1.12.1-7/mapbox-gl-enhance.js"></script>
- *
+ *
Notice
+ *
该功能可能依赖以下插件，请确认引入该插件。
+ *
geostats: <script type="text/javascript" src="https://iclient.supermap.io/web/libs/geostats/geostats.js"></script>
+ *
jsonsql: <script type="text/javascript" src="https://iclient.supermap.io/web/libs/jsonsql/jsonsql.js"></script>
+ *
EchartLayer: <script type="text/javascript" src="https://iclient.supermap.io/web/libs/echartsLayer/EchartsLayer.min.js"></script>
+ *
echarts: <script type="text/javascript" src="https://iclient.supermap.io/web/libs/echarts/5.5.0/echarts.min.js"></script>
+ *
L7: <script type="text/javascript" src="https://iclient.supermap.io/web/libs/mapboxgl-l7-render/0.0.1/mapboxgl-l7-render.js"></script>
+ *
G2: <script type="text/javascript" src="https://iclient.supermap.io/web/libs/antv/g2/4.2.8/g2.min.js"></script>
+ *
G6: <script type="text/javascript" src="https://iclient.supermap.io/web/libs/antv/g6/4.3.2/g6.min.js"></script>
+ *
fast-xml-parser: <script type="text/javascript" src="https://iclient.supermap.io/web/libs/fast-xml-parser/4.2.7/fxparser.min.js"></script>
+ *
mapbox-gl-js-enhance: <script type="text/javascript" src="https://iclient.supermap.io/web/libs/mapbox-gl-js-enhance/1.12.1-7/mapbox-gl-enhance.js"></script>
+ *