Een aangepaste WebGL-laag toevoegen aan een kaart

De Azure Kaarten Web SDK biedt ondersteuning voor het maken van aangepaste lagen met behulp van WebGL. WebGL is gebaseerd op OpenGL ES en maakt rendering van 2D- en 3D-afbeeldingen mogelijk in webbrowsers.

Met Behulp van WebGL kunt u interactieve afbeeldingen met hoge prestaties bouwen die in de browser in realtime worden weergegeven die ondersteuning bieden voor scenario's zoals simulaties, gegevensvisualisatie, animaties en 3D-modellering.

Ontwikkelaars hebben toegang tot de WebGL-context van de kaart tijdens het weergeven en gebruiken van aangepaste WebGL-lagen om te integreren met andere bibliotheken, zoals three.js en deck.gl om verrijkte en interactieve inhoud op de kaart te bieden.

Een WebGL-laag toevoegen

Voordat u een WebGL-laag aan een kaart kunt toevoegen, moet u een object hebben waarmee de WebGLRenderer interface wordt geïmplementeerd. Maak eerst een WebGL-laag door een id en renderer object aan de constructor op te geven en voeg vervolgens de laag toe aan de kaart om deze weer te geven.

De volgende voorbeeldcode laat zien hoe u een WebGL-laag toevoegt aan een kaart:

var myRenderer = {
    /**
     * Either "2d" or "3d". Defaults to "2d".
     * - "3d" to use the depth buffer and share it with other layers
     * - "2d" to add a layer with no depth. If you need to use the depth buffer for a "2d"
     *   layer you must use an offscreen framebuffer and the prerender method.
     */
    renderingMode: "2d",

    /**
     * Optional method called when the layer has been added to the Map.
     * This gives the layer a chance to initialize gl resources and register event listeners.
     * @param map The Map this custom layer was just added to.
     * @param gl The gl context for the map.
     */
    onAdd: function (map, gl) {},

    /**
     * Optional method called when the layer has been removed from the Map.
     * This gives the layer a chance to clean up gl resources and event listeners.
     * @param map The Map this custom layer was just added to.
     * @param gl The gl context for the map.
     */
    onRemove: function (map, gl) {},

    /**
     * Optional method called during a render frame to allow a layer to prepare resources
     * or render into a texture.
     *
     * The layer cannot make any assumptions about the current GL state and must bind a framebuffer before rendering.
     *
     * @param gl The map's gl context.
     * @param matrix The map's camera matrix.
     */
    prerender: function (gl, matrix) {},

    /**
     * Required. Called during a render frame allowing the layer to draw into the GL context.
     *
     * The layer can assume blending and depth state is set to allow the layer to
     * properly blend and clip other layers. The layer cannot make any other 
     * assumptions about the current GL state.
     *
     * If the layer needs to render to a texture, it should implement the prerender
     * method to do this and only use the render method for drawing directly into the
     * main framebuffer.
     *
     * The blend function is set to gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA).
     * This expects colors to be provided in premultiplied alpha form where the r, g and b
     * values are already multiplied by the a value. If you are unable to provide colors in
     * premultiplied form you may want to change the blend function to
     * gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA).
     *
     * @param gl The map's gl context.
     * @param matrix The map's camera matrix.
     */
    render: function (gl, matrix) {}
};
 
//Add the layer to the map.
map.layers.add(new atlas.layer.WebGLLayer("layerId", { renderer: myRenderer }));

Notitie

De WebGLLayer klasse ondersteunt de minZoomopties voor , maxZoomen visible lagen.

//Add the layer to the map with layer options. 
map.layers.add(new atlas.layer.WebGLLayer("layerId", 
    { 
        renderer: myRenderer, 
        minZoom: 10, 
        maxZoom: 22, 
        visible: true
    }
));

In dit voorbeeld wordt een driehoek op de kaart weergegeven met behulp van een WebGL-laag.

A screenshot showing a triangle rendered on a map, using a WebGL layer.

Zie Simple 2D WebGL-laag in de Azure Kaarten Samples voor een volledig functioneel voorbeeld met broncode.

De cameramatrix van de kaart wordt gebruikt om sferical Mercator-punt naar coördinaten te gl projecteren. Mercatorpunt [0, 0] vertegenwoordigt de linkerbovenhoek van de Mercator-wereld en [1, 1] staat voor de rechterbenedenhoek. Wanneer renderingMode is "3d", is de z-coördinaat conform. Een vak met identieke x-, y- en z-lengten in Mercator-eenheden wordt weergegeven als een kubus.

De MercatorPoint klasse heeft fromPosition, fromPositionsen toFloat32Array statische methoden die kunnen worden gebruikt om een georuimtelijke positie te converteren naar een Mercator-punt. Op dezelfde manier kunnen de toPosition en toPositions methoden worden gebruikt om een Mercator-punt naar een positie te projecteren.

Een 3D-model weergeven

Gebruik een WebGL-laag om 3D-modellen weer te geven. In het volgende voorbeeld ziet u hoe u een glTF-bestand laadt en weergeeft op de kaart met behulp van three.js.

U moet de volgende scriptbestanden toevoegen.

<script src="https://unpkg.com/three@latest/build/three.min.js"></script>
<script src="https://unpkg.com/three@latest/examples/js/loaders/GLTFLoader.js"></script>

Dit voorbeeld geeft een geanimeerde 3D papegaai weer op de kaart.

A screenshot showing an animated 3D parrot on the map.

Zie Drie aangepaste WebGL-laag in de Voorbeelden van Azure Kaarten voor een volledig functioneel voorbeeld met broncode.

Met de onAdd functie wordt een bestand in het .glb geheugen geladen en worden drie.js-objecten geïnstitueert, zoals Camera, Scène, Licht en een THREE.WebGLRenderer.

De render functie berekent de projectiematrix van de camera en geeft het model weer op de scène.

Fooi

  • Als u een doorlopende en vloeiende animatie wilt hebben, kunt u de repaint van één frame activeren door de render functie aan te roepenmap.triggerRepaint().
  • Als u antialiassen wilt inschakelen, hoeft u alleen maar in te true stellen antialias als een van de stijlopties tijdens het maken van de kaart.

Een 3D-model weergeven met behulp van babylon.js

Babylon.js is een van de toonaangevende webGL-grafische engines ter wereld. In het volgende voorbeeld ziet u hoe u een GLTF-bestand laadt en weergeeft op de kaart met behulp van babylon.js.

U moet de volgende scriptbestanden toevoegen.

<script src="https://cdn.babylonjs.com/babylon.js"></script> 
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>

In dit voorbeeld wordt een satelliettoren op de kaart weergegeven.

De onAdd functie instantieert een BABYLON-engine en een scène. Vervolgens wordt een .gltf bestand geladen met BEHULP van BABYLON. SceneLoader.

De render functie berekent de projectiematrix van de camera en geeft het model weer op de scène.

A screenshot showing an example of rendering a 3D model using babylon.js.

Zie de aangepaste WebGL-laag van Babylon in de Azure Kaarten Samples voor een volledig functioneel voorbeeld met broncode.

Een deck.gl laag weergeven

Een WebGL-laag kan worden gebruikt om lagen uit de deck.gl-bibliotheek weer te geven. In het volgende voorbeeld ziet u de gegevensvisualisatie van de migratiestroom van personen in de Verenigde Staten van provincie naar provincie binnen een bepaald tijdsbereik.

U moet het volgende scriptbestand toevoegen.

<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>

Definieer een laagklasse die wordt uitgebreid atlas.layer.WebGLLayer.

class DeckGLLayer extends atlas.layer.WebGLLayer { 

    constructor(options) { 
        super(options.id); 

        //Create an instance of deck.gl layer 
        this._mbLayer = new deck.MapboxLayer(options); 

        //Create a renderer 
        const deckGLRenderer = { 
            renderingMode: "3d", 
            onAdd: (map, gl) => { 
               this._mbLayer.onAdd?.(map["map"], gl); 
            }, 
            onRemove: (map, gl) => { 
                this._mbLayer.onRemove?.(map["map"], gl); 
            }, 
            prerender: (gl, matrix) => { 
                this._mbLayer.prerender?.(gl, matrix); 
            }, 
            render: (gl, matrix) => { 
                this._mbLayer.render(gl, matrix); 
            } 
        }; 
        this.setOptions({ renderer: deckGLRenderer }); 
    } 
}

In dit voorbeeld wordt een arc-layer weergegeven in Google de deck.gl-bibliotheek .

A screenshot showing an arc-layer from the Deck G L library.

Zie De aangepaste WebGL-laag van Deck GL in de Azure Kaarten Samples voor een volledig functioneel voorbeeld met broncode.

Volgende stappen

Meer informatie over de klassen en methoden die in dit artikel worden gebruikt:

WebGLLayer

WebGLLayerOptions

WebGLRenderer-interface

MercatorPoint

  • Laatst bijgewerkt om