Skip to content

Commit d483261

Browse files
xiongjiaojiaoxiongjiaojiao
committed
【feature】webmap3.0 钻取过滤优化
1 parent 0a8e5ef commit d483261

File tree

3 files changed

+73
-129
lines changed

3 files changed

+73
-129
lines changed

‎src/mapboxgl/mapping/webmap/v3/WebMap.js

Lines changed: 46 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,6 @@ export class WebMap extends mapboxgl.Evented {
147147
* @param {Object} map - map 实例。
148148
*/
149149
initializeMap(mapInfo, map) {
150-
mapInfo = this._handleUnSupportedLayers(mapInfo);
151150
this._mapInfo = mapInfo;
152151
const proj = this._setBaseProjection();
153152
if (!proj) {
@@ -362,7 +361,10 @@ export class WebMap extends mapboxgl.Evented {
362361
* @param {Object} mapInfo - map 信息。
363362
*/
364363
_setUniqueId(style, projectInfo) {
365-
const layersToMap = JSON.parse(JSON.stringify(style.layers));
364+
const unspportedLayers = this._handleUnSupportedLayers(style);
365+
const layersToMap = JSON.parse(JSON.stringify(style.layers)).filter((layer) => {
366+
return !unspportedLayers.includes(layer.id);
367+
});
366368
const nextSources = {};
367369
const layerIdToChange = [];
368370
const timestamp = `_${+new Date()}`;
@@ -387,13 +389,20 @@ export class WebMap extends mapboxgl.Evented {
387389
layerIdToChange.push({ originId: originId, renderId: layer.id });
388390
}
389391
const layerCatalogFromMapJson = JSON.parse(JSON.stringify(style.metadata.layerCatalog), 'parts');
390-
this._updateLayerCatalogsId({ catalogs: layerCatalogFromMapJson, layerIdMapList: layerIdToChange });
392+
this._updateLayerCatalogsId({
393+
loopData: JSON.parse(JSON.stringify(layerCatalogFromMapJson)),
394+
catalogs: layerCatalogFromMapJson,
395+
layerIdMapList: layerIdToChange,
396+
unspportedLayers
397+
});
391398
const catalogsFromProjectInfo = JSON.parse(JSON.stringify(projectInfo.catalogs || []));
392399
this._updateLayerCatalogsId({
400+
loopData: JSON.parse(JSON.stringify(catalogsFromProjectInfo)),
393401
catalogs: catalogsFromProjectInfo,
394402
layerIdMapList: layerIdToChange,
395403
catalogTypeField: 'catalogType',
396-
layerIdsField: 'layersContent'
404+
layerIdsField: 'layersContent',
405+
unspportedLayers
397406
});
398407
return {
399408
sources: nextSources,
@@ -403,11 +412,31 @@ export class WebMap extends mapboxgl.Evented {
403412
};
404413
}
405414

406-
_updateLayerCatalogsId({ catalogs, layerIdMapList, catalogTypeField = 'type', layerIdsField = 'parts' }) {
407-
catalogs.forEach((catalog, index) => {
415+
_deleteLayerCatalog(catalogs, id) {
416+
for (let index = 0; index < catalogs.length; index++) {
417+
const catalog = catalogs[index];
418+
if (catalog.id === id) {
419+
catalogs.splice(index, 1);
420+
break;
421+
}
422+
if (catalog.children) {
423+
this._deleteLayerCatalog(catalog.children, id);
424+
}
425+
}
426+
}
427+
428+
_updateLayerCatalogsId({ loopData, catalogs, layerIdMapList, catalogTypeField = 'type', layerIdsField = 'parts', unspportedLayers }) {
429+
loopData.forEach((catalog) => {
408430
const { id, children } = catalog;
409431
if (catalog[catalogTypeField] === 'group') {
410-
this._updateLayerCatalogsId({ catalogs: children, layerIdMapList, catalogTypeField, layerIdsField });
432+
this._updateLayerCatalogsId({
433+
loopData: children,
434+
catalogs,
435+
layerIdMapList,
436+
catalogTypeField,
437+
layerIdsField,
438+
unspportedLayers
439+
});
411440
return;
412441
}
413442
const matchLayer = layerIdMapList.find((item) => item.originId === id);
@@ -416,8 +445,10 @@ export class WebMap extends mapboxgl.Evented {
416445
if (catalog[layerIdsField]) {
417446
catalog[layerIdsField] = this._renameLayerIdsContent(catalog[layerIdsField], layerIdMapList);
418447
}
419-
} else {
420-
catalogs.splice(index, 1);
448+
return;
449+
}
450+
if (unspportedLayers.includes(id)) {
451+
this._deleteLayerCatalog(catalogs, id);
421452
}
422453
});
423454
}
@@ -454,9 +485,9 @@ export class WebMap extends mapboxgl.Evented {
454485
clean() {
455486
if (this.map) {
456487
const scene = this.map.$l7scene;
457-
if (scene) {
458-
scene.removeAllLayer();
459-
}
488+
if (scene) {
489+
scene.removeAllLayer();
490+
}
460491
this.map.remove();
461492
this.map = null;
462493
this._legendList = [];
@@ -495,7 +526,7 @@ export class WebMap extends mapboxgl.Evented {
495526
}
496527
const layersOnMap = this.map.getStyle().layers.map((layer) => {
497528
const nextLayer = this.map.getLayer(layer.id);
498-
return { ...nextLayer, layout: Object.assign({}, layer.layout, nextLayer.layout) }
529+
return { ...nextLayer, layout: Object.assign({}, layer.layout, nextLayer.layout) };
499530
});
500531
for (const layerId in this.map.overlayLayersManager) {
501532
const overlayLayer = this.map.overlayLayersManager[layerId];
@@ -1355,16 +1386,13 @@ export class WebMap extends mapboxgl.Evented {
13551386
_handleUnSupportedLayers(mapInfo) {
13561387
const filterLayerIds = [];
13571388
const unSupportedMsg = 'layer are not supported yet';
1358-
const { layers, interaction } = mapInfo;
1389+
const { interaction } = mapInfo;
13591390
if (interaction && interaction.drill) {
13601391
this.fire('getlayersfailed', { error: `drill ${unSupportedMsg}` });
13611392
interaction.drill.forEach((drillItem) => {
13621393
filterLayerIds.push(...drillItem.layerIds);
13631394
});
13641395
}
1365-
mapInfo.layers = layers.filter((layer) => {
1366-
return !filterLayerIds.includes(layer.id);
1367-
});
1368-
return mapInfo;
1396+
return filterLayerIds;
13691397
}
13701398
}

‎test/mapboxgl/mapping/WebMapV3Spec.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -370,20 +370,28 @@ describe('mapboxgl-webmap3.0', () => {
370370
});
371371
});
372372

373-
it('filter l7 and drill test', (done) => {
373+
it('filter drill test', (done) => {
374374
spyOn(FetchRequest, 'get').and.callFake((url) => {
375375
if (url.indexOf('/sprite') > -1) {
376376
return Promise.resolve(new Response(msSpriteInfo));
377377
}
378378
return Promise.resolve();
379379
});
380-
const mapInfo = JSON.parse(mapstudioWebMap_l7_and_drill);
380+
const mapInfo = JSON.parse(mapstudioWebMap_drill);
381+
const originMapInfo = JSON.parse(mapstudioWebMap_drill);
381382
const mapstudioWebmap = new WebMapV3(mapInfo, {
382383
server: server,
383384
target: 'map'
384385
});
385386
mapstudioWebmap.on('getlayersfailed', ({ error }) => {
386387
expect(['drill'].indexOf(error.split(' ')[0]) > -1).toBeTruthy();
388+
});
389+
mapstudioWebmap.on('addlayerssucceeded', ({ map }) => {
390+
const style = map.getStyle();
391+
expect(style.layers.length).toBeLessThan(originMapInfo.layers.length);
392+
expect(style.layers.length).toBe(mapInfo.layers.length);
393+
expect(mapstudioWebmap.getAppreciableLayers().length).toBe(1);
394+
expect(mapstudioWebmap.getLayerCatalog().length).toBe(1);
387395
done();
388396
});
389397
mapstudioWebmap.initializeMap(mapInfo);

‎test/resources/WebMapV3.js

Lines changed: 17 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -753,7 +753,7 @@ var mapstudioWebMap_symbol = JSON.stringify({
753753
minzoom: 0
754754
});
755755

756-
var mapstudioWebMap_l7_and_drill = JSON.stringify({
756+
var mapstudioWebMap_drill = JSON.stringify({
757757
metadata: {
758758
layerCatalog: [
759759
{
@@ -764,7 +764,7 @@ var mapstudioWebMap_l7_and_drill = JSON.stringify({
764764
},
765765
{
766766
visible: true,
767-
parts: ['ms_administrative_center_text'],
767+
parts: ['ms_administrative_polygon', 'ms_administrative_center_text'],
768768
id: 'ms_administrative_polygon',
769769
title: '中华人民共和国行政区划',
770770
type: 'composite'
@@ -777,123 +777,55 @@ var mapstudioWebMap_l7_and_drill = JSON.stringify({
777777
},
778778
{
779779
visible: true,
780-
id: '全球疫情累计数据',
781-
title: '全球疫情累计数据',
782-
type: 'basic'
783-
},
784-
{
785-
visible: true,
786-
id: 'ms_全球疫情累计数据_1714384292309_23',
787-
title: '全球疫情累计数据',
788-
type: 'basic'
789-
},
790-
{
791-
visible: true,
792-
id: 'ms_全球疫情累计数据_1714384276380_19',
793-
title: '全球疫情累计数据',
794-
type: 'basic'
795-
},
796-
{
797-
visible: true,
798-
id: 'ms_全球疫情累计数据_1714384211042_15',
799-
title: '全球疫情累计数据',
800-
type: 'basic'
801-
},
802-
{
803-
visible: true,
804-
id: 'ms_全球疫情累计数据_1714384188551_11',
805-
title: '全球疫情累计数据',
780+
id: 'ms-background',
781+
title: '纯色底图',
806782
type: 'basic'
807783
}
808784
]
809785
},
810786
sources: {
811-
ms_1567920342_1714384276380_20: {
812-
tiles: [
813-
'http://172.16.15.206:8190/iportal/services/../web/datas/1567920342/structureddata/tiles/{z}/{x}/{y}.mvt?epsgCode=3857&returnedFieldNames=%5B%22smpid%22%2C%22confirmedIncrement%22%2C%22Center_Y%22%2C%22Center_X%22%2C%22UserID%22%2C%22Country%22%2C%22index%22%2C%22confirmed%22%5D&geometryFieldName=geometry'
814-
],
815-
bounds: [-110.4475729945999, -76.60271072387695, 179.1861874739621, 78.31456756591797],
816-
type: 'vector'
817-
},
818-
ms_1567920342_1714384292309_24: {
819-
tiles: [
820-
'http://172.16.15.206:8190/iportal/services/../web/datas/1567920342/structureddata/tiles/{z}/{x}/{y}.mvt?epsgCode=3857&returnedFieldNames=%5B%22smpid%22%2C%22confirmedIncrement%22%2C%22Center_Y%22%2C%22Center_X%22%2C%22UserID%22%2C%22Country%22%2C%22index%22%2C%22confirmed%22%2C%22geometry%22%5D&geometryFieldName=geometry'
821-
],
822-
bounds: [-110.4475729945999, -76.60271072387695, 179.1861874739621, 78.31456756591797],
823-
type: 'vector'
824-
},
825-
CHINA_DARK: {
826-
tiles: [
827-
'https://maptiles.supermapol.com/iserver/services/map_China/rest/maps/China_Dark/tileimage.png?scale={scale}&x={x}&y={y}&width={width}&height={height}&transparent=true&redirect=false&cacheEnabled=true'
828-
],
829-
tileSize: 256,
830-
attribution: '',
831-
bounds: [-180, -90, 180, 90],
832-
type: 'raster'
833-
},
834-
ms_1567920342_1714384123649_10: {
835-
data: {
836-
dataId: '1567920342',
837-
type: 'supermap-structured-data'
838-
},
839-
type: 'geojson'
840-
},
841-
ms_1567920342_1714384188552_12: {
842-
data: {
843-
dataId: '1567920342',
844-
type: 'supermap-structured-data'
845-
},
846-
type: 'geojson'
847-
},
848-
ms_1567920342_1714384211042_16: {
849-
tiles: [
850-
'http://172.16.15.206:8190/iportal/services/../web/datas/1567920342/structureddata/tiles/{z}/{x}/{y}.mvt?epsgCode=3857&returnedFieldNames=%5B%22smpid%22%2C%22confirmedIncrement%22%2C%22Center_Y%22%2C%22Center_X%22%2C%22UserID%22%2C%22Country%22%2C%22index%22%2C%22confirmed%22%2C%22geometry%22%5D&geometryFieldName=geometry'
851-
],
852-
bounds: [-110.4475729945999, -76.60271072387695, 179.1861874739621, 78.31456756591797],
853-
type: 'vector'
854-
},
855787
'ms_administrative_buffer_source_province_{adcode}': {
856-
data: 'http://172.16.15.206:8190/iportal/services/../administrativeDivisions/line/{adcode}.pbf',
788+
data: 'http://localhost:8190/iportal/administrativeDivisions/line/{adcode}.pbf',
857789
attribution: '本页面数据来源于高德开放平台<br>该版本数据更新于2021.5, 仅供学习交流使用。',
858790
type: 'geojson'
859791
},
860792
'ms_administrative_polygon_source_city_{adcode}': {
861-
data: 'http://172.16.15.206:8190/iportal/services/../administrativeDivisions/polygon/{adcode}.pbf',
793+
data: 'http://localhost:8190/iportal/administrativeDivisions/polygon/{adcode}.pbf',
862794
attribution: '本页面数据来源于高德开放平台<br>该版本数据更新于2021.5, 仅供学习交流使用。',
863795
type: 'geojson'
864796
},
865797
'ms_administrative_center_source_city_{adcode}': {
866-
data: 'http://172.16.15.206:8190/iportal/services/../administrativeDivisions/point/{adcode}.pbf',
798+
data: 'http://localhost:8190/iportal/administrativeDivisions/point/{adcode}.pbf',
867799
attribution: '本页面数据来源于高德开放平台<br>该版本数据更新于2021.5, 仅供学习交流使用。',
868800
type: 'geojson'
869801
},
870802
'ms_administrative_buffer_source_city_{adcode}': {
871-
data: 'http://172.16.15.206:8190/iportal/services/../administrativeDivisions/line/{adcode}.pbf',
803+
data: 'http://localhost:8190/iportal/administrativeDivisions/line/{adcode}.pbf',
872804
attribution: '本页面数据来源于高德开放平台<br>该版本数据更新于2021.5, 仅供学习交流使用。',
873805
type: 'geojson'
874806
},
875807
'ms_administrative_polygon_source_china_{adcode}': {
876-
data: 'http://172.16.15.206:8190/iportal/services/../administrativeDivisions/polygon/{adcode}.pbf',
808+
data: 'http://localhost:8190/iportal/administrativeDivisions/polygon/{adcode}.pbf',
877809
attribution: '本页面数据来源于高德开放平台<br>该版本数据更新于2021.5, 仅供学习交流使用。',
878810
type: 'geojson'
879811
},
880812
'ms_administrative_polygon_source_province_{adcode}': {
881-
data: 'http://172.16.15.206:8190/iportal/services/../administrativeDivisions/polygon/{adcode}.pbf',
813+
data: 'http://localhost:8190/iportal/administrativeDivisions/polygon/{adcode}.pbf',
882814
attribution: '本页面数据来源于高德开放平台<br>该版本数据更新于2021.5, 仅供学习交流使用。',
883815
type: 'geojson'
884816
},
885817
'ms_administrative_center_source_china_{adcode}': {
886-
data: 'http://172.16.15.206:8190/iportal/services/../administrativeDivisions/point/{adcode}.pbf',
818+
data: 'http://localhost:8190/iportal/administrativeDivisions/point/{adcode}.pbf',
887819
attribution: '本页面数据来源于高德开放平台<br>该版本数据更新于2021.5, 仅供学习交流使用。',
888820
type: 'geojson'
889821
},
890822
'ms_administrative_center_source_province_{adcode}': {
891-
data: 'http://172.16.15.206:8190/iportal/services/../administrativeDivisions/point/{adcode}.pbf',
823+
data: 'http://localhost:8190/iportal/administrativeDivisions/point/{adcode}.pbf',
892824
attribution: '本页面数据来源于高德开放平台<br>该版本数据更新于2021.5, 仅供学习交流使用。',
893825
type: 'geojson'
894826
},
895827
'ms_administrative_buffer_source_china_{adcode}': {
896-
data: 'http://172.16.15.206:8190/iportal/services/../administrativeDivisions/line/{adcode}.pbf',
828+
data: 'http://localhost:8190/iportal/administrativeDivisions/line/{adcode}.pbf',
897829
attribution: '本页面数据来源于高德开放平台<br>该版本数据更新于2021.5, 仅供学习交流使用。',
898830
type: 'geojson'
899831
}
@@ -903,35 +835,11 @@ var mapstudioWebMap_l7_and_drill = JSON.stringify({
903835
zoom: 4.0265953802940615,
904836
glyphs: {},
905837
version: '3.1.5',
906-
rootUrl: 'http://172.16.15.206:8190/iportal/',
838+
rootUrl: 'http://localhost:8190/iportal/',
907839
maxzoom: 12,
908840
name: '无标题地图',
909841
viewExtent: [-159.0499172798419, 78.23875449814814, 131.0072808340209, 12.738503516389864],
910842
layers: [
911-
{
912-
metadata: {},
913-
maxzoom: 12,
914-
id: 'CHINA_DARK',
915-
source: 'CHINA_DARK',
916-
type: 'raster',
917-
minzoom: 0
918-
},
919-
{
920-
metadata: {},
921-
maxzoom: 24,
922-
paint: {
923-
'circle-color': '#EE4D5A',
924-
'circle-opacity': 0.9,
925-
'circle-translate-anchor': 'map',
926-
'circle-radius': 4,
927-
'circle-translate': [0, 0]
928-
},
929-
id: 'ms_全球疫情累计数据_1714384276380_19',
930-
source: 'ms_1567920342_1714384276380_20',
931-
'source-layer': '1567920342$geometry',
932-
type: 'circle',
933-
minzoom: 0
934-
},
935843
{
936844
metadata: {},
937845
paint: {
@@ -1213,7 +1121,7 @@ var mapstudioWebMap_L7Layers = JSON.stringify({
12131121
sources: {
12141122
ms_1767084124_1715758105128_1775: {
12151123
tiles: [
1216-
'http://172.16.15.94:8080/iportal/web/datas/1767084124/structureddata/tiles/{z}/{x}/{y}.mvt?epsgCode=3857&returnedFieldNames=%5B%22smpid%22%2C%221111%E6%A0%87%E5%87%86%E5%90%8D%E7%A7%B0%22%2C%22SmID%22%2C%22SmGeometrySize%22%2C%221111SmUserID%22%2C%22SmY%22%2C%22SmGeoPosition%22%2C%22SmX%22%2C%22SmLibTileID%22%5D&geometryFieldName=geometry'
1124+
'http://localhost:8190/iportal/web/datas/1767084124/structureddata/tiles/{z}/{x}/{y}.mvt?epsgCode=3857&returnedFieldNames=%5B%22smpid%22%2C%221111%E6%A0%87%E5%87%86%E5%90%8D%E7%A7%B0%22%2C%22SmID%22%2C%22SmGeometrySize%22%2C%221111SmUserID%22%2C%22SmY%22%2C%22SmGeoPosition%22%2C%22SmX%22%2C%22SmLibTileID%22%5D&geometryFieldName=geometry'
12171125
],
12181126
bounds: [116.36331703990744, 39.89942692791154, 116.38141290077355, 39.9767738835847],
12191127
type: 'vector'
@@ -1236,7 +1144,7 @@ var mapstudioWebMap_L7Layers = JSON.stringify({
12361144
},
12371145
ms_1767084124_1715739556572_702: {
12381146
tiles: [
1239-
'http://172.16.15.94:8080/iportal/web/datas/1767084124/structureddata/tiles/{z}/{x}/{y}.mvt?epsgCode=3857&returnedFieldNames=%5B%22smpid%22%2C%221111%E6%A0%87%E5%87%86%E5%90%8D%E7%A7%B0%22%2C%22SmID%22%2C%22SmGeometrySize%22%2C%221111SmUserID%22%2C%22SmY%22%2C%22SmGeoPosition%22%2C%22SmX%22%2C%22SmLibTileID%22%5D&geometryFieldName=geometry'
1147+
'http://localhost:8190/iportal/web/datas/1767084124/structureddata/tiles/{z}/{x}/{y}.mvt?epsgCode=3857&returnedFieldNames=%5B%22smpid%22%2C%221111%E6%A0%87%E5%87%86%E5%90%8D%E7%A7%B0%22%2C%22SmID%22%2C%22SmGeometrySize%22%2C%221111SmUserID%22%2C%22SmY%22%2C%22SmGeoPosition%22%2C%22SmX%22%2C%22SmLibTileID%22%5D&geometryFieldName=geometry'
12401148
],
12411149
bounds: [116.36331703990744, 39.89942692791154, 116.38141290077355, 39.9767738835847],
12421150
type: 'vector'
@@ -1250,7 +1158,7 @@ var mapstudioWebMap_L7Layers = JSON.stringify({
12501158
},
12511159
ms_1767084124_1715739627423_910: {
12521160
tiles: [
1253-
'http://172.16.15.94:8080/iportal/web/datas/1767084124/structureddata/tiles/{z}/{x}/{y}.mvt?epsgCode=3857&returnedFieldNames=%5B%22smpid%22%2C%221111%E6%A0%87%E5%87%86%E5%90%8D%E7%A7%B0%22%2C%22SmID%22%2C%22SmGeometrySize%22%2C%221111SmUserID%22%2C%22SmY%22%2C%22SmGeoPosition%22%2C%22SmX%22%2C%22SmLibTileID%22%5D&geometryFieldName=geometry'
1161+
'http://localhost:8190/iportal/web/datas/1767084124/structureddata/tiles/{z}/{x}/{y}.mvt?epsgCode=3857&returnedFieldNames=%5B%22smpid%22%2C%221111%E6%A0%87%E5%87%86%E5%90%8D%E7%A7%B0%22%2C%22SmID%22%2C%22SmGeometrySize%22%2C%221111SmUserID%22%2C%22SmY%22%2C%22SmGeoPosition%22%2C%22SmX%22%2C%22SmLibTileID%22%5D&geometryFieldName=geometry'
12541162
],
12551163
bounds: [116.36331703990744, 39.89942692791154, 116.38141290077355, 39.9767738835847],
12561164
type: 'vector'

0 commit comments

Comments
 (0)