Dodawanie niestandardowej warstwy WebGL do mapy

Zestaw AZURE Mapy Web SDK obsługuje tworzenie warstw niestandardowych przy użyciu biblioteki WebGL. Protokół WebGL jest oparty na technologii OpenGL ES i umożliwia renderowanie grafiki 2D i 3D w przeglądarkach internetowych.

Za pomocą biblioteki WebGL można tworzyć interaktywne grafiki o wysokiej wydajności renderowane w przeglądarce w czasie rzeczywistym, które obsługują scenariusze, takie jak symulacje, wizualizacja danych, animacje i modelowanie 3D.

Deweloperzy mogą uzyskiwać dostęp do kontekstu WebGL mapy podczas renderowania i używać niestandardowych warstw WebGL do integracji z innymi bibliotekami, takimi jak three.js i deck.gl , aby zapewnić wzbogaconą i interaktywną zawartość na mapie.

Dodawanie warstwy WebGL

Przed dodaniem warstwy WebGL do mapy należy mieć obiekt implementujący WebGLRenderer interfejs. Najpierw utwórz warstwę WebGL, podając id obiekt i renderer do konstruktora, a następnie dodaj warstwę do mapy, aby została ona renderowana.

Poniższy przykładowy kod pokazuje, jak dodać warstwę WebGL do mapy:

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

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

Ten przykład renderuje trójkąt na mapie przy użyciu warstwy WebGL.

Aby zapoznać się z w pełni funkcjonalnym przykładem kodu źródłowego, zobacz Simple 2D WebGL layer in the Azure Mapy Samples (Proste warstwy webGL 2D w przykładach usługi Azure Mapy).

Macierz kamery mapy służy do projekcji spherical Mercator punkt do gl współrzędnych. Punkt mercatora [0, 0] reprezentuje lewy górny róg świata Mercator i [1, 1] reprezentuje prawy dolny róg. Gdy renderingMode wartość to "3d", współrzędna z jest zgodna. Pudełko o identycznych długościach x, y i z w jednostkach Mercatora byłoby renderowane jako sześcian.

Klasa MercatorPoint ma fromPositionmetody , fromPositionsi toFloat32Array statyczne, które mogą służyć do konwertowania pozycji geoprzestrzennej na punkt Mercator. toPosition Podobnie metody i toPositions mogą służyć do projekcji punktu Mercator do pozycji.

Renderowanie modelu 3D

Renderowanie modeli 3D za pomocą warstwy WebGL. W poniższym przykładzie pokazano, jak załadować plik glTF i renderować go na mapie przy użyciu pliku three.js.

Należy dodać następujące pliki skryptu.

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

Ten przykład renderuje animowaną papużę 3D na mapie.

Aby zapoznać się z w pełni funkcjonalnym przykładem kodu źródłowego, zobacz Trzy niestandardowe warstwy WebGL w przykładach usługi Azure Mapy.

Funkcja onAdd ładuje .glb plik do pamięci i tworzy wystąpienia obiektów three.js, takich jak Aparat, Scene, Light i THREE.WebGLRenderer.

Funkcja render oblicza macierz projekcji aparatu i renderuje model do sceny.

Renderowanie modelu 3D przy użyciu pliku babilon.js

Babilon.js jest jednym z wiodących na świecie aparatów graficznych opartych na WebGL. W poniższym przykładzie pokazano, jak załadować plik GLTF i renderować go na mapie przy użyciu pliku babilon.js.

Należy dodać następujące pliki skryptu.

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

Ten przykład renderuje wieżę satelitarną na mapie.

Funkcja onAdd tworzy wystąpienie aparatu BABILON i sceny. Następnie ładuje .gltf plik przy użyciu programu BABILON. SceneLoader.

Funkcja render oblicza macierz projekcji aparatu i renderuje model do sceny.

Aby uzyskać w pełni funkcjonalny przykład z kodem źródłowym, zobacz Babilon niestandardową warstwę WebGL w przykładach usługi Azure Mapy.

Renderowanie warstwy deck.gl

Warstwę WebGL można użyć do renderowania warstw z biblioteki deck.gl . W poniższym przykładzie pokazano wizualizację danych przepływu migracji osób w Stany Zjednoczone z powiatu do powiatu w określonym zakresie czasu.

Należy dodać następujący plik skryptu.

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

Zdefiniuj klasę warstwy, która rozszerza klasę 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 }); 
    } 
} 

Ten przykład renderuje arc-layer google bibliotekę deck.gl .

Aby zapoznać się z w pełni funkcjonalnym przykładem kodu źródłowego, zobacz Deck GL niestandardową warstwę WebGL w przykładach usługi Azure Mapy.

Następne kroki

Dowiedz się więcej o klasach i metodach używanych w tym artykule: