Skip to content

Commit f77e5cc

Browse files
songyumengsongyumeng
committed
【feature】webmap3.0对接多投影 commit by xiongjj review by songym
1 parent 7bd6866 commit f77e5cc

File tree

2 files changed

+159
-13
lines changed

2 files changed

+159
-13
lines changed

‎src/mapboxgl/mapping/webmap/v3/WebMap.js‎

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ export class WebMap extends mapboxgl.Evented {
106106
this._layerIdRenameMapList = [];
107107
this.excludeSourceNames = ['tdt-search-', 'tdt-route-', 'smmeasure', 'mapbox-gl-draw'];
108108
this._appendLayers = false;
109+
this._baseProjection = '';
109110
}
110111

111112
/**
@@ -158,6 +159,18 @@ export class WebMap extends mapboxgl.Evented {
158159
maxzoom,
159160
sprite = ''
160161
} = this._mapInfo;
162+
let baseProjection = crs;
163+
if (typeof crs === 'object') {
164+
baseProjection = crs.name;
165+
if (!mapboxgl.CRS) {
166+
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`;
167+
this.fire('getmapinfofailed', { error: error });
168+
console.error(error);
169+
return;
170+
}
171+
this._setCRS(crs);
172+
}
173+
this._baseProjection = baseProjection;
161174
center = this.mapOptions.center || center;
162175
zoom = this.mapOptions.zoom || zoom;
163176
bearing = this.mapOptions.bearing || bearing;
@@ -166,7 +179,7 @@ export class WebMap extends mapboxgl.Evented {
166179
// 初始化 map
167180
const mapOptions = {
168181
container: this.options.target,
169-
crs,
182+
crs: this._baseProjection,
170183
center,
171184
zoom,
172185
style: {
@@ -190,13 +203,18 @@ export class WebMap extends mapboxgl.Evented {
190203
});
191204
}
192205

206+
_setCRS({ name, wkt, extent }) {
207+
const crs = new mapboxgl.CRS(name, wkt, extent, extent[2] > 180 ? 'meter' : 'degree');
208+
mapboxgl.CRS.set(crs);
209+
}
210+
193211
/**
194212
* @private
195213
* @function WebMap.prototype._initLayers
196214
* @description emit 图层加载成功事件。
197215
*/
198216
_initLayers() {
199-
if (this.map && this.map.getCRS && this.map.getCRS().epsgCode !== this._mapInfo.crs) {
217+
if (this.map.getCRS && this.map.getCRS().epsgCode !== this._baseProjection) {
200218
this.fire('projectionisnotmatch');
201219
return;
202220
}
@@ -371,11 +389,19 @@ export class WebMap extends mapboxgl.Evented {
371389
_getLayersOnMap() {
372390
const layersOnMap = this.map.getStyle().layers.map((layer) => this.map.getLayer(layer.id));
373391
const overlayLayers = Object.values(this.map.overlayLayersManager).reduce((layers, overlayLayer) => {
374-
if (overlayLayer.id) {
392+
if (overlayLayer.id && !layers.some(item => item.id === overlayLayer.id)) {
393+
let visibility = overlayLayer.visibility;
394+
if (!visibility && 'visible' in overlayLayer) {
395+
visibility = overlayLayer.visible ? 'visible' : 'none';
396+
}
397+
let source = overlayLayer.source || overlayLayer.sourceId;
398+
if (typeof source === 'object') {
399+
source = overlayLayer.id;
400+
}
375401
layers.push({
376402
id: overlayLayer.id,
377-
visibility: overlayLayer.visibility || 'visible',
378-
source: typeof overlayLayer.source === 'object' ? overlayLayer.id : overlayLayer.source,
403+
visibility,
404+
source,
379405
type: overlayLayer.type
380406
});
381407
}

‎test/mapboxgl/mapping/WebMapV3Spec.js‎

Lines changed: 128 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import mapboxgl from 'mapbox-gl';
12
import { WebMap } from '../../../src/mapboxgl/mapping/WebMap';
23
import { WebMap as WebMapV3 } from '../../../src/mapboxgl/mapping/webmap/v3/WebMap';
34
import '../../resources/WebMapV3.js';
@@ -22,9 +23,9 @@ describe('mapboxgl-webmap3.0', () => {
2223
});
2324
afterEach(() => {
2425
if (mapstudioWebmap && mapstudioWebmap.map) {
25-
const webMapV3 = mapstudioWebmap._getWebMapInstance ? mapstudioWebmap._getWebMapInstance() : mapstudioWebmap;
26-
webMapV3.clean && webMapV3.clean();
27-
mapstudioWebmap = null;
26+
const webMapV3 = mapstudioWebmap._getWebMapInstance ? mapstudioWebmap._getWebMapInstance() : mapstudioWebmap;
27+
webMapV3.clean && webMapV3.clean();
28+
mapstudioWebmap = null;
2829
}
2930
window.document.body.removeChild(testDiv);
3031
jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
@@ -50,7 +51,7 @@ describe('mapboxgl-webmap3.0', () => {
5051
expect(mapstudioWebmap.map).toEqual(map);
5152
expect(mapstudioWebmap.mapParams.title).toBe('空地图');
5253
expect(mapstudioWebmap.mapParams.description).toBe('');
53-
var style = map.getStyle();
54+
const style = map.getStyle();
5455
expect(style.name).toBe(mapstudioWebmap.mapParams.title);
5556
expect(style.layers.length).toBe(1);
5657
expect(style.sources).toEqual({});
@@ -85,7 +86,7 @@ describe('mapboxgl-webmap3.0', () => {
8586
expect(+center.lng.toFixed(4)).toEqual(116.3949);
8687
expect(mapstudioWebmap.mapParams.title).toBe('restmap服务');
8788
expect(mapstudioWebmap.mapParams.description).toBe('');
88-
var style = map.getStyle();
89+
const style = map.getStyle();
8990
expect(style.name).toBe(mapstudioWebmap.mapParams.title);
9091
expect(style.layers.length).toBe(2);
9192
done();
@@ -110,14 +111,13 @@ describe('mapboxgl-webmap3.0', () => {
110111
mapstudioWebmap.on('addlayerssucceeded', ({ map }) => {
111112
expect(map).not.toBeUndefined();
112113
expect(mapstudioWebmap.map).toEqual(map);
113-
var style = map.getStyle();
114+
const style = map.getStyle();
114115
const webMapV3 = mapstudioWebmap._getWebMapInstance();
115116
const mapInfo = JSON.parse(mapstudioWebMap_symbol);
116117
expect(style.layers.length).toBe(mapInfo.layers.length);
117118
expect(webMapV3.getAppreciableLayers().length).toBeGreaterThanOrEqual(mapInfo.layers.length);
118119
expect(webMapV3.getLegendInfo().length).not.toBe(0);
119120
expect(webMapV3.getLayerCatalog().length).not.toBe(0);
120-
expect(webMapV3.getLegendInfo().length).not.toBe(0);
121121
done();
122122
});
123123
});
@@ -139,7 +139,7 @@ describe('mapboxgl-webmap3.0', () => {
139139
mapstudioWebmap.on('addlayerssucceeded', ({ map }) => {
140140
expect(map).not.toBeUndefined();
141141
expect(mapstudioWebmap.map).toEqual(map);
142-
var style = map.getStyle();
142+
const style = map.getStyle();
143143
expect(style.layers.length).toBe(mapInfo.layers.length);
144144
const appreciableLayers = mapstudioWebmap.getAppreciableLayers();
145145
const layerCatalogs = mapstudioWebmap.getLayerCatalog();
@@ -159,4 +159,124 @@ describe('mapboxgl-webmap3.0', () => {
159159
done();
160160
});
161161
});
162+
163+
it('projection is 4490 and not include mapbox-gl-enhance', (done) => {
164+
const mapInfo = JSON.parse(mapstudioWebMap_symbol);
165+
const nextMapInfo = {
166+
...mapInfo,
167+
crs: {
168+
name: 'EPSG:4490',
169+
extent: [-180, -270, 180, 90],
170+
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"]]'
171+
}
172+
};
173+
mapstudioWebmap = new WebMapV3(nextMapInfo, {
174+
server: server,
175+
target: 'map'
176+
});
177+
mapstudioWebmap.on('getmapinfofailed', ({ error }) => {
178+
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`;
179+
expect(mapstudioWebmap.map).toBeUndefined();
180+
expect(error).toBe(throwError);
181+
done();
182+
});
183+
mapstudioWebmap.initializeMap(nextMapInfo);
184+
});
185+
186+
it('projection is 4490 and include mapbox-gl-enhance', (done) => {
187+
spyOn(FetchRequest, 'get').and.callFake((url) => {
188+
if (url.indexOf('/sprite') > -1) {
189+
return Promise.resolve(new Response(msSpriteInfo));
190+
}
191+
return Promise.resolve();
192+
});
193+
const mapInfo = JSON.parse(mapstudioWebMap_symbol);
194+
const nextMapInfo = {
195+
...mapInfo,
196+
crs: {
197+
name: 'EPSG:4490',
198+
extent: [-180, -270, 180, 90],
199+
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"]]'
200+
}
201+
};
202+
mapboxgl.CRS = function (epsgCode, wkt, bounds, unit) {
203+
expect(epsgCode).toBe(nextMapInfo.crs.name);
204+
expect(wkt).toBe(nextMapInfo.crs.wkt);
205+
expect(bounds).toEqual(nextMapInfo.crs.extent);
206+
expect(unit).toBe(nextMapInfo.crs.extent[2] > 180 ? 'meter' : 'degree');
207+
};
208+
mapboxgl.CRS.set = function () {};
209+
mapstudioWebmap = new WebMapV3(nextMapInfo, {
210+
server: server,
211+
target: 'map'
212+
});
213+
mapstudioWebmap.initializeMap(nextMapInfo);
214+
215+
mapstudioWebmap.on('addlayerssucceeded', ({ map }) => {
216+
expect(map).not.toBeUndefined();
217+
expect(mapstudioWebmap.map).toEqual(map);
218+
const style = map.getStyle();
219+
expect(style.layers.length).toBe(nextMapInfo.layers.length);
220+
const appreciableLayers = mapstudioWebmap.getAppreciableLayers();
221+
const layerCatalogs = mapstudioWebmap.getLayerCatalog();
222+
expect(appreciableLayers.length).toBeGreaterThanOrEqual(nextMapInfo.layers.length);
223+
expect(layerCatalogs.length).toBeLessThanOrEqual(appreciableLayers.length);
224+
expect(mapstudioWebmap.getLegendInfo().length).toBe(0);
225+
delete mapboxgl.CRS;
226+
done();
227+
});
228+
});
229+
230+
it('overlayLayersManager', (done) => {
231+
spyOn(FetchRequest, 'get').and.callFake((url) => {
232+
if (url.indexOf('/sprite') > -1) {
233+
return Promise.resolve(new Response(msSpriteInfo));
234+
}
235+
return Promise.resolve();
236+
});
237+
const mapInfo = JSON.parse(mapstudioWebMap_symbol);
238+
mapstudioWebmap = new WebMapV3(mapInfo, {
239+
server: server,
240+
target: 'map'
241+
});
242+
mapstudioWebmap.initializeMap(mapInfo);
243+
244+
mapstudioWebmap.on('addlayerssucceeded', ({ map }) => {
245+
expect(map).not.toBeUndefined();
246+
expect(mapstudioWebmap.map).toEqual(map);
247+
const style = map.getStyle();
248+
expect(style.layers.length).toBe(mapInfo.layers.length);
249+
const appreciableLayers = mapstudioWebmap.getAppreciableLayers();
250+
const layerCatalogs = mapstudioWebmap.getLayerCatalog();
251+
expect(appreciableLayers.length).toBeGreaterThanOrEqual(mapInfo.layers.length);
252+
expect(layerCatalogs.length).toBeLessThanOrEqual(appreciableLayers.length);
253+
expect(mapstudioWebmap.getLegendInfo().length).toBe(0);
254+
map.overlayLayersManager = {
255+
GraticuleLayer: {
256+
id: 'GraticuleLayer',
257+
overlay: true,
258+
sourceId: 'GraticuleLayer',
259+
visible: true
260+
},
261+
EchartLayer: {
262+
id: 'EchartLayer',
263+
visibility: 'visible',
264+
source: {
265+
type: 'geoJSON',
266+
data: null
267+
}
268+
},
269+
GraticuleLayer1: {
270+
id: 'GraticuleLayer',
271+
overlay: true,
272+
sourceId: 'GraticuleLayer'
273+
}
274+
};
275+
const appreciableLayers2 = mapstudioWebmap.getAppreciableLayers();
276+
expect(appreciableLayers2.length).toBe(appreciableLayers.length + 2);
277+
expect(mapstudioWebmap.getLayerCatalog().length).toBe(layerCatalogs.length + 2);
278+
expect(appreciableLayers2.find((item) => item.renderSource.id === 'EchartLayer')).toBeTruthy();
279+
done();
280+
});
281+
});
162282
});

0 commit comments

Comments
 (0)