diff --git a/src/app/map/gisaf-mapbox/gisaf-mapbox.component.ts b/src/app/map/gisaf-mapbox/gisaf-mapbox.component.ts index 0ede25d..faddedf 100644 --- a/src/app/map/gisaf-mapbox/gisaf-mapbox.component.ts +++ b/src/app/map/gisaf-mapbox/gisaf-mapbox.component.ts @@ -197,21 +197,35 @@ export class GisafMapboxComponent implements OnInit, OnDestroy { } _getNewSingleOpacity(layerId: string, originalOpacity: number | object): number | object { - if (typeof (originalOpacity) === 'number') { + if (originalOpacity === undefined) { + return undefined + } + else if (typeof originalOpacity === 'number') { return originalOpacity * this._baseStyleOpacity } - else { - let newOpacity = {} - for (const k in originalOpacity) { - let v = originalOpacity[k] - if (k == 'stops') { - newOpacity[k] = v.map(stop => [stop[0], stop[1] * this._baseStyleOpacity]) - } - else { - newOpacity[k] = v - } + else if (typeof originalOpacity === 'object') { // Also matches array + if (originalOpacity[0] == 'interpolate') { + // Change the last interpolation point + originalOpacity[Object.values(originalOpacity).length - 1] = this._baseStyleOpacity + return originalOpacity } - return newOpacity + else { + let newOpacity = {} + for (const k in originalOpacity) { + let v = originalOpacity[k] + if (k == 'stops') { + newOpacity[k] = v.map(stop => [stop[0], stop[1] * this._baseStyleOpacity]) + } + else { + newOpacity[k] = v + } + } + return newOpacity + } + } + else { + console.log(`Cannot process opacity of layer ${layerId}, unknown type ${typeof originalOpacity}`) + return originalOpacity } } @@ -219,25 +233,30 @@ export class GisafMapboxComponent implements OnInit, OnDestroy { let originalStyle = this.originalBaseStyle.style['layers'].find( (_layer: object) => layer['id'] == _layer['id'] ) - if (!('paint' in originalStyle)) { - originalStyle['paint'] = {} - } - if (['raster', 'background', 'fill', 'line'].indexOf(layer['type']) != -1) { - let prop = layer['type'] + '-opacity' - return { - [prop]: this._getNewSingleOpacity(layer['id'], originalStyle['paint'][prop] || 1.0) - } - } - else { + let originalPaint = originalStyle['paint'] || {} + if (layer['type'] == 'symbol') { let prop1 = 'text-opacity' let prop2 = 'icon-opacity' - let newOpacity1 = this._getNewSingleOpacity(layer['id'], originalStyle['paint'][prop1] || 1.0) - let newOpacity2 = this._getNewSingleOpacity(layer['id'], originalStyle['paint'][prop2] || 1.0) + let newOpacity1 = this._getNewSingleOpacity(layer['id'], originalPaint[prop1] || 1.0) + let newOpacity2 = this._getNewSingleOpacity(layer['id'], originalPaint[prop2] || 1.0) return { [prop1]: newOpacity1, [prop2]: newOpacity2, } } + else if (layer['type'] == 'line') { + let prop = layer['type'] + '-opacity' + return { + [prop]: this._getNewSingleOpacity(layer['id'], originalPaint[prop] || 1.0) + } + } + else { + // layer['type'] in ['raster', 'background', 'fill', 'line', 'fill-extrusion'] + let prop = layer['type'] + '-opacity' + return { + [prop]: this._getNewSingleOpacity(layer['id'], originalPaint[prop] || 1.0), + } + } } applyBaseStyleOpacity() { @@ -247,7 +266,9 @@ export class GisafMapboxComponent implements OnInit, OnDestroy { continue } for (const [key, value] of Object.entries(this._getNewOpacity(bsLayer))) { - this.map.setPaintProperty(bsLayer.id, key, value) + if (value !== undefined) { + this.map.setPaintProperty(bsLayer.id, key, value) + } } } }