Lägga till ett anpassat WebGL-lager på en karta

Azure Kartor Web SDK har stöd för att skapa anpassade lager med hjälp av WebGL. WebGL baseras på OpenGL ES och möjliggör återgivning av 2D- och 3D-grafik i webbläsare.

Med WebGL kan du skapa interaktiva grafik med höga prestanda som återges i webbläsaren i realtid och som stöder scenarier som simuleringar, datavisualisering, animeringar och 3D-modellering.

Utvecklare kan komma åt webGL-kontexten för kartan under återgivningen och använda anpassade WebGL-lager för att integrera med andra bibliotek, till exempel three.js och deck.gl för att tillhandahålla berikat och interaktivt innehåll på kartan.

Lägga till ett WebGL-lager

Innan du kan lägga till ett WebGL-lager på en karta måste du ha ett objekt som implementerar WebGLRenderer gränssnittet. Skapa först ett WebGL-lager genom att ange ett id objekt och renderer till konstruktorn och sedan lägga till lagret på kartan för att få det renderat.

Följande exempelkod visar hur du lägger till ett WebGL-lager på en karta:

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 }));

Kommentar

Klassen WebGLLayer stöder minZoomalternativen , maxZoomoch visible lager.

//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
    }
));

Det här exemplet återger en triangel på kartan med hjälp av ett WebGL-lager.

Ett fullständigt funktionellt exempel med källkod finns i Enkelt 2D WebGL-lager i Azure Kartor-exempel.

Kartans kameramatris används för att projicera sfärisk mercatorpunkt till gl koordinater. Mercator-punkten [0, 0] representerar det övre vänstra hörnet i Mercator-världen och [1, 1] representerar det nedre högra hörnet. När renderingMode är "3d"är z-koordinaten konform. En ruta med identiska x-, y- och z-längder i Mercator-enheter återges som en kub.

Klassen MercatorPoint har fromPosition, fromPositionsoch toFloat32Array statiska metoder som kan användas för att konvertera en geospatial position till en Mercator-punkt. toPosition På samma sätt kan metoderna och toPositions användas för att projicera en Mercator-punkt till en position.

Rendera en 3D-modell

Använd ett WebGL-lager för att återge 3D-modeller. I följande exempel visas hur du läser in en glTF-fil och återger den på kartan med hjälp av three.js.

Du måste lägga till följande skriptfiler.

<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>

Det här exemplet renderar en animerad 3D-papegoja på kartan.

Ett fullständigt funktionellt exempel med källkod finns i Tre anpassade WebGL-lager i Azure Kartor-exempel.

Funktionen onAdd läser in en .glb fil i minnet och instansierar tre.js-objekt som Kamera, Scen, Ljus och en THREE.WebGLRenderer.

Funktionen render beräknar kamerans projektionsmatris och återger modellen till scenen.

Dricks

• Om du vill ha en kontinuerlig och smidig animering kan du utlösa ommålningen av en enda bildruta genom att anropa map.triggerRepaint() i render funktionen.
• Om du vill aktivera aliasskydd anger du antialias helt enkelt som true ett av formatalternativen när du skapar kartan.

Rendera en 3D-modell med babylon.js

Babylon.js är en av världens ledande WebGL-baserade grafikmotorer. I följande exempel visas hur du läser in en GLTF-fil och återger den på kartan med hjälp av babylon.js.

Du måste lägga till följande skriptfiler.

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

Det här exemplet renderar ett satellittorn på kartan.

Funktionen onAdd instansierar en BABYLON-motor och en scen. Den läser sedan in en .gltf fil med hjälp av BABYLON. SceneLoader.

Funktionen render beräknar kamerans projektionsmatris och återger modellen till scenen.

Ett fullständigt funktionellt exempel med källkod finns i Babylons anpassade WebGL-lager i Azure Kartor-exempel.

Rendera ett deck.gl lager

Ett WebGL-lager kan användas för att återge lager från deck.gl-biblioteket. Följande exempel visar datavisualiseringen av personmigreringsflödet i USA från län till län inom ett visst tidsintervall.

Du måste lägga till följande skriptfil.

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

Definiera en lagerklass som utökar 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 }); 
    } 
} 

Det här exemplet renderar en båge-lager google deck.gl biblioteket.

Ett fullständigt funktionellt exempel med källkod finns i Deck GL-anpassat WebGL-lager i Azure Kartor-exempel.

Nästa steg

Läs mer om de klasser och metoder som används i den här artikeln:

WebGLLayer

WebGLLayerOptions

WebGLRenderer-gränssnitt

MercatorPoint