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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy