Skip to content

Commit

Permalink
fix(layer-legend): fix arcgisrest and imagearcgisrest legend (#966)
Browse files Browse the repository at this point in the history 
* fix(layer-legend): fix arcgisrest and imagearcgisrest legend

* fix(layer-legend): check drawingInfo for legend info

* fix(layer-legend): added mat-typography for labels and fixed url error

* feat(layer-legend): add svg when no url is provided

* corrected tilearcgisrest
  • Loading branch information
@LAMM26
LAMM26 committed Mar 17, 2022
1 parent 8c53a94 commit 5ca2e4a
Show file tree
Hide file tree
Showing 7 changed files with 149 additions and 84 deletions.
2 changes: 1 addition & 1 deletion packages/geo/src/lib/catalog/catalog-browser/catalog-browser.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ export class CatalogBrowserComponent implements OnInit, OnDestroy {
*/
private addLayersToMap(layers: CatalogItemLayer[]) {
const layers$ = layers.map((layer: CatalogItemLayer) => {
if (layer.options.sourceOptions.optionsFromApi === undefined) {
if (!layer.options.sourceOptions.optionsFromApi) {
layer.options.sourceOptions.optionsFromApi = true;
}
return this.layerService.createAsyncLayer(layer.options);
Expand Down
19 changes: 7 additions & 12 deletions packages/geo/src/lib/catalog/catalog-library/catalog-library.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,39 +152,34 @@ export class CatalogLibaryComponent implements OnInit, OnDestroy {
.getCapabilities(addedCatalog.type as any, addedCatalog.url, addedCatalog.version)
.pipe(
catchError((e) => {
const title = this.languageService.translate.instant(
'igo.geo.catalog.unavailableTitle'
);
const title = this.languageService.translate.instant('igo.geo.catalog.unavailableTitle');
if (e.error) {
this.addCatalogDialog(true, addedCatalog);
e.error.caught = true;
return e;
}
const message = this.languageService.translate.instant(
'igo.geo.catalog.unavailable',
{ value: addedCatalog.url }
);
const message = this.languageService.translate.instant('igo.geo.catalog.unavailable', { value: addedCatalog.url });
this.messageService.error(message, title);
throw e;
})
)
.subscribe((capabilies) => {
.subscribe((capabilities) => {
let title;
let version;
switch (addedCatalog.type) {
case 'wms':
title = addedCatalog.title || capabilies.Service.Title;
version = addedCatalog.version || capabilies.version;
title = addedCatalog.title || capabilities.Service.Title;
version = addedCatalog.version || capabilities.version;
break;
case 'arcgisrest':
case 'imagearcgisrest':
case 'tilearcgisrest':
title = addedCatalog.title || capabilies.mapName;
title = addedCatalog.title || capabilities.mapName;
break;
case 'wmts':
title =
addedCatalog.title ||
capabilies.ServiceIdentification.ServiceType;
capabilities.ServiceIdentification.ServiceType;
break;
default:
title = addedCatalog.title;
Expand Down
33 changes: 23 additions & 10 deletions packages/geo/src/lib/datasource/shared/capabilities.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -370,14 +370,26 @@ export class CapabilitiesService {
private parseArcgisOptions(
baseOptions: ArcGISRestDataSourceOptions,
arcgisOptions: any,
legend: any,
serviceCapabilities: any,
legend?: any
): ArcGISRestDataSourceOptions {
const title = arcgisOptions.name;
const legendInfo = legend.layers ? legend : undefined;
const styleGenerator = new EsriStyleGenerator();
const units = arcgisOptions.units === 'esriMeters' ? 'm' : 'degrees';
const style = styleGenerator.generateStyle(arcgisOptions, units);
let legendInfo: any;

if (legend.layers) {
legendInfo = legend.layers.find(x => x.layerName === title);
} else if (arcgisOptions.drawingInfo?.renderer) {
legendInfo = arcgisOptions.drawingInfo.renderer;
} else {
legendInfo = undefined;
}

let style;
if (arcgisOptions.drawingInfo) {
const styleGenerator = new EsriStyleGenerator();
const units = arcgisOptions.units === 'esriMeters' ? 'm' : 'degrees';
style = styleGenerator.generateStyle(arcgisOptions, units);
}
const attributions = new olAttribution({
target: arcgisOptions.copyrightText
});
Expand All @@ -401,10 +413,9 @@ export class CapabilitiesService {
const params = Object.assign(
{},
{
legendInfo,
style,
timeFilter,
timeExtent
LAYERS: baseOptions.layer ? 'show:' + baseOptions.layer : undefined,
time: timeExtent
}
);
const options = ObjectUtils.removeUndefined({
Expand All @@ -418,10 +429,12 @@ export class CapabilitiesService {
abstract: arcgisOptions.description || serviceCapabilities.serviceDescription
},
},
legendInfo,
timeFilter,
sourceFields: arcgisOptions.fields,
queryTitle: arcgisOptions.displayField
});
options.params.attributions = attributions;
options.attributions = attributions;
return ObjectUtils.mergeDeep(options, baseOptions);
}

Expand All @@ -432,7 +445,7 @@ export class CapabilitiesService {
serviceCapabilities: any
): TileArcGISRestDataSourceOptions | ArcGISRestImageDataSourceOptions {
const title = arcgisOptions.name;
const legendInfo = legend.layers ? legend : undefined;
const legendInfo = legend.layers ? legend.layers.find(x => x.layerName === title) : undefined;
const attributions = new olAttribution({
target: arcgisOptions.copyrightText
});
Expand Down
101 changes: 84 additions & 17 deletions packages/geo/src/lib/datasource/shared/datasources/arcgisrest-datasource.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,31 +61,98 @@ export class ArcGISRestDataSource extends DataSource {
if (legendInfo === undefined || legend.length > 0) {
return legend;
}

const id = parseInt(this.options.layer, 10);
const lyr = legendInfo.layers.find(layer => layer.layerId === id);
if (!lyr) {
if (!legendInfo) {
return;
}
let htmlString = '<table>';
let src: string;
let label: string;
let svg: string;

for (const lyrLegend of lyr.legend) {
const modifiedUrl = this.options.url.replace(
'FeatureServer',
'MapServer'
);
const src = `${modifiedUrl}/${lyr.layerId}/images/${lyrLegend.url}`;
const label = lyrLegend.label.replace('<Null>', 'Null');
htmlString +=
`<tr><td align='left'><img src="` +
src +
`" alt ='' /></td><td>` +
label +
'</td></tr>';
if (legendInfo.legend) {
for (const legendElement of legendInfo.legend) {
src = this.htmlImgSrc(legendElement.contentType, legendElement.imageData);
label = legendElement.label ? legendElement.label.replace('<Null>', 'Null') : '';
htmlString +=
`<tr><td align='left'><img src="` +
src +
`" alt ='' /></td><td class="mat-typography">` +
label +
'</td></tr>';
}
} else if (legendInfo.type === "uniqueValue") {
for (const legendElement of legendInfo.uniqueValueInfos) {
label = legendElement.label.replace('<Null>', 'Null');
if (legendElement.symbol.type === 'esriPMS') {
src = this.htmlImgSrc(legendElement.symbol.contentType, legendElement.symbol.imageData);
htmlString +=
`<tr><td align='left'><img src="` +
src +
`" alt ='' /></td><td class="mat-typography">` +
label +
'</td></tr>';
} else if (legendElement.symbol.type !== 'esriPMS') {
svg = this.createSVG(legendElement.symbol);
htmlString += `<tr><td align='left'>` + svg + `</td><td class="mat-typography">` + label + '</td></tr>';
}
}
} else if (legendInfo.type === "simple") {
label = legendInfo.label ? legendInfo.label.replace('<Null>', 'Null') : '';
if (legendInfo.symbol.type === 'esriPMS') {
src = this.htmlImgSrc(legendInfo.symbol.contentType, legendInfo.symbol.imageData);
htmlString +=
`<tr><td align='left'><img src="` +
src +
`" alt ='' /></td><td class="mat-typography">` +
label +
'</td></tr>';
} else if (legendInfo.symbol.type !== 'esriPMS') {
svg = this.createSVG(legendInfo.symbol);
htmlString += `<tr><td align='left'>` + svg + `</td><td class="mat-typography">` + label + '</td></tr>';
}
}
htmlString += '</table>';
return [{ html: htmlString }];
}

htmlImgSrc(contentType: string, imageData: string): string {
return `data:${contentType};base64,${imageData}`;
}

createSVG(symbol): string {
let svg: string = '';

const color: Array<number> = symbol.color ? symbol.color : [0, 0, 0, 0];

if (symbol.type === 'esriSLS') {
const width: number = symbol.width ? symbol.width : 0;

const stroke: string = `stroke:rgba(` + color[0] + ',' + color[1] + ',' + color[2] + ',' + color[3] + ')';
const strokeWidth: string = `stroke-width:` + width;

if (symbol.style === 'esriSLSSolid') {
svg = `<svg height="30" width="30"><line x1="0" y1="15" x2="30" y2="15" style="` + stroke + ';' + strokeWidth + `"/></svg>`;
} else if (symbol.style === 'esriSLSDash') {
const strokeDashArray: string = `stroke-dasharray="5,5"`;
svg = `<svg height="30" width="30"><line x1="0" y1="15" x2="30" y2="15" style="` + stroke + ';' + strokeWidth + `" `+ strokeDashArray + `/></svg>`;
}
} else if (symbol.style === 'esriSMSCircle' || symbol.style === 'esriSFSSolid') {
const outlineColor = symbol.outline.color;
const outlineWidth = symbol.outline.width;
const size = symbol.size;

const stroke = `stroke:rgba(` + outlineColor[0] + ',' + outlineColor[1] + ',' + outlineColor[2] + ',' + outlineColor[3] + ')';
const strokeWidth = `stroke-width:` + outlineWidth;
const fill = `fill:rgba(` + color[0] + ',' + color[1] + ',' + color[2] + ',' + color[3] + ')';

if (symbol.style === 'esriSMSCircle') {
svg = `<svg height="30" width="30"><circle cx="15" cy="15" r="` + size/2 + `" style="` + stroke + ';' + strokeWidth + ';' + fill + `"/></svg>`;
} else {
svg = `<svg height="30" width="30"><rect x="5" y="5" width="20" height="20" style ="` + stroke + ';' + strokeWidth + ';' + fill + `"/></svg>`;
}
}
return svg;
}

public onUnwatch() {}
}
16 changes: 6 additions & 10 deletions packages/geo/src/lib/datasource/shared/datasources/imagearcgisrest-datasource.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,28 +46,24 @@ export class ImageArcGISRestDataSource extends DataSource {
}

getLegend(): Legend[] {
const legendInfo = this.options.options?.legendInfo || this.params?.legendInfo;
const legendInfo = this.options.legendInfo;
const legend = super.getLegend();
if (legendInfo === undefined || this.options.layer === undefined || legend.length > 0) {
return legend;
}

const id = parseInt(this.options.layer, 10);
const lyr = legendInfo.layers.find(layer => layer.layerId === id);
if (!lyr) {
if (!legendInfo) {
return;
}
let htmlString = '<table>';

for (const lyrLegend of lyr.legend) {
const src = `${this.options.url}/${lyr.layerId}/images/${
lyrLegend.url
}`;
const label = lyrLegend.label.replace('<Null>', 'Null');
for (const legendElement of legendInfo.legend) {
const src = `${this.options.url}/${legendInfo.layerId}/images/${legendElement.url}`;
const label = legendElement.label.replace('<Null>', 'Null');
htmlString +=
`<tr><td align='left'><img src="` +
src +
`" alt ='' /></td><td>` +
`" alt ='' /></td><td class="mat-typography">` +
label +
'</td></tr>';
}
Expand Down
16 changes: 6 additions & 10 deletions packages/geo/src/lib/datasource/shared/datasources/tilearcgisrest-datasource.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,26 +37,22 @@ export class TileArcGISRestDataSource extends DataSource {
getLegend(): Legend[] {
const legendInfo = this.options.legendInfo;
const legend = super.getLegend();
if (legendInfo === undefined || legend.length > 0) {
if (legendInfo === undefined || this.options.layer === undefined || legend.length > 0) {
return legend;
}

const id = parseInt(this.options.layer, 10);
const lyr = legendInfo.layers.find(layer => layer.layerId === id);
if (!lyr) {
if (!legendInfo) {
return;
}
let htmlString = '<table>';

for (const lyrLegend of lyr.legend) {
const src = `${this.options.url}/${lyr.layerId}/images/${
lyrLegend.url
}`;
const label = lyrLegend.label.replace('<Null>', 'Null');
for (const legendElement of legendInfo.legend) {
const src = `${this.options.url}/${legendInfo.layerId}/images/${legendElement.url}`;
const label = legendElement.label.replace('<Null>', 'Null');
htmlString +=
`<tr><td align='left'><img src="` +
src +
`" alt ='' /></td><td>` +
`" alt ='' /></td><td class="mat-typography">` +
label +
'</td></tr>';
}
Expand Down
46 changes: 22 additions & 24 deletions packages/geo/src/lib/layer/layer-legend/layer-legend.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,30 +89,26 @@ export class LayerLegendComponent implements OnInit, OnDestroy {
let lastlLegend = this.layer.legend;
this.styles = this.listStyles();
const sourceOptions = this.layer.options.source.options as any;
if (
sourceOptions &&
sourceOptions.params &&
sourceOptions.params.STYLES) {
if (sourceOptions && sourceOptions.params && sourceOptions.params.STYLES) {
// if a styles is provided into the layers wms params
this.currentStyle = this.styles.find(style => style.name === sourceOptions.params.STYLES).name;
} else if (!this.layer.legend) {
} else if (!lastlLegend) {
// if no legend is manually provided
if (this.styles && this.styles.length > 1) {
this.currentStyle = this.styles[0].name;
}
} else if (this.styles && this.styles.length > 1) {
this.currentStyle = lastlLegend[0].currentStyle;
}
if ( typeof this.layer.options.legendOptions !== 'undefined' && this.layer.options.legendOptions.display === false) {
if (typeof this.layer.options.legendOptions !== 'undefined' && !this.layer.options.legendOptions.display) {
lastlLegend = [];
} else {
lastlLegend = this.layer.dataSource.getLegend(this.currentStyle, this.view);
}

if (this.updateLegendOnResolutionChange === true || (sourceOptions as WMSDataSourceOptions).contentDependentLegend) {
if (this.updateLegendOnResolutionChange || (sourceOptions as WMSDataSourceOptions).contentDependentLegend) {
const state$ = this.layer.map.viewController.state$;
this.state$$ = state$
.subscribe(() => this.onViewControllerStateChange());
this.state$$ = state$.subscribe(() => this.onViewControllerStateChange());
} else if (lastlLegend && lastlLegend.length !== 0) {
this.legendItems$.next(lastlLegend);
for (const legend of lastlLegend) {
Expand All @@ -131,23 +127,25 @@ export class LayerLegendComponent implements OnInit, OnDestroy {
}

getLegendGraphic(item: Legend) {
const secureIMG = new SecureImagePipe(this.http);
secureIMG.transform(item.url).pipe(
catchError((err) => {
if (err.error) {
err.error.caught = true;
this.getLegend = false;
if (item.url) {
const secureIMG = new SecureImagePipe(this.http);
secureIMG.transform(item.url).pipe(
catchError((err) => {
if (err.error) {
err.error.caught = true;
this.getLegend = false;
this.cdRef.detectChanges();
return err;
}
})
).subscribe(obsLegGraph => {
const idx = this.legendItems$.value.findIndex(leg => leg.title === item.title);
const legendGraph = obsLegGraph as string;
this.legendItems$.value[idx].imgGraphValue = legendGraph;
this.cdRef.detectChanges();
return err;
}
})
).subscribe(obsLegGraph => {
const idx = this.legendItems$.value.findIndex(leg => leg.title === item.title);
const legendGraph = obsLegGraph as string;
this.legendItems$.value[idx].imgGraphValue = legendGraph;
this.cdRef.detectChanges();
}
);
);
}
}

toggleLegendItem(collapsed: boolean, item: Legend) {
Expand Down

0 comments on commit 5ca2e4a

Please sign in to comment.