Skip to content

Commit

Permalink
【fix】mapboxgl maplibregl initmap 支持带token的url; review by qiw
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiongjiaojiao
xiongjiaojiao committed Oct 18, 2024
1 parent cf3595b commit 5c4313b
Show file tree
Hide file tree
Showing 4 changed files with 205 additions and 5 deletions.
7 changes: 4 additions & 3 deletions src/mapboxgl/mapping/InitMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import mapboxgl from 'mapbox-gl';
import { MapService } from '../services/MapService';
import { FetchRequest } from '@supermapgis/iclient-common/util/FetchRequest';
import { InitMapServiceBase, isPlaneProjection, getZoom, getTileset, getTileFormat } from '@supermapgis/iclient-common/iServer/InitMapServiceBase';
import { Util } from '@supermapgis/iclient-common/commontypes/Util';
import proj4 from 'proj4';

/**
Expand Down Expand Up @@ -137,7 +138,7 @@ async function getVectorTileCRSExtent(vectorStyleUrl, restMapUrl) {
if (vectorStyleData.metadata && vectorStyleData.metadata.indexbounds) {
return { extent: vectorStyleData.metadata.indexbounds };
}
const vectorExtentDataRes = await FetchRequest.get(`${restMapUrl}/prjCoordSys/projection/extent.json`);
const vectorExtentDataRes = await FetchRequest.get(Util.urlPathAppend(restMapUrl, 'prjCoordSys/projection/extent.json'));
const vectorExtentData = await vectorExtentDataRes.json();
return { extent: vectorExtentData, center: vectorStyleData.center };
} catch (error) {
Expand Down Expand Up @@ -176,7 +177,7 @@ async function createMapOptions(url, resetServiceInfo, options) {
let extent = bounds;
let tileUrl =
sourceType === 'vector-tile'
? url + '/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true&tileURLTemplate=ZXY'
? Util.urlAppend(Util.urlPathAppend(url, 'tileFeature/vectorstyles.json'), 'type=MapBox_GL&styleonly=true&tileURLTemplate=ZXY')
: url;
let nonEnhanceExtraInfo = {};
let enhanceExtraInfo = {};
Expand Down Expand Up @@ -228,7 +229,7 @@ async function createMapOptions(url, resetServiceInfo, options) {
const tileSize = 256;
nonEnhanceExtraInfo.tileSize = tileSize;
const transparent = mapOptions.transparent !== false;
tileUrl += `/zxyTileImage.png?z={z}&x={x}&y={y}&width=${tileSize}&height=${tileSize}&transparent=${transparent}`;
tileUrl = Util.urlAppend(Util.urlPathAppend(tileUrl, 'zxyTileImage.png'), `z={z}&x={x}&y={y}&width=${tileSize}&height=${tileSize}&transparent=${transparent}`);
}
}
if (zoom === undefined) {
Expand Down
5 changes: 3 additions & 2 deletions src/maplibregl/mapping/InitMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import maplibregl from 'maplibre-gl';
import { FetchRequest } from '@supermapgis/iclient-common/util/FetchRequest';
import { MapService } from '../services/MapService';
import { InitMapServiceBase, isPlaneProjection, getZoom, getTileset, getTileFormat } from '@supermapgis/iclient-common/iServer/InitMapServiceBase';
import { Util } from '@supermapgis/iclient-common/commontypes/Util';
import proj4 from 'proj4';
/**
* @function initMap
Expand Down Expand Up @@ -169,7 +170,7 @@ async function createMapOptions(url, resetServiceInfo, options) {
let extent = bounds;
let tileUrl =
sourceType === 'vector-tile'
? url + '/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true&tileURLTemplate=ZXY'
? Util.urlAppend(Util.urlPathAppend(url, 'tileFeature/vectorstyles.json'), 'type=MapBox_GL&styleonly=true&tileURLTemplate=ZXY')
: url;
let nonEnhanceExtraInfo = {};
let enhanceExtraInfo = {};
Expand Down Expand Up @@ -221,7 +222,7 @@ async function createMapOptions(url, resetServiceInfo, options) {
const tileSize = 256;
nonEnhanceExtraInfo.tileSize = tileSize;
const transparent = mapOptions.transparent !== false;
tileUrl += `/zxyTileImage.png?z={z}&x={x}&y={y}&width=${tileSize}&height=${tileSize}&transparent=${transparent}`;
tileUrl = Util.urlAppend(Util.urlPathAppend(tileUrl, 'zxyTileImage.png'), `z={z}&x={x}&y={y}&width=${tileSize}&height=${tileSize}&transparent=${transparent}`);
}
}
if (zoom === undefined) {
Expand Down
122 changes: 122 additions & 0 deletions test/mapboxgl/mapping/InitMapSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { FetchRequest } from '../../../src/common/util/FetchRequest';

describe('mapboxgl_InitMap', () => {
let originalTimeout, testDiv;
const tokenQuery = 'token=opbFn8Nl5zUs2xhuCQ..';

beforeEach(() => {
spyOn(mapboxgl, 'Map').and.callFake(mbglmap);
Expand Down Expand Up @@ -251,7 +252,128 @@ describe('mapboxgl_InitMap', () => {
};
initMap(tilesetServeRequest).then(({ map }) => {
expect(map).not.toBeNull();
delete mapboxgl.CRS;
delete mapboxgl.proj4;
done();
});
});

it('initMap raster when carring on token', async () => {
const restMapUrl = 'http:/fake:8090/iserver/iserver/services/map-china400/rest/maps/China';
const url = `${restMapUrl}?${tokenQuery}`;
const mapServiceInfo = {
dynamicProjection: false,
prjCoordSys: {
epsgCode: 3857
},
bounds: {
top: 20037508.342789087,
left: -20037508.342789248,
bottom: -20037508.34278914,
leftBottom: {
x: -20037508.342789248,
y: -20037508.34278914
},
right: 20037508.342789244,
rightTop: {
x: 20037508.342789244,
y: 20037508.342789087
}
},
center: {
x: -7.450580596923828e-9,
y: -2.60770320892334e-8
}
};
spyOn(FetchRequest, 'get').and.callFake((url) => {
expect(url).toContain(tokenQuery);
if (url.indexOf('/tilesets') > -1) {
return Promise.resolve(new Response(tilesetInfo_1));
}
return Promise.resolve(new Response(JSON.stringify(mapServiceInfo)));
});
const resData = await initMap(url);
const map = resData.map;
expect(map).not.toBeUndefined();
expect(map.options.crs).toBe(`EPSG:${mapServiceInfo.prjCoordSys.epsgCode}`);
expect(map.options.center).toEqual([-6.692970425781022e-14, -2.2899993706537323e-13]);
expect(Object.values(map.options.style.sources).length).toBe(1);
expect(map.options.style.layers.length).toBe(1);
expect(Object.values(map.options.style.sources)[0].tiles.length).toBe(1);
expect(Object.values(map.options.style.sources)[0].tiles[0]).toBe(
`${restMapUrl}/zxyTileImage.png?${tokenQuery}&z={z}&x={x}&y={y}&width=256&height=256&transparent=true`
);
});

it('initMap vector tile when carring on token', async () => {
const restMapUrl = 'http:/fake:8090/iserver/services/map-mvt-landuse/rest/maps/landuse';
const url = `${restMapUrl}?${tokenQuery}`;
const mapServiceInfo = {
dynamicProjection: false,
prjCoordSys: {
epsgCode: 4326
},
center: {
x: 116,
y: 39
},
bounds: {
top: 90.00000000000001,
left: -180,
bottom: -90.00000000003598,
leftBottom: { x: -180, y: -90.00000000003598 },
right: 180.00000000007202,
rightTop: { x: 180.00000000007202, y: 90.00000000000001 }
}
};
const vectorStyleUrl =
`${restMapUrl}/tileFeature/vectorstyles.json?${tokenQuery}&type=MapBox_GL&styleonly=true&tileURLTemplate=ZXY`;
const WKT =
'GEOGCS["China Geodetic Coordinate System 2000",DATUM["China_2000",SPHEROID["CGCS2000",6378137,298.257222101,AUTHORITY["EPSG","1024"]],AUTHORITY["EPSG","1043"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4490"]]';
spyOn(FetchRequest, 'get').and.callFake((acceptUrl) => {
if (acceptUrl === `${restMapUrl}/prjCoordSys.wkt?${tokenQuery}`) {
return Promise.resolve(new Response(WKT));
}
if (acceptUrl === vectorStyleUrl) {
return Promise.resolve(new Response(JSON.stringify({})));
}
if (acceptUrl === `${restMapUrl}/prjCoordSys/projection/extent.json?${tokenQuery}`) {
return Promise.resolve(
new Response(
JSON.stringify({
top: 2.0037508342789244e7,
left: -2.0037508342789244e7,
bottom: -2.0037508342789244e7,
leftBottom: {
x: -2.0037508342789244e7,
y: -2.0037508342789244e7
},
right: 2.0037508342789244e7,
rightTop: {
x: 2.0037508342789244e7,
y: 2.0037508342789244e7
},
center: [120, 39]
})
)
);
}
return Promise.resolve(new Response(JSON.stringify(mapServiceInfo)));
});
mapboxgl.CRS = function () {
return {
code: mapServiceInfo.prjCoordSys.epsgCode
};
};
mapboxgl.proj4 = function () {
return [0, 0];
};
const resData = await initMap(url, { type: 'vector-tile' });
const map = resData.map;
expect(map).not.toBeUndefined();
expect(map.options.crs.code).toBe(mapServiceInfo.prjCoordSys.epsgCode);
expect(map.options.style).toBe(vectorStyleUrl);
delete mapboxgl.CRS;
delete mapboxgl.proj4;
});
});
76 changes: 76 additions & 0 deletions test/maplibregl/mapping/InitMapSpec.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import maplibregl from 'maplibre-gl';
import mbglmap from '../../tool/mock_maplibregl_map';
import { initMap } from '../../../src/maplibregl/mapping/InitMap';
import { FetchRequest } from '../../../src/common/util/FetchRequest';

describe('maplibregl_InitMap', () => {
let originalTimeout, testDiv;
const tokenQuery = 'token=opbFn8Nl5zUs2xhuCQ..';

beforeEach(() => {
spyOn(maplibregl, 'Map').and.callFake(mbglmap);
testDiv = window.document.createElement('div');
testDiv.setAttribute('id', 'map');
testDiv.style.styleFloat = 'left';
Expand Down Expand Up @@ -218,4 +222,76 @@ describe('maplibregl_InitMap', () => {
done();
});
});

it('initMap raster when carring on token', async () => {
const url = `${GlobeParameter.ChinaURL}?${tokenQuery}`;
const mapServiceInfo = {
dynamicProjection: false,
prjCoordSys: {
epsgCode: 3857
},
bounds: {
top: 20037508.342789087,
left: -20037508.342789248,
bottom: -20037508.34278914,
leftBottom: {
x: -20037508.342789248,
y: -20037508.34278914
},
right: 20037508.342789244,
rightTop: {
x: 20037508.342789244,
y: 20037508.342789087
}
},
center: {
x: -7.450580596923828e-9,
y: -2.60770320892334e-8
}
};
spyOn(FetchRequest, 'get').and.callFake((url) => {
expect(url).toContain(tokenQuery);
return Promise.resolve(new Response(JSON.stringify(mapServiceInfo)));
});
const resData = await initMap(url);
const map = resData.map;
expect(map).not.toBeUndefined();
expect(map.getCenter().toArray()).not.toEqual([mapServiceInfo.center.x, mapServiceInfo.center.y]);
});

it('initMap vector-tile when carring on token', async () => {
const url = `http:/fake:8090/iserver/services/map-mvt-landuse/rest/maps/landuse?${tokenQuery}`;
const mapServiceInfo = {
dynamicProjection: false,
prjCoordSys: {
epsgCode: 3857
},
center: {
x: 12124158.777882982,
y: 2732247.310535573
},
bounds: {
top: 20037508.342789087,
left: -20037508.342789248,
bottom: -20037508.34278914,
leftBottom: {
x: -20037508.342789248,
y: -20037508.34278914
},
right: 20037508.342789244,
rightTop: {
x: 20037508.342789244,
y: 20037508.342789087
}
},
};
spyOn(FetchRequest, 'get').and.callFake((url) => {
expect(url).toContain(tokenQuery);
return Promise.resolve(new Response(JSON.stringify(mapServiceInfo)));
});
const resData = await initMap(url, { type: 'vector-tile' });
const map = resData.map;
expect(map).not.toBeUndefined();
expect(map.getCenter()).not.toEqual([mapServiceInfo.center.x, mapServiceInfo.center.y]);
});
});

0 comments on commit 5c4313b

Please sign in to comment.