From 2de4f483354b44af3e566480e67a901ebd1804c0 Mon Sep 17 00:00:00 2001 From: xiongjj Date: Mon, 2 Dec 2024 16:16:33 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90fix=E3=80=91webmapv2=20=E5=BC=95?= =?UTF-8?q?=E5=85=A5xx.supermap.xx;=20review=20by=20qiw?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/commontypes/Util.js | 24 ++++++++++++++++++++++++ src/common/mapping/WebMapV2.js | 10 +++++----- src/mapboxgl/mapping/WebMap.js | 4 +++- src/maplibregl/mapping/WebMap.js | 4 +++- test/mapboxgl/mapping/WebMapV2Spec.js | 7 +++++-- test/maplibregl/mapping/WebMapV2Spec.js | 6 ++++-- 6 files changed, 44 insertions(+), 11 deletions(-) diff --git a/src/common/commontypes/Util.js b/src/common/commontypes/Util.js index c6cc5621e..a11e1a8b3 100644 --- a/src/common/commontypes/Util.js +++ b/src/common/commontypes/Util.js @@ -1086,6 +1086,30 @@ const Util = { } return encodeURIComponent(value); }); + }, + /** + * @description 十六进制转 RGBA 格式。 + * @param {Object} hex - 十六进制格式。 + * @param {number} opacity - 不透明度Alpha。 + * @returns {string} 生成的 RGBA 格式。 + */ + hexToRgba(hex, opacity) { + var color = [], + rgba = []; + hex = hex.replace(/#/, ""); + if (hex.length == 3) { + var tmp = []; + for (let i = 0; i < 3; i++) { + tmp.push(hex.charAt(i) + hex.charAt(i)); + } + hex = tmp.join(""); + } + for (let i = 0; i < 6; i += 2) { + color[i] = "0x" + hex.substr(i, 2); + rgba.push(parseInt(Number(color[i]))); + } + rgba.push(opacity); + return "rgba(" + rgba.join(",") + ")"; } }; diff --git a/src/common/mapping/WebMapV2.js b/src/common/mapping/WebMapV2.js index 375d36636..247fa58c6 100644 --- a/src/common/mapping/WebMapV2.js +++ b/src/common/mapping/WebMapV2.js @@ -17,7 +17,7 @@ const INTERNET_MAP_BOUNDS = { BING: [-180, -90, 180, 90] } -export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) { +export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo, DataFlowService, GraticuleLayer }) { return class WebMapV2 extends SuperClass { constructor( id, @@ -537,7 +537,7 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) { _initGraticuleLayer(graticuleInfo) { const options = this._createGraticuleOptions(graticuleInfo); - const graticuleLayer = new mapRepo.supermap.GraticuleLayer(options); + const graticuleLayer = new GraticuleLayer(options); this._setGraticuleDash(options.strokeStyle, graticuleLayer); this._graticuleLayer = graticuleLayer; this.map.addLayer(graticuleLayer); @@ -950,7 +950,7 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) { } _createDataflowLayer(layerInfo) { - const dataflowService = new mapRepo.supermap.DataFlowService(layerInfo.wsUrl).initSubscribe(); + const dataflowService = new DataFlowService(layerInfo.wsUrl).initSubscribe(); this._handleDataflowFeaturesCallback = this._handleDataflowFeatures.bind(this, layerInfo); this._initDataflowLayerCallback = this._initDataflowLayer.bind(this, layerInfo); dataflowService.on('subscribesucceeded', this._initDataflowLayerCallback); @@ -2179,10 +2179,10 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) { layerOption.gradient.forEach((item, index) => { color.push(step[index]); if (index === 0) { - item = mapRepo.supermap.Util.hexToRgba(item, 0); + item = Util.hexToRgba(item, 0); } if (index === 1) { - item = mapRepo.supermap.Util.hexToRgba(item, 0.5); + item = Util.hexToRgba(item, 0.5); } color.push(item); }); diff --git a/src/mapboxgl/mapping/WebMap.js b/src/mapboxgl/mapping/WebMap.js index a9d022835..03cb934eb 100644 --- a/src/mapboxgl/mapping/WebMap.js +++ b/src/mapboxgl/mapping/WebMap.js @@ -10,6 +10,8 @@ import { featureFilter, expression } from '@mapbox/mapbox-gl-style-spec'; import spec from '@mapbox/mapbox-gl-style-spec/reference/v8'; import { L7Layer, L7 } from '../overlay/L7Layer'; import MapManager from './webmap/MapManager'; +import { DataFlowService } from '../services/DataFlowService'; +import { GraticuleLayer } from '../overlay/GraticuleLayer'; /** * @class WebMap @@ -71,7 +73,7 @@ import MapManager from './webmap/MapManager'; */ export class WebMap extends createWebMapBaseExtending(mapboxgl.Evented, { mapRepo: mapboxgl }) { _createWebMapFactory(type) { - const commonFactoryOptions = { MapManager, mapRepo: mapboxgl, mapRepoName: 'mapbox-gl' }; + const commonFactoryOptions = { MapManager, mapRepo: mapboxgl, mapRepoName: 'mapbox-gl', DataFlowService, GraticuleLayer }; const l7LayerUtil = L7LayerUtil({ featureFilter, expression, spec, L7Layer, L7, proj4: this.options.proj4 }); switch (type) { case 'MapStyle': diff --git a/src/maplibregl/mapping/WebMap.js b/src/maplibregl/mapping/WebMap.js index 1bdf11531..92339ba2e 100644 --- a/src/maplibregl/mapping/WebMap.js +++ b/src/maplibregl/mapping/WebMap.js @@ -10,6 +10,8 @@ import { featureFilter, expression } from '@maplibre/maplibre-gl-style-spec'; import spec from '@maplibre/maplibre-gl-style-spec/src/reference/v8'; import { L7Layer, L7 } from '../overlay/L7Layer'; import MapManager from './webmap/MapManager'; +import { DataFlowService } from '../services/DataFlowService'; +import { GraticuleLayer } from '../overlay/GraticuleLayer'; /** * @class WebMap @@ -71,7 +73,7 @@ import MapManager from './webmap/MapManager'; */ export class WebMap extends createWebMapBaseExtending(maplibregl.Evented, { mapRepo: maplibregl }) { _createWebMapFactory(type) { - const commonFactoryOptions = { MapManager, mapRepo: maplibregl, mapRepoName: 'maplibre-gl' }; + const commonFactoryOptions = { MapManager, mapRepo: maplibregl, mapRepoName: 'maplibre-gl', DataFlowService, GraticuleLayer }; const l7LayerUtil = L7LayerUtil({ featureFilter, expression, spec, L7Layer, L7, proj4: this.options.proj4 }); switch (type) { case 'MapStyle': diff --git a/test/mapboxgl/mapping/WebMapV2Spec.js b/test/mapboxgl/mapping/WebMapV2Spec.js index 993363fe0..58527a235 100644 --- a/test/mapboxgl/mapping/WebMapV2Spec.js +++ b/test/mapboxgl/mapping/WebMapV2Spec.js @@ -4,6 +4,7 @@ import { WebMap } from '../../../src/mapboxgl/mapping/WebMap'; import * as MapManagerUtil from '../../../src/mapboxgl/mapping/webmap/MapManager'; import { ArrayStatistic } from '@supermapgis/iclient-common/util/ArrayStatistic'; import { FetchRequest } from '@supermapgis/iclient-common/util/FetchRequest'; +import * as DataFlowServiceUtil from '../../../src/mapboxgl/services/DataFlowService'; import '../../resources/WebMapV5.js'; function DataFlowService(serviceUrl) { @@ -189,8 +190,10 @@ describe('mapboxgl_WebMapV2', () => { getNorth: () => -1 } }; + var dataFlowServiceSpyTest; beforeEach(() => { spyOn(MapManagerUtil, 'default').and.callFake(mbglmap); + dataFlowServiceSpyTest = spyOn(DataFlowServiceUtil, 'DataFlowService').and.callFake(DataFlowService); mapboxgl.CRS = CRS; commonMap = { style: {}, @@ -344,6 +347,7 @@ describe('mapboxgl_WebMapV2', () => { window.canvg = undefined; window.geostats = undefined; window.EchartsLayer = undefined; + dataFlowServiceSpyTest = null; }); xit('_setCRS', (done) => { @@ -1254,12 +1258,11 @@ describe('mapboxgl_WebMapV2', () => { } return Promise.resolve(); }); - const spyTest = spyOn(mapboxgl.supermap, 'DataFlowService').and.callFake(DataFlowService); datavizWebmap = new WebMap(dataflowLayer, { ...commonOption, map: commonMap }, undefined); const callback = function (data) { if (data.allLoaded) { const appreciableLayers = datavizWebmap.getLayers(); - expect(spyTest.calls.count()).toBe(dataflowLayer.layers.length); + expect(dataFlowServiceSpyTest.calls.count()).toBe(dataflowLayer.layers.length); expect(appreciableLayers.length).toBe(dataflowLayer.layers.length + 1); const updateLayer = { ...dataflowLayer.layers[2], id: appreciableLayers[3].renderLayers[0] }; datavizWebmap.updateOverlayLayer(updateLayer); diff --git a/test/maplibregl/mapping/WebMapV2Spec.js b/test/maplibregl/mapping/WebMapV2Spec.js index 2ebd804fb..7391045a2 100644 --- a/test/maplibregl/mapping/WebMapV2Spec.js +++ b/test/maplibregl/mapping/WebMapV2Spec.js @@ -4,6 +4,7 @@ import { WebMap } from '../../../src/maplibregl/mapping/WebMap'; import * as MapManagerUtil from '../../../src/maplibregl/mapping/webmap/MapManager'; import { ArrayStatistic } from '@supermapgis/iclient-common/util/ArrayStatistic'; import { FetchRequest } from '@supermapgis/iclient-common/util/FetchRequest'; +import * as DataFlowServiceUtil from '../../../src/maplibregl/services/DataFlowService'; import '../../resources/WebMapV5.js'; function DataFlowService(serviceUrl) { @@ -189,8 +190,10 @@ describe('maplibregl_WebMapV2', () => { getNorth: () => -1 } }; + var dataFlowServiceSpyTest; beforeEach(() => { spyOn(MapManagerUtil, 'default').and.callFake(mbglmap); + dataFlowServiceSpyTest = spyOn(DataFlowServiceUtil, 'DataFlowService').and.callFake(DataFlowService); maplibregl.CRS = CRS; commonMap = { style: {}, @@ -1193,12 +1196,11 @@ describe('maplibregl_WebMapV2', () => { } return Promise.resolve(); }); - const spyTest = spyOn(maplibregl.supermap, 'DataFlowService').and.callFake(DataFlowService); datavizWebmap = new WebMap(dataflowLayer, { ...commonOption, map: commonMap }, undefined); const callback = function (data) { if (data.allLoaded) { const appreciableLayers = datavizWebmap.getLayers(); - expect(spyTest.calls.count()).toBe(dataflowLayer.layers.length); + expect(dataFlowServiceSpyTest.calls.count()).toBe(dataflowLayer.layers.length); expect(appreciableLayers.length).toBe(dataflowLayer.layers.length + 1); const updateLayer = { ...dataflowLayer.layers[2], id: appreciableLayers[3].renderLayers[0] }; datavizWebmap.updateOverlayLayer(updateLayer);