Skip to content

Commit 0a45260

Browse files
xilanhuaweidapaoxilanhuaweidapao
committed
update 修改 map 传入时添加 sprite 可为对象 review by xiongjj
1 parent 6826a91 commit 0a45260

File tree

5 files changed

+204
-27
lines changed

5 files changed

+204
-27
lines changed

‎dist/mapboxgl/include-mapboxgl.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,8 @@
5959
inputScript(libsurl + '/mapbox-gl-js/1.13.2/mapbox-gl.js');
6060
}
6161
if (inArray(includes, 'mapbox-gl-enhance')) {
62-
inputCSS(libsurl + '/mapbox-gl-js-enhance/1.12.1-6/mapbox-gl-enhance.css');
63-
inputScript(libsurl + '/mapbox-gl-js-enhance/1.12.1-6/mapbox-gl-enhance.js');
62+
inputCSS(libsurl + '/mapbox-gl-js-enhance/1.12.1-7/mapbox-gl-enhance.css');
63+
inputScript(libsurl + '/mapbox-gl-js-enhance/1.12.1-7/mapbox-gl-enhance.js');
6464
}
6565
if (inArray(includes, 'L7')) {
6666
inputScript(libsurl + '/mapboxgl-l7-render/0.0.1/mapboxgl-l7-render.js');

‎dist/maplibregl/include-maplibregl.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,8 @@
5959
inputScript(libsurl + '/maplibre-gl-js/4.3.2/maplibre-gl.min.js');
6060
}
6161
if (inArray(includes, 'maplibre-gl-enhance')) {
62-
inputCSS(libsurl + '/maplibre-gl-js-enhance/4.3.0-1/maplibre-gl-enhance.css');
63-
inputScript(libsurl + '/maplibre-gl-js-enhance/4.3.0-1/maplibre-gl-enhance.js');
62+
inputCSS(libsurl + '/maplibre-gl-js-enhance/4.3.0-2/maplibre-gl-enhance.css');
63+
inputScript(libsurl + '/maplibre-gl-js-enhance/4.3.0-2/maplibre-gl-enhance.js');
6464
}
6565
if (inArray(includes, 'L7')) {
6666
inputScript(libsurl + '/maplibregl-l7-render/0.0.1/maplibregl-l7-render.js');

‎src/common/mapping/WebMapV3.js

Lines changed: 36 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,7 @@ export function createWebMapV3Extending(SuperClass, { MapManager, mapRepo, mapRe
166166
this.options = options;
167167
this.mapOptions = mapOptions;
168168
this._mapResourceInfo = {};
169+
this._relatedInfo = options.relatedInfo !== undefined ? options.relatedInfo : {};
169170
this._sprite = '';
170171
this._spriteDatas = {};
171172
this._appendLayers = false;
@@ -189,12 +190,11 @@ export function createWebMapV3Extending(SuperClass, { MapManager, mapRepo, mapRe
189190
this._appendLayers = true;
190191
this.map = map;
191192
// 处理图层管理添加 sprite
192-
const { sources, sprite } = this._mapInfo;
193-
if (sprite && sources) {
194-
Object.keys(sources).forEach((sourceName) => {
195-
if (sources[sourceName].type === 'vector') {
196-
this.map.style.addSprite(sourceName, sprite);
197-
}
193+
const sprite = this._mapInfo.sprite;
194+
if (sprite) {
195+
this._sprite = sprite;
196+
this.map.addStyle({
197+
sprite
198198
});
199199
}
200200
this._initLayers();
@@ -344,22 +344,26 @@ export function createWebMapV3Extending(SuperClass, { MapManager, mapRepo, mapRe
344344
* @function WebMap.prototype._initLayers
345345
* @description emit 图层加载成功事件。
346346
*/
347-
_initLayers() {
347+
async _initLayers() {
348348
if (this.map.getCRS && this.map.getCRS().epsgCode !== this._baseProjection) {
349349
this.fire('projectionisnotmatch');
350350
return;
351351
}
352+
await this._getSpriteDatas();
352353
if (Object.prototype.toString.call(this.mapId) === '[object Object]') {
353354
this.mapParams = {
354355
title: this._mapInfo.name,
355-
description: ''
356+
description: this._relatedInfo.description
356357
};
358+
if (this._relatedInfo.projectInfo) {
359+
this._mapResourceInfo = JSON.parse(this._relatedInfo.projectInfo);
360+
}
357361
this._createMapRelatedInfo();
358362
this._addLayersToMap();
359363
return;
360364
}
361-
Promise.all([this._getMapRelatedInfo(), this._getSpriteDatas()])
362-
.then(([relatedInfo]) => {
365+
this._getMapRelatedInfo()
366+
.then((relatedInfo) => {
363367
this.mapParams = {
364368
title: this._mapInfo.name,
365369
description: relatedInfo.description
@@ -642,17 +646,30 @@ export function createWebMapV3Extending(SuperClass, { MapManager, mapRepo, mapRe
642646
if (!sprite) {
643647
return;
644648
}
649+
650+
const spriteUrls = [];
645651
if (typeof sprite === 'string') {
646-
const url = sprite.replace(/.+(web\/maps\/.+)/, `${this.options.server}$1`);
647-
return FetchRequest.get(url, null, { withCredentials: this.options.withCredentials })
648-
.then((response) => {
649-
return response.json();
650-
})
651-
.then((res) => {
652-
this._spriteDatas = res;
653-
});
652+
spriteUrls.push(sprite);
653+
} else if (typeof sprite === 'object') {
654+
Object.keys(sprite).forEach((sourceId) => {
655+
spriteUrls.push(sprite[sourceId]);
656+
});
654657
}
655-
this._spriteDatas = sprite;
658+
659+
return Promise.all(spriteUrls.map((url) => this._getSpriteData(url))).then((allResults) => {
660+
allResults.forEach((result) => {
661+
this._spriteDatas = {...this._spriteDatas, ...result};
662+
});
663+
return;
664+
});
665+
}
666+
667+
_getSpriteData(sprite) {
668+
const url = sprite.replace(/.+(web\/maps\/.+)/, `${this.options.server}$1`);
669+
return FetchRequest.get(url, null, { withCredentials: this.options.withCredentials })
670+
.then((response) => {
671+
return response.json();
672+
});
656673
}
657674

658675
_createLegendInfo() {

‎test/mapboxgl/mapping/WebMapV3Spec.js

Lines changed: 82 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1010,8 +1010,7 @@ describe('mapboxgl-webmap3.0', () => {
10101010
expect(mapstudioWebmap._appendLayers).toBe(true);
10111011
expect(map).toEqual(existedMap);
10121012
expect(mapstudioWebmap.map).toEqual(map);
1013-
const vectorSources = Object.values(nextMapInfo.sources).filter((item) => item.type === 'vector');
1014-
expect(map.style.addSprite).toHaveBeenCalledTimes(vectorSources.length);
1013+
expect(map.addStyle).toHaveBeenCalled();
10151014
delete mapboxgl.CRS;
10161015
done();
10171016
});
@@ -1058,4 +1057,85 @@ describe('mapboxgl-webmap3.0', () => {
10581057
done();
10591058
});
10601059
});
1060+
1061+
it('handle sprite option is object like { sourceId: url }', (done) => {
1062+
spyOn(FetchRequest, 'get').and.callFake((url) => {
1063+
if (url.indexOf('/sprite/rectangle') > -1) {
1064+
return Promise.resolve(new Response(JSON.stringify({rectangle: {
1065+
pixelRatio: 1,
1066+
width: 104,
1067+
x: 0,
1068+
y: 0,
1069+
height: 104
1070+
}})));
1071+
} else if (url.indexOf('/sprite/circle') > -1) {
1072+
return Promise.resolve(new Response(JSON.stringify({circle: {
1073+
pixelRatio: 1,
1074+
width: 104,
1075+
x: 104,
1076+
y: 0,
1077+
height: 104
1078+
}})));
1079+
} else if (url.indexOf('/sprite/triangle') > -1) {
1080+
return Promise.resolve(new Response(JSON.stringify({triangle: {
1081+
pixelRatio: 1,
1082+
width: 104,
1083+
x: 0,
1084+
y: 104,
1085+
height: 104
1086+
}})));
1087+
}
1088+
return Promise.resolve();
1089+
});
1090+
spyOn(mapboxgl, 'Map').and.callFake(mbglmap);
1091+
mapboxgl.CRS = function (epsgCode, wkt, bounds, unit) {
1092+
};
1093+
mapboxgl.CRS.set = function () {};
1094+
const mapInfo = JSON.parse(mapstudioWebMap_symbol);
1095+
mapInfo.sprite = {
1096+
rectangle: 'http://localhost:9876/base/resources/data/sprite/rectangle',
1097+
circle: 'http://localhost:9876/base/resources/data/sprite/circle',
1098+
triangle: 'http://localhost:9876/base/resources/data/sprite/triangle'
1099+
};
1100+
mapInfo.crs = {
1101+
name: 'EPSG:4490',
1102+
extent: [-180, -270, 180, 90],
1103+
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"]]'
1104+
}
1105+
mapstudioWebmap = new WebMapV3(mapInfo, {
1106+
server: server,
1107+
target: 'map',
1108+
relatedInfo: {
1109+
description: '测试111'
1110+
}
1111+
});
1112+
const existedMap = new mapboxgl.Map({
1113+
container: testDiv,
1114+
style: {
1115+
version: 8,
1116+
sources: {},
1117+
layers: [
1118+
{
1119+
paint: {
1120+
'background-color': '#242424'
1121+
},
1122+
id: 'background1',
1123+
type: 'background'
1124+
}
1125+
]
1126+
},
1127+
crs: 'EPSG:4490',
1128+
center: [116.640545, 40.531714],
1129+
zoom: 7
1130+
});
1131+
existedMap.on('load', function () {
1132+
mapstudioWebmap.initializeMap(mapInfo, existedMap);
1133+
});
1134+
mapstudioWebmap.on('addlayerssucceeded', ({ map }) => {
1135+
expect(mapstudioWebmap.mapParams.description).toBe('测试111');
1136+
expect(Object.keys(mapstudioWebmap._spriteDatas).length).toBe(3);
1137+
expect(map.addStyle).toHaveBeenCalled();
1138+
done();
1139+
});
1140+
});
10611141
});

‎test/maplibregl/mapping/WebMapV3Spec.js

Lines changed: 82 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1010,8 +1010,7 @@ describe('maplibregl-webmap3.0', () => {
10101010
expect(mapstudioWebmap._appendLayers).toBe(true);
10111011
expect(map).toEqual(existedMap);
10121012
expect(mapstudioWebmap.map).toEqual(map);
1013-
const vectorSources = Object.values(nextMapInfo.sources).filter((item) => item.type === 'vector');
1014-
expect(map.style.addSprite).toHaveBeenCalledTimes(vectorSources.length);
1013+
expect(map.addStyle).toHaveBeenCalled();
10151014
delete maplibregl.CRS;
10161015
done();
10171016
});
@@ -1058,4 +1057,85 @@ describe('maplibregl-webmap3.0', () => {
10581057
done();
10591058
});
10601059
});
1060+
1061+
it('handle sprite option is object like { sourceId: url }', (done) => {
1062+
spyOn(FetchRequest, 'get').and.callFake((url) => {
1063+
if (url.indexOf('/sprite/rectangle') > -1) {
1064+
return Promise.resolve(new Response(JSON.stringify({rectangle: {
1065+
pixelRatio: 1,
1066+
width: 104,
1067+
x: 0,
1068+
y: 0,
1069+
height: 104
1070+
}})));
1071+
} else if (url.indexOf('/sprite/circle') > -1) {
1072+
return Promise.resolve(new Response(JSON.stringify({circle: {
1073+
pixelRatio: 1,
1074+
width: 104,
1075+
x: 104,
1076+
y: 0,
1077+
height: 104
1078+
}})));
1079+
} else if (url.indexOf('/sprite/triangle') > -1) {
1080+
return Promise.resolve(new Response(JSON.stringify({triangle: {
1081+
pixelRatio: 1,
1082+
width: 104,
1083+
x: 0,
1084+
y: 104,
1085+
height: 104
1086+
}})));
1087+
}
1088+
return Promise.resolve();
1089+
});
1090+
spyOn(maplibregl, 'Map').and.callFake(mbglmap);
1091+
maplibregl.CRS = function (epsgCode, wkt, bounds, unit) {
1092+
};
1093+
maplibregl.CRS.set = function () {};
1094+
const mapInfo = JSON.parse(mapstudioWebMap_symbol);
1095+
mapInfo.sprite = {
1096+
rectangle: 'http://localhost:9876/base/resources/data/sprite/rectangle',
1097+
circle: 'http://localhost:9876/base/resources/data/sprite/circle',
1098+
triangle: 'http://localhost:9876/base/resources/data/sprite/triangle'
1099+
};
1100+
mapInfo.crs = {
1101+
name: 'EPSG:4490',
1102+
extent: [-180, -270, 180, 90],
1103+
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"]]'
1104+
}
1105+
mapstudioWebmap = new WebMapV3(mapInfo, {
1106+
server: server,
1107+
target: 'map',
1108+
relatedInfo: {
1109+
description: '测试111'
1110+
}
1111+
});
1112+
const existedMap = new maplibregl.Map({
1113+
container: testDiv,
1114+
style: {
1115+
version: 8,
1116+
sources: {},
1117+
layers: [
1118+
{
1119+
paint: {
1120+
'background-color': '#242424'
1121+
},
1122+
id: 'background1',
1123+
type: 'background'
1124+
}
1125+
]
1126+
},
1127+
crs: 'EPSG:4490',
1128+
center: [116.640545, 40.531714],
1129+
zoom: 7
1130+
});
1131+
existedMap.on('load', function () {
1132+
mapstudioWebmap.initializeMap(mapInfo, existedMap);
1133+
});
1134+
mapstudioWebmap.on('addlayerssucceeded', ({ map }) => {
1135+
expect(mapstudioWebmap.mapParams.description).toBe('测试111');
1136+
expect(Object.keys(mapstudioWebmap._spriteDatas).length).toBe(3);
1137+
expect(map.addStyle).toHaveBeenCalled();
1138+
done();
1139+
});
1140+
});
10611141
});

0 commit comments

Comments
 (0)