Skip to content

Commit ca6e25c

Browse files
chenxianhuiichenxianhuii
committed
Fix 图例问题
1 parent 08c3d89 commit ca6e25c

3 files changed

Lines changed: 467 additions & 18 deletions

File tree

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

Lines changed: 112 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,23 @@ const SymbolType = {
117117
polygon: 'polygon'
118118
};
119119

120+
const MAP_LAYER_TYPE_2_SYMBOL_TYPE = {
121+
circle: 'point',
122+
line: 'line',
123+
symbol: 'point',
124+
fill: 'polygon',
125+
'fill-extrusion': 'polygon',
126+
heatmap: 'point',
127+
// background: 'background',//无此符号类型
128+
// L7
129+
radar: 'point',
130+
'point-extrusion': 'point',
131+
'heatmap-extrusion': 'point',
132+
'line-extrusion': 'line',
133+
'line-curve': 'line',
134+
'line-curve-extrusion': 'line'
135+
};
136+
120137
const LEGEND_LINE_WIDTH = 100;
121138
const LINE_WIDTH_KEY = 'line-width';
122139

@@ -362,6 +379,7 @@ export class WebMap extends mapboxgl.Evented {
362379
this._sendMapToUser();
363380
} catch (error) {
364381
this.fire('getlayersfailed', { error, map: this.map });
382+
console.error(error);
365383
}
366384
}
367385

@@ -936,6 +954,70 @@ export class WebMap extends mapboxgl.Evented {
936954
}
937955
}
938956

957+
/**
958+
* 1) 无数据驱动时；
959+
* 2) 只有一个颜色数据驱动，且性线数据驱动时
960+
* 以上两种情况图例中需要单独的显示符号项
961+
* @returns
962+
*/
963+
_isShowLegendSingleItem(dataKeys, isLinearColor) {
964+
return dataKeys.length === 0 || (dataKeys.length === 1 && dataKeys[0] === 'color' && isLinearColor);
965+
}
966+
967+
_isWebsymbolById(id){
968+
const a = ['line-', 'polygon-', 'point-'];
969+
return a.some((el) => id?.startsWith(el));
970+
}
971+
972+
/**
973+
* 获取icon-image 的sdf状态
974+
* 目前webSymbol为false， 基本符号为true， 雪碧图从json中获取sdf的状态
975+
* @param id
976+
* @param spriteJson
977+
* @returns
978+
*/
979+
_getSymbolSDFStatus(id, spriteJson) {
980+
if (this._isWebsymbolById(id)) {
981+
return false;
982+
}
983+
if (this._getIconById(id)) {
984+
return true;
985+
}
986+
return spriteJson?.[id]?.sdf || false;
987+
}
988+
989+
_isAllPicturePoint(symbolsContent, spriteJson) {
990+
if (!symbolsContent) {
991+
return false;
992+
}
993+
if (symbolsContent.type === 'simple') {
994+
return !this._getSymbolSDFStatus(symbolsContent?.value.symbolId, spriteJson);
995+
} else {
996+
return [...symbolsContent?.values, { value: symbolsContent?.defaultValue }]
997+
.filter((v) => v.value.symbolId)
998+
.every((v) => {
999+
return !this._getSymbolSDFStatus(v.value.symbolId, spriteJson);
1000+
});
1001+
}
1002+
}
1003+
1004+
_isAllPictureSymbolSaved(symbolType, symbolsContent, spriteJson) {
1005+
if (symbolType === 'point') {
1006+
return this._isAllPicturePoint(symbolsContent, spriteJson);
1007+
}
1008+
if (!symbolsContent || !symbolsContent.value) {
1009+
return false;
1010+
}
1011+
const currentType = symbolsContent.type;
1012+
if (currentType === 'simple') {
1013+
return !!this._getImageIdFromValue(symbolsContent?.value?.style, SymbolType[symbolType]).length;
1014+
}
1015+
const styles = (symbolsContent.values).map((v) => v.value).concat(symbolsContent.defaultValue);
1016+
return styles.every((v) => {
1017+
return !!this._getImageIdFromValue(v.style, SymbolType[symbolType]).length;
1018+
});
1019+
}
1020+
9391021
_createLayerLegendList(layer, styleSetting) {
9401022
const layerId = layer.id;
9411023
const layerTitle = layer.title;
@@ -976,25 +1058,20 @@ export class WebMap extends mapboxgl.Evented {
9761058
this._transStyleSetting(renderType, styleSetting);
9771059
const simpleStyle = this._getLegendSimpleStyle(styleSetting, keys);
9781060
const simpleResData = this._parseLegendtyle({ legendRenderType, customValue: simpleStyle });
979-
const dataKeys = keys.filter((k) => styleSetting[k] && styleSetting[k].type !== 'simple');
980-
if (!dataKeys.length) {
981-
return [
982-
{
983-
...commonStyleOptions,
984-
styleGroup: [
985-
{
986-
fieldValue: layerTitle || layerId,
987-
style: {
988-
...simpleResData,
989-
shape
990-
}
991-
}
992-
]
993-
}
994-
];
1061+
let dataKeys = keys.filter((k) => styleSetting[k] && styleSetting[k].type !== 'simple');
1062+
// isReplaceLineColor: 3D线,动画线:使用符号替换线颜色，图例中将不再显示线颜色
1063+
const isReplaceLineColor = styleSetting.textureBlend?.value === 'replace';
1064+
const hasTexture = !!styleSetting.symbolsContent?.value?.symbolId;
1065+
// isAllPic: 如果符号为图片，图例中将不再显示颜色
1066+
const symbolTypes = MAP_LAYER_TYPE_2_SYMBOL_TYPE[layer.type];
1067+
const isAllPic = this._isAllPictureSymbolSaved(symbolTypes, styleSetting.symbolsContent, this._spriteDatas);
1068+
if((isReplaceLineColor && hasTexture) || isAllPic) {
1069+
dataKeys = dataKeys.filter((key) => key !== 'color')
9951070
}
1071+
const isLinearColor = styleSetting.color?.interpolateInfo?.type === 'linear';
1072+
const isShowSingleItem = this._isShowLegendSingleItem(dataKeys, isLinearColor);
9961073
const resultList = [];
997-
if (!dataKeys.includes('symbolsContent')) {
1074+
if (isShowSingleItem) {
9981075
resultList.push({
9991076
...commonStyleOptions,
10001077
styleGroup: [
@@ -1275,6 +1352,24 @@ export class WebMap extends mapboxgl.Evented {
12751352
return BaseIcons.find((icon) => icon.id === id);
12761353
}
12771354

1355+
_getImageIdFromValue(style, type){
1356+
const imageKeys = {
1357+
symbol: 'icon-image',
1358+
line: 'line-pattern',
1359+
fill: 'fill-pattern',
1360+
'fill-extrusion': 'fill-pattern'
1361+
};
1362+
const styles = Array.isArray(style) ? style : [style];
1363+
const imageKey = imageKeys[type];
1364+
if (type === 'symbol') {
1365+
const imageIds = styles.map((item) => item.layout?.[imageKey]);
1366+
return imageIds.filter((id) => id);
1367+
}
1368+
// 'line' 'fill' 'fill-extrusion'
1369+
const imageIds = styles.map((item) => item.paint?.[imageKey]);
1370+
return imageIds.filter((id) => id);
1371+
}
1372+
12781373
_getImageIdByLegendType(symbol, legendType) {
12791374
const symbolTypes = {
12801375
ANIMATELINE: SymbolType.point,

‎test/mapboxgl/mapping/WebMapV3Spec.js‎

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -508,7 +508,7 @@ describe('mapboxgl-webmap3.0', () => {
508508
const appreciableLayers = webmapInstance.getAppreciableLayers();
509509
const layerCatalogs = webmapInstance.getLayerCatalog();
510510
expect(layerCatalogs.length).toBeLessThanOrEqual(appreciableLayers.length);
511-
expect(webmapInstance.getLegendInfo().length).toBe(11);
511+
expect(webmapInstance.getLegendInfo().length).toBe(8);
512512
expect(mapOptions.transformRequest.calls.count()).toBeGreaterThan(0);
513513
delete mapboxgl.Map.prototype.getCRS;
514514
delete mapboxgl.CRS;
@@ -619,4 +619,53 @@ describe('mapboxgl-webmap3.0', () => {
619619
expect(transformed.credentials).toBeUndefined();
620620
done();
621621
});
622+
623+
it('filter legend', (done) => {
624+
const mapInfo = JSON.parse(mapstudioWebMap_L7Layers);
625+
spyOn(L7, 'PointLayer').and.callFake(mockL7.PointLayer);
626+
spyOn(L7, 'LineLayer').and.callFake(mockL7.PointLayer);
627+
spyOn(L7, 'PolygonLayer').and.callFake(mockL7.PointLayer);
628+
spyOn(L7, 'HeatmapLayer').and.callFake(mockL7.PointLayer);
629+
spyOn(L7, 'Scene').and.callFake(mockL7.Scene);
630+
spyOn(L7, 'Mapbox').and.callFake(mockL7.Mapbox);
631+
mapboxgl.Map.prototype.getCRS = function () {
632+
return { epsgCode: mapInfo.crs.name, getExtent: () => {} };
633+
};
634+
spyOn(FetchRequest, 'get').and.callFake((url) => {
635+
if (url.indexOf('map.json') > -1) {
636+
return Promise.resolve(new Response(mapstudioWebMap_L7Layers2));
637+
}
638+
if (url.indexOf('617580084.json') > -1) {
639+
return Promise.resolve(new Response(msProjectINfo_L7Layers2));
640+
}
641+
if (url.indexOf('/sprite') > -1) {
642+
return Promise.resolve(new Response(msSpriteInfo));
643+
}
644+
if (url.indexOf('/web/datas/1052943054/structureddata/ogc-features/collections/all/items.json') > -1) {
645+
return Promise.resolve(new Response(l7StructureData1052943054Items));
646+
}
647+
if (url.indexOf('/web/datas/1052943054/structureddata.json') > -1) {
648+
return Promise.resolve(new Response(l7StructureData1052943054));
649+
}
650+
if (url.indexOf('/web/datas/1767084124/structureddata/ogc-features/collections/all/items.json') > -1) {
651+
return Promise.resolve(new Response(l7StructureData1767084124Items));
652+
}
653+
if (url.indexOf('/web/datas/1767084124/structureddata.json') > -1) {
654+
return Promise.resolve(new Response(l7StructureData1767084124));
655+
}
656+
return Promise.resolve();
657+
});
658+
mapboxgl.CRS = function () {};
659+
mapboxgl.CRS.set = function () {};
660+
mapstudioWebmap = new WebMap(id, {
661+
server: server
662+
});
663+
mapstudioWebmap.on('addlayerssucceeded', ({ map }) => {
664+
const webmapInstance = mapstudioWebmap._getWebMapInstance();
665+
expect(webmapInstance.getLegendInfo().length).toBe(4);
666+
delete mapboxgl.Map.prototype.getCRS;
667+
delete mapboxgl.CRS;
668+
done();
669+
});
670+
});
622671
});

0 commit comments

Comments
 (0)