How to change elevation exaggeration at runtime?

zhiminzhang — Sat, 11 Dec 2021 20:59:08 GMT

Hello, I have create a custom elevation layer based on the Custom ElevationLayer Example with TypeScript, here is my code:

import {
    subclass, declared, property
} from "esri/core/accessorSupport/decorators";
import BaseElevationLayer = require('esri/layers/BaseElevationLayer');
import ElevationLayer = require('esri/layers/ElevationLayer');

@subclass('beginor.ExaggeratedElevationLayer')
class ExaggeratedElevationLayer extends(declared(BaseElevationLayer)) {

    @property()
    public exaggeration: number;
    @property()
    public url: string;
    @property()
    public get type(): string { return 'exaggerated-elevation'; }

    private elevation: ElevationLayer;

    constructor(properties: ExaggeratedElevationLayerProperties) {
        super(properties);
        if (!this.exaggeration) {
            this.exaggeration = 1.0;
        }
    }

    public load(signal: AbortSignal): IPromise<any> {
        this.elevation = new ElevationLayer({
            url: this.url
        });
        return this.addResolvingPromise(this.elevation.load(signal));
    }

    fetchTile(
        level: number,
        row: number,
        column: number,
        options: __esri.ElevationLayerFetchTileOptions
    ): IPromise<__esri.ElevationTileData> {
        return this.elevation.fetchTile(level, row, column, options).then(
            data => {
                const exag = this.exaggeration;
                for (let i = 0; i < data.values.length; i++) {
                    data.values[i] = data.values[i] * exag;
                }
                return data;
            }
        );
    }

}

interface ExaggeratedElevationLayerProperties extends __esri.BaseElevationLayerProperties {
    url: string;
    exaggeration?: number;
}

export = ExaggeratedElevationLayer;
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

And I can use it in a webscene like this:

import WebScene = require('esri/Map');
import SceneView = require('esri/views/SceneView');
import externalRenderers = require('esri/views/3d/externalRenderers');

import ExaggeratedElevationLayer = require('beginor/ExaggeratedElevationLayer');

const map = new WebScene({
    basemap: 'streets',
    ground: {
        layers: [
            new ExaggeratedElevationLayer({
                url: 'http://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer',
                exaggeration: 5
            })
        ]
    }
});

const view = new SceneView({
    map: map,
    container: 'viewDiv',
    center: [113.2, 23.4],
    zoom: 13,
    camera: {
        position: {
            spatialReference: { wkid: 102100 },
            x: 12601020.732296046,
            y: 2661706.7320940713,
            z: 10515.040601080284
        },
        heading: 0,
        tilt: 60
    }
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

But when I want to change the exaggeration at runtime, I have tried find the exaggerated elevation layer from the ground , change the exaggeration property, but this does not work.

The only way I found is remove the exaggerated vation layer from the ground, and recreate a new exaggerated elevation layer , and add it the the ground's layers, like this:

var btnTgl = document.getElementById('eleTgl') as HTMLButtonElement;
btnTgl.addEventListener('click', e => {
    const ground = view.map.ground;
    var eleLayer = ground.layers.getItemAt(0);
    ground.layers.remove(eleLayer);
    let exLayer = eleLayer as any as ExaggeratedElevationLayer;
    if (exLayer.exaggeration == 5) {
        exLayer = new ExaggeratedElevationLayer({
            exaggeration: 1,
            url: exLayer.url
        });
    }
    else {
        exLayer = new ExaggeratedElevationLayer({
            exaggeration: 5,
            url: exLayer.url
        });
    }
    ground.layers.add(exLayer as any);
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This works, but I think it is not the mose efficient way, because it will reload lots of elevation data from server again.

So my question is: Is there a more efficient way to change elevation aggeration at runtime?

Re: How to change elevation exaggeration at runtime?

VictorBerchet — Sat, 11 Dec 2021 20:59:10 GMT

(Edited)

I first tried to remove / re-add the layer as:

this.elevationLayer.factor = 5;
this.map.ground.layers.remove(this.elevationLayer);
this.map.ground.layers.add(this.elevationLayer);

This works fine for tiles that are not cached.

However cached tiles altitude is not updated and you end up with a mix of old and new altitude when you switch after the layer has already been used.

I ended up re-creating a new Layer every time I change the elevation which fixes the problem

topic Re: How to change elevation exaggeration at runtime? in ArcGIS JavaScript Maps SDK Questions

How to change elevation exaggeration at runtime?

Re: How to change elevation exaggeration at runtime?