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 b58941e commit 5398599
Show file tree
Hide file tree
Showing 4 changed files with 199 additions and 7 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 '@supermap/iclient-common/util/FetchRequest';
import { InitMapServiceBase, isPlaneProjection, getZoom } from '@supermap/iclient-common/iServer/InitMapServiceBase';
import { Util } from '@supermap/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 @@ -204,7 +205,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}`);
}
}
const zoom = getZoom({ scale, dpi, coordUnit }, extent);
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
@@ -1,6 +1,7 @@
import maplibregl from 'maplibre-gl';
import { MapService } from '../services/MapService';
import { InitMapServiceBase, isPlaneProjection, getZoom } from '@supermap/iclient-common/iServer/InitMapServiceBase';
import { Util } from '@supermap/iclient-common/commontypes/Util';
import proj4 from 'proj4';
/**
* @function initMap
Expand Down Expand Up @@ -81,14 +82,14 @@ async function createMapOptions(url, resetServiceInfo, options) {
const mapCenter = center ? proj4('EPSG:3857', 'EPSG:4326', [center.x, center.y]) : [0, 0];
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 rasterExtraInfo = {};
if (sourceType === 'raster') {
const tileSize = 256;
rasterExtraInfo.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}`);
}
const zoom = getZoom({ scale, dpi, coordUnit }, bounds);
return {
Expand Down
119 changes: 118 additions & 1 deletion test/mapboxgl/mapping/InitMapSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@ import mbglmap from '../../tool/mock_mapboxgl_map';
import { initMap } from '../../../src/mapboxgl/mapping/InitMap';
import { FetchRequest } from '../../../src/common/util/FetchRequest';

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

beforeEach(() => {
spyOn(mapboxgl, 'Map').and.callFake(mbglmap);
Expand Down Expand Up @@ -223,4 +224,120 @@ describe('InitMap', () => {
delete mapboxgl.CRS;
delete mapboxgl.proj4;
});

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);
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:3857');
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;
});
});
75 changes: 74 additions & 1 deletion test/maplibregl/mapping/InitMapSpec.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { initMap } from '../../../src/maplibregl/mapping/InitMap';
import { FetchRequest } from '../../../src/common/util/FetchRequest';

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

beforeEach(() => {
testDiv = window.document.createElement('div');
Expand Down Expand Up @@ -163,4 +164,76 @@ describe('InitMap', () => {
expect(map).not.toBeUndefined();
expect(map.getCenter()).not.toEqual([mapServiceInfo.center.x, mapServiceInfo.center.y]);
});

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 5398599

Please sign in to comment.