From 5398599e4f11996815d48326c5b43f51420666c9 Mon Sep 17 00:00:00 2001 From: xiongjj Date: Fri, 18 Oct 2024 15:56:22 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90fix=E3=80=91mapboxgl=20maplibregl=20in?= =?UTF-8?q?itmap=20=E6=94=AF=E6=8C=81=E5=B8=A6token=E7=9A=84url;=20review?= =?UTF-8?q?=20by=20qiw?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mapboxgl/mapping/InitMap.js | 7 +- src/maplibregl/mapping/InitMap.js | 5 +- test/mapboxgl/mapping/InitMapSpec.js | 119 ++++++++++++++++++++++++- test/maplibregl/mapping/InitMapSpec.js | 75 +++++++++++++++- 4 files changed, 199 insertions(+), 7 deletions(-) diff --git a/src/mapboxgl/mapping/InitMap.js b/src/mapboxgl/mapping/InitMap.js index a75be6c79..26f7fae71 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 '@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'; /** @@ -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 = {}; @@ -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); diff --git a/src/maplibregl/mapping/InitMap.js b/src/maplibregl/mapping/InitMap.js index 47e4ee5e8..26c7f661f 100644 --- a/src/maplibregl/mapping/InitMap.js +++ b/src/maplibregl/mapping/InitMap.js @@ -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 @@ -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 { diff --git a/test/mapboxgl/mapping/InitMapSpec.js b/test/mapboxgl/mapping/InitMapSpec.js index 68ea11fc5..6b4c11e41 100644 --- a/test/mapboxgl/mapping/InitMapSpec.js +++ b/test/mapboxgl/mapping/InitMapSpec.js @@ -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); @@ -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; + }); }); diff --git a/test/maplibregl/mapping/InitMapSpec.js b/test/maplibregl/mapping/InitMapSpec.js index 3f69ae79e..a55d21ff3 100644 --- a/test/maplibregl/mapping/InitMapSpec.js +++ b/test/maplibregl/mapping/InitMapSpec.js @@ -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'); @@ -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]); + }); });