diff --git a/src/mapboxgl/mapping/InitMap.js b/src/mapboxgl/mapping/InitMap.js index 5b190c3a4..e15004031 100644 --- a/src/mapboxgl/mapping/InitMap.js +++ b/src/mapboxgl/mapping/InitMap.js @@ -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'; /** @@ -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) { @@ -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 = {}; @@ -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) { diff --git a/src/maplibregl/mapping/InitMap.js b/src/maplibregl/mapping/InitMap.js index 2d5e4b301..875aee78d 100644 --- a/src/maplibregl/mapping/InitMap.js +++ b/src/maplibregl/mapping/InitMap.js @@ -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 @@ -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 = {}; @@ -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) { diff --git a/test/mapboxgl/mapping/InitMapSpec.js b/test/mapboxgl/mapping/InitMapSpec.js index 5ff8ad4f7..934469004 100644 --- a/test/mapboxgl/mapping/InitMapSpec.js +++ b/test/mapboxgl/mapping/InitMapSpec.js @@ -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); @@ -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; + }); }); diff --git a/test/maplibregl/mapping/InitMapSpec.js b/test/maplibregl/mapping/InitMapSpec.js index ef14c92ec..afe333fdb 100644 --- a/test/maplibregl/mapping/InitMapSpec.js +++ b/test/maplibregl/mapping/InitMapSpec.js @@ -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'; @@ -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]); + }); });