Skip to content

Commit 1b66a94

Browse files
xilanhuaweidapaoxilanhuaweidapao
committed
【update】ol webmap 支持 arcgis vectortile 并style 请求带上 baseUrl 参数 review by luox
1 parent 7a0e4cb commit 1b66a94

File tree

5 files changed

+139
-26
lines changed

5 files changed

+139
-26
lines changed

‎src/common/mapping/WebMapV2.js

+30
Original file line numberDiff line numberDiff line change
@@ -334,6 +334,19 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo, crsMa
334334
style.layers.forEach(layer => {
335335
layer.layout && (layer.layout.visibility = this._getVisibility(layerInfo.visible));
336336
});
337+
if (layerInfo.dataSource.type === 'ARCGIS_VECTORTILE') {
338+
let paramUrl = url.split('?')[1];
339+
Object.keys(style.sources).forEach((key) => {
340+
Object.keys(style.sources[key]).forEach((fieldName) => {
341+
if (fieldName === 'url') {
342+
if (typeof style.sources[key][fieldName] === 'string' && !this.isAbsoluteURL(style.sources[key][fieldName])) {
343+
style.sources[key][fieldName] = this.relative2absolute(style.sources[key][fieldName], url);
344+
}
345+
style.sources[key][fieldName] = style.sources[key][fieldName] + (paramUrl ? '?' + paramUrl + '&f=json' : '?f=json');
346+
}
347+
});
348+
});
349+
}
337350
this.map.addStyle(style, undefined, undefined, undefined, url);
338351
const layerIds = [];
339352
style.layers.forEach((item) => {
@@ -3073,5 +3086,22 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo, crsMa
30733086
const visibility = visible === true || visible === 'visible' ? 'visible' : 'none';
30743087
return visibility;
30753088
}
3089+
3090+
isAbsoluteURL(url) {
3091+
try {
3092+
const res = new URL(url);
3093+
return !!res;
3094+
} catch (_) {
3095+
return false;
3096+
}
3097+
}
3098+
3099+
relative2absolute(url, base) {
3100+
let newUrl = new URL(url, base);
3101+
if (newUrl && newUrl.href) {
3102+
return decodeURIComponent(newUrl.href);
3103+
}
3104+
return null;
3105+
}
30763106
};
30773107
}

‎src/openlayers/mapping/WebMap.js

+14-1
Original file line numberDiff line numberDiff line change
@@ -5164,11 +5164,24 @@ export class WebMap extends Observable {
51645164
const envelope = this.getEnvelope(indexbounds, layerInfo.bounds);
51655165
const styleResolutions = this.getStyleResolutions(envelope);
51665166
// const origin = [envelope.left, envelope.top];
5167-
let baseUrl = layerInfo.url && layerInfo.url.split('?')[0];
5167+
let baseUrl = layerInfo.url;
5168+
let paramUrl = baseUrl.split('?')[1];
51685169
let spriteUrl = styles.sprite;
51695170
if (!CommonUtil.isAbsoluteURL(styles.sprite)) {
51705171
spriteUrl = CommonUtil.relative2absolute(styles.sprite, baseUrl);
51715172
}
5173+
if (layerInfo.dataSource.type === 'ARCGIS_VECTORTILE') {
5174+
Object.keys(styles.sources).forEach(function (key) {
5175+
Object.keys(styles.sources[key]).forEach(function(fieldName) {
5176+
if (fieldName === 'url') {
5177+
if (typeof styles.sources[key][fieldName] === 'string' && !CommonUtil.isAbsoluteURL(styles.sources[key][fieldName])) {
5178+
styles.sources[key][fieldName] = CommonUtil.relative2absolute(styles.sources[key][fieldName], baseUrl);
5179+
}
5180+
styles.sources[key][fieldName] = styles.sources[key][fieldName] + (paramUrl ? '?' + paramUrl + '&f=json' : '?f=json');
5181+
}
5182+
});
5183+
});
5184+
}
51725185
let withCredentials = this.isIportalProxyServiceUrl(spriteUrl);
51735186
const requestParameters = this.tileRequestParameters && this.tileRequestParameters(spriteUrl);
51745187
// 创建MapBoxStyle样式

‎src/openlayers/overlay/VectorTileSuperMapRest.js

+7
Original file line numberDiff line numberDiff line change
@@ -338,11 +338,15 @@ export class VectorTileSuperMapRest extends VectorTile {
338338
//ToDo 支持多个tiles地址
339339
if (style.sources && style.sources[source]) {
340340
let newUrl;
341+
let paramUrl = this.baseUrl && this.baseUrl.split('?')[1];
341342
if (style.sources[source].tiles) {
342343
newUrl = style.sources[source].tiles[0];
343344
if (!CommonUtil.isAbsoluteURL(newUrl)) {
344345
newUrl = CommonUtil.relative2absolute(newUrl, this.baseUrl);
345346
}
347+
if (paramUrl) {
348+
newUrl = CommonUtil.urlAppend(newUrl, paramUrl);
349+
}
346350
} else if (style.sources[source].url) {
347351
let tiles = style.sources[source].url;
348352
if (!CommonUtil.isAbsoluteURL(tiles)) {
@@ -355,6 +359,9 @@ export class VectorTileSuperMapRest extends VectorTile {
355359
tileUrl = CommonUtil.relative2absolute(tileUrl, tiles);
356360
}
357361
newUrl = SecurityManager.appendCredential(tileUrl);
362+
if (paramUrl) {
363+
newUrl = CommonUtil.urlAppend(newUrl, paramUrl);
364+
}
358365
}
359366
this._tileUrl = SecurityManager.appendCredential(newUrl);
360367
}

‎src/openlayers/overlay/vectortile/MapboxStyles.js

+34-25
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,7 @@
248248
this.layersBySourceLayer = {};
249249
this._loadStyle(style);
250250
}
251+
251252
_loadStyle(style) {
252253
if (Object.prototype.toString.call(style) == '[object Object]') {
253254
this._handleRelativeUrl(style, this.baseUrl);
@@ -397,29 +398,37 @@
397398
return parts ? parts[1] + extension + (parts.length > 2 ? parts[2] : '') : url + extension;
398399
}
399400

400-
_handleRelativeUrl(styles, baseUrl) {
401-
if (!baseUrl) {
402-
return styles;
403-
}
404-
Object.keys(styles).forEach((fieldName) => {
405-
if (fieldName === 'sources') {
406-
Object.keys(styles[fieldName]).forEach((sourceName) => {
407-
this._handleRelativeUrl(styles[fieldName][sourceName], baseUrl);
408-
})
409-
}
410-
if (fieldName === 'sprite' || fieldName === 'glyphs' || fieldName === 'url') {
411-
if (typeof styles[fieldName] === 'string' && !CommonUtil.isAbsoluteURL(styles[fieldName])) {
412-
styles[fieldName] = CommonUtil.relative2absolute(styles[fieldName], baseUrl);
413-
}
414-
}
415-
if (fieldName === 'tiles' && Array.isArray(styles[fieldName])) {
416-
styles[fieldName].forEach((tile) => {
417-
if (!CommonUtil.isAbsoluteURL(tile)) {
418-
tile = CommonUtil.relative2absolute(tile, baseUrl);
419-
}
420-
})
421-
}
422-
})
423-
}
401+
_handleRelativeUrl(styles, url) {
402+
if (!url) {
403+
return styles;
404+
}
405+
const baseUrl = url.split('?')[0];
406+
const paramUrl = url.split('?')[1] || '';
407+
Object.keys(styles).forEach((fieldName) => {
408+
if (fieldName === 'sources') {
409+
Object.keys(styles[fieldName]).forEach((sourceName) => {
410+
this._handleRelativeUrl(styles[fieldName][sourceName], url);
411+
})
412+
}
413+
if (fieldName === 'sprite' || fieldName === 'glyphs' || fieldName === 'url') {
414+
if (typeof styles[fieldName] === 'string' && !CommonUtil.isAbsoluteURL(styles[fieldName])) {
415+
styles[fieldName] = CommonUtil.relative2absolute(styles[fieldName], baseUrl);
416+
}
417+
if (paramUrl && !styles[fieldName].includes(paramUrl)) {
418+
styles[fieldName] = styles[fieldName] + (paramUrl ? (styles[fieldName].includes('?') ? '&' + paramUrl : '?' + paramUrl) : '');
419+
}
420+
}
421+
if (fieldName === 'tiles' && Array.isArray(styles[fieldName])) {
422+
styles[fieldName].forEach((tile) => {
423+
if (!CommonUtil.isAbsoluteURL(tile)) {
424+
tile = CommonUtil.relative2absolute(tile, baseUrl);
425+
}
426+
if (paramUrl && !tile.includes(paramUrl)) {
427+
tile = tile + (paramUrl ? (styles[fieldName].includes('?') ? '&' + paramUrl : '?' + paramUrl) : '');
428+
}
429+
})
430+
}
431+
})
432+
}
424433
}
425-
434+

‎test/openlayers/overlay/vectortile/MapboxStylesSpec.js

+54
Original file line numberDiff line numberDiff line change
@@ -334,4 +334,58 @@ describe("openlayers_MapboxStyles", () => {
334334
}
335335
});
336336
});
337+
338+
it("handle relative url with param", done => {
339+
spyOn(XMLHttpRequest.prototype, 'send').and.callThrough();
340+
spyOn(XMLHttpRequest.prototype, 'setRequestHeader').and.callThrough();
341+
var style = {
342+
"version" : 8,
343+
"sprite" : "../sprites/sprite",
344+
"glyphs" : "../fonts/{fontstack}/{range}.pbf",
345+
"sources": {
346+
"esri": {
347+
"type": "vector",
348+
"url": "../../"
349+
}
350+
},
351+
"layers" : [{
352+
"id" : "Contour_11_main/0",
353+
"type" : "line",
354+
"source" : "esri",
355+
"source-layer" : "Contour",
356+
"filter" : ["all", ["==", "Index3", 1], ["==", "Index5", 1]],
357+
"minzoom" : 11,
358+
"maxzoom" : 12,
359+
"paint" : {
360+
"line-color" : "#61674a",
361+
"line-opacity" : 0.5,
362+
"line-width" : {
363+
"base" : 1.2,
364+
"stops" : [[11, 0.7], [16, 1.1]]
365+
}
366+
}
367+
}]
368+
}
369+
mapboxStyles = new MapboxStyles({
370+
style: style,
371+
baseUrl: 'http://localhost:9876?tkk=ddddssss',
372+
map: map,
373+
source: "California",
374+
headers:{'appToken':'test'}
375+
});
376+
mapboxStyles.on("styleloaded", () => {
377+
try {
378+
style = mapboxStyles.getStyleFunction();
379+
expect(style).not.toBeNull();
380+
expect(mapboxStyles._mbStyle.glyphs).toBe('http://localhost:9876/fonts/{fontstack}/{range}.pbf?tkk=ddddssss');
381+
expect(mapboxStyles._mbStyle.sprite).toBe('http://localhost:9876/sprites/sprite?tkk=ddddssss');
382+
expect(mapboxStyles._mbStyle.sources['esri']['url']).toBe('http://localhost:9876/?tkk=ddddssss');
383+
done();
384+
} catch (e) {
385+
console.log("'init_Style_headers'案例失败" + e.name + ":" + e.message);
386+
expect(false).toBeTruthy();
387+
done();
388+
}
389+
});
390+
});
337391
});

0 commit comments

Comments
 (0)