Skip to content

Commit

Permalink
【feature】webmap3.0对接多投影 commit by xiongjj review by songym
Browse files Browse the repository at this point in the history
  • Loading branch information
@songyumeng
songyumeng committed Apr 28, 2024
1 parent 7bd6866 commit f77e5cc
Show file tree
Hide file tree
Showing 2 changed files with 159 additions and 13 deletions.
36 changes: 31 additions & 5 deletions src/mapboxgl/mapping/webmap/v3/WebMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ export class WebMap extends mapboxgl.Evented {
this._layerIdRenameMapList = [];
this.excludeSourceNames = ['tdt-search-', 'tdt-route-', 'smmeasure', 'mapbox-gl-draw'];
this._appendLayers = false;
this._baseProjection = '';
}

/**
Expand Down Expand Up @@ -158,6 +159,18 @@ export class WebMap extends mapboxgl.Evented {
maxzoom,
sprite = ''
} = this._mapInfo;
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;
center = this.mapOptions.center || center;
zoom = this.mapOptions.zoom || zoom;
bearing = this.mapOptions.bearing || bearing;
Expand All @@ -166,7 +179,7 @@ export class WebMap extends mapboxgl.Evented {
// 初始化 map
const mapOptions = {
container: this.options.target,
crs,
crs: this._baseProjection,
center,
zoom,
style: {
Expand All @@ -190,13 +203,18 @@ export class WebMap extends mapboxgl.Evented {
});
}

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

/**
* @private
* @function WebMap.prototype._initLayers
* @description emit 图层加载成功事件。
*/
_initLayers() {
if (this.map && this.map.getCRS && this.map.getCRS().epsgCode !== this._mapInfo.crs) {
if (this.map.getCRS && this.map.getCRS().epsgCode !== this._baseProjection) {
this.fire('projectionisnotmatch');
return;
}
Expand Down Expand Up @@ -371,11 +389,19 @@ export class WebMap extends mapboxgl.Evented {
_getLayersOnMap() {
const layersOnMap = this.map.getStyle().layers.map((layer) => this.map.getLayer(layer.id));
const overlayLayers = Object.values(this.map.overlayLayersManager).reduce((layers, overlayLayer) => {
if (overlayLayer.id) {
if (overlayLayer.id && !layers.some(item => item.id === overlayLayer.id)) {
let visibility = overlayLayer.visibility;
if (!visibility && 'visible' in overlayLayer) {
visibility = overlayLayer.visible ? 'visible' : 'none';
}
let source = overlayLayer.source || overlayLayer.sourceId;
if (typeof source === 'object') {
source = overlayLayer.id;
}
layers.push({
id: overlayLayer.id,
visibility: overlayLayer.visibility || 'visible',
source: typeof overlayLayer.source === 'object' ? overlayLayer.id : overlayLayer.source,
visibility,
source,
type: overlayLayer.type
});
}
Expand Down
136 changes: 128 additions & 8 deletions test/mapboxgl/mapping/WebMapV3Spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import mapboxgl from 'mapbox-gl';
import { WebMap } from '../../../src/mapboxgl/mapping/WebMap';
import { WebMap as WebMapV3 } from '../../../src/mapboxgl/mapping/webmap/v3/WebMap';
import '../../resources/WebMapV3.js';
Expand All @@ -22,9 +23,9 @@ describe('mapboxgl-webmap3.0', () => {
});
afterEach(() => {
if (mapstudioWebmap && mapstudioWebmap.map) {
const webMapV3 = mapstudioWebmap._getWebMapInstance ? mapstudioWebmap._getWebMapInstance() : mapstudioWebmap;
webMapV3.clean && webMapV3.clean();
mapstudioWebmap = null;
const webMapV3 = mapstudioWebmap._getWebMapInstance ? mapstudioWebmap._getWebMapInstance() : mapstudioWebmap;
webMapV3.clean && webMapV3.clean();
mapstudioWebmap = null;
}
window.document.body.removeChild(testDiv);
jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
Expand All @@ -50,7 +51,7 @@ describe('mapboxgl-webmap3.0', () => {
expect(mapstudioWebmap.map).toEqual(map);
expect(mapstudioWebmap.mapParams.title).toBe('空地图');
expect(mapstudioWebmap.mapParams.description).toBe('');
var style = map.getStyle();
const style = map.getStyle();
expect(style.name).toBe(mapstudioWebmap.mapParams.title);
expect(style.layers.length).toBe(1);
expect(style.sources).toEqual({});
Expand Down Expand Up @@ -85,7 +86,7 @@ describe('mapboxgl-webmap3.0', () => {
expect(+center.lng.toFixed(4)).toEqual(116.3949);
expect(mapstudioWebmap.mapParams.title).toBe('restmap服务');
expect(mapstudioWebmap.mapParams.description).toBe('');
var style = map.getStyle();
const style = map.getStyle();
expect(style.name).toBe(mapstudioWebmap.mapParams.title);
expect(style.layers.length).toBe(2);
done();
Expand All @@ -110,14 +111,13 @@ describe('mapboxgl-webmap3.0', () => {
mapstudioWebmap.on('addlayerssucceeded', ({ map }) => {
expect(map).not.toBeUndefined();
expect(mapstudioWebmap.map).toEqual(map);
var style = map.getStyle();
const style = map.getStyle();
const webMapV3 = mapstudioWebmap._getWebMapInstance();
const mapInfo = JSON.parse(mapstudioWebMap_symbol);
expect(style.layers.length).toBe(mapInfo.layers.length);
expect(webMapV3.getAppreciableLayers().length).toBeGreaterThanOrEqual(mapInfo.layers.length);
expect(webMapV3.getLegendInfo().length).not.toBe(0);
expect(webMapV3.getLayerCatalog().length).not.toBe(0);
expect(webMapV3.getLegendInfo().length).not.toBe(0);
done();
});
});
Expand All @@ -139,7 +139,7 @@ describe('mapboxgl-webmap3.0', () => {
mapstudioWebmap.on('addlayerssucceeded', ({ map }) => {
expect(map).not.toBeUndefined();
expect(mapstudioWebmap.map).toEqual(map);
var style = map.getStyle();
const style = map.getStyle();
expect(style.layers.length).toBe(mapInfo.layers.length);
const appreciableLayers = mapstudioWebmap.getAppreciableLayers();
const layerCatalogs = mapstudioWebmap.getLayerCatalog();
Expand All @@ -159,4 +159,124 @@ describe('mapboxgl-webmap3.0', () => {
done();
});
});

it('projection is 4490 and not include mapbox-gl-enhance', (done) => {
const mapInfo = JSON.parse(mapstudioWebMap_symbol);
const nextMapInfo = {
...mapInfo,
crs: {
name: 'EPSG:4490',
extent: [-180, -270, 180, 90],
wkt: '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"]]'
}
};
mapstudioWebmap = new WebMapV3(nextMapInfo, {
server: server,
target: 'map'
});
mapstudioWebmap.on('getmapinfofailed', ({ error }) => {
const throwError = `The EPSG code ${nextMapInfo.crs.name} needs to include mapbox-gl-enhance.js. Refer to the example: https://iclient.supermap.io/examples/mapboxgl/editor.html#mvtVectorTile_2362`;
expect(mapstudioWebmap.map).toBeUndefined();
expect(error).toBe(throwError);
done();
});
mapstudioWebmap.initializeMap(nextMapInfo);
});

it('projection is 4490 and include mapbox-gl-enhance', (done) => {
spyOn(FetchRequest, 'get').and.callFake((url) => {
if (url.indexOf('/sprite') > -1) {
return Promise.resolve(new Response(msSpriteInfo));
}
return Promise.resolve();
});
const mapInfo = JSON.parse(mapstudioWebMap_symbol);
const nextMapInfo = {
...mapInfo,
crs: {
name: 'EPSG:4490',
extent: [-180, -270, 180, 90],
wkt: '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"]]'
}
};
mapboxgl.CRS = function (epsgCode, wkt, bounds, unit) {
expect(epsgCode).toBe(nextMapInfo.crs.name);
expect(wkt).toBe(nextMapInfo.crs.wkt);
expect(bounds).toEqual(nextMapInfo.crs.extent);
expect(unit).toBe(nextMapInfo.crs.extent[2] > 180 ? 'meter' : 'degree');
};
mapboxgl.CRS.set = function () {};
mapstudioWebmap = new WebMapV3(nextMapInfo, {
server: server,
target: 'map'
});
mapstudioWebmap.initializeMap(nextMapInfo);

mapstudioWebmap.on('addlayerssucceeded', ({ map }) => {
expect(map).not.toBeUndefined();
expect(mapstudioWebmap.map).toEqual(map);
const style = map.getStyle();
expect(style.layers.length).toBe(nextMapInfo.layers.length);
const appreciableLayers = mapstudioWebmap.getAppreciableLayers();
const layerCatalogs = mapstudioWebmap.getLayerCatalog();
expect(appreciableLayers.length).toBeGreaterThanOrEqual(nextMapInfo.layers.length);
expect(layerCatalogs.length).toBeLessThanOrEqual(appreciableLayers.length);
expect(mapstudioWebmap.getLegendInfo().length).toBe(0);
delete mapboxgl.CRS;
done();
});
});

it('overlayLayersManager', (done) => {
spyOn(FetchRequest, 'get').and.callFake((url) => {
if (url.indexOf('/sprite') > -1) {
return Promise.resolve(new Response(msSpriteInfo));
}
return Promise.resolve();
});
const mapInfo = JSON.parse(mapstudioWebMap_symbol);
mapstudioWebmap = new WebMapV3(mapInfo, {
server: server,
target: 'map'
});
mapstudioWebmap.initializeMap(mapInfo);

mapstudioWebmap.on('addlayerssucceeded', ({ map }) => {
expect(map).not.toBeUndefined();
expect(mapstudioWebmap.map).toEqual(map);
const style = map.getStyle();
expect(style.layers.length).toBe(mapInfo.layers.length);
const appreciableLayers = mapstudioWebmap.getAppreciableLayers();
const layerCatalogs = mapstudioWebmap.getLayerCatalog();
expect(appreciableLayers.length).toBeGreaterThanOrEqual(mapInfo.layers.length);
expect(layerCatalogs.length).toBeLessThanOrEqual(appreciableLayers.length);
expect(mapstudioWebmap.getLegendInfo().length).toBe(0);
map.overlayLayersManager = {
GraticuleLayer: {
id: 'GraticuleLayer',
overlay: true,
sourceId: 'GraticuleLayer',
visible: true
},
EchartLayer: {
id: 'EchartLayer',
visibility: 'visible',
source: {
type: 'geoJSON',
data: null
}
},
GraticuleLayer1: {
id: 'GraticuleLayer',
overlay: true,
sourceId: 'GraticuleLayer'
}
};
const appreciableLayers2 = mapstudioWebmap.getAppreciableLayers();
expect(appreciableLayers2.length).toBe(appreciableLayers.length + 2);
expect(mapstudioWebmap.getLayerCatalog().length).toBe(layerCatalogs.length + 2);
expect(appreciableLayers2.find((item) => item.renderSource.id === 'EchartLayer')).toBeTruthy();
done();
});
});
});

0 comments on commit f77e5cc

Please sign in to comment.