Menambahkan lapisan WebGL kustom ke peta

Azure Peta Web SDK mendukung pembuatan lapisan kustom menggunakan WebGL. WebGL didasarkan pada OpenGL ES dan memungkinkan penyajian grafik 2D dan 3D di browser web.

Dengan menggunakan WebGL, Anda dapat membangun grafik interaktif berperforma tinggi yang dirender di browser secara real time yang mendukung skenario seperti simulasi, visualisasi data, animasi, dan pemodelan 3D.

Pengembang dapat mengakses konteks WebGL peta selama penyajian dan menggunakan lapisan WebGL kustom untuk berintegrasi dengan pustaka lain seperti three.js dan deck.gl untuk menyediakan konten yang diperkaya dan interaktif di peta.

Menambahkan lapisan WebGL

Sebelum dapat menambahkan lapisan WebGL ke peta, Anda harus memiliki objek yang mengimplementasikan WebGLRenderer antarmuka. Pertama, buat lapisan WebGL dengan menyediakan id objek dan renderer ke konstruktor, lalu tambahkan lapisan ke peta agar dirender.

Kode sampel berikut menunjukkan cara menambahkan lapisan WebGL ke peta:

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

Catatan

Kelas WebGLLayer ini mendukung minZoomopsi lapisan , maxZoom, dan visible .

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

Sampel ini merender segitiga di peta menggunakan lapisan WebGL.

Untuk sampel yang berfungsi penuh dengan kode sumber, lihat Lapisan WebGL 2D Sederhana di Sampel Azure Peta.

Matriks kamera peta digunakan untuk memproyeksikan titik Mercator buncis ke gl koordinat. Mercator point [0, 0] mewakili sudut kiri atas dunia Mercator dan [1, 1] mewakili sudut kanan bawah. Kapan renderingMode adalah "3d", koordinat z sesuai. Kotak dengan panjang x, y, dan z yang identik dalam unit Mercator akan dirender sebagai kubus.

Kelas MercatorPoint ini memiliki fromPositionmetode statis , fromPositions, dan toFloat32Array yang dapat digunakan untuk mengonversi Posisi geospasial ke titik Mercator. Demikian pula metode dan toPositions dapat digunakan untuk memproyeksikan toPosition titik Mercator ke Posisi.

Merender model 3D

Gunakan lapisan WebGL untuk merender model 3D. Contoh berikut menunjukkan cara memuat file glTF dan merendernya di peta menggunakan three.js.

Anda perlu menambahkan file skrip berikut.

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

Sampel ini merender burung beo 3D animasi di peta.

Untuk sampel yang berfungsi penuh dengan kode sumber, lihat Tiga lapisan WebGL kustom di Sampel Azure Peta.

Fungsi ini onAdd memuat file ke dalam memori dan membuat instans objek three.js seperti Kamera, Adegan, Cahaya, dan THREE.WebGLRenderer.glb .

Fungsi menghitung render matriks proyeksi kamera dan merender model ke adegan.

Tip

• Untuk memiliki animasi berkelanjutan dan lancar, Anda dapat memicu pengecatan ulang satu bingkai dengan memanggil map.triggerRepaint() dalam render fungsi.
• Untuk mengaktifkan anti-aliasing cukup atur antialias ke true sebagai salah satu opsi gaya saat membuat peta.

Merender model 3D menggunakan babylon.js

Babylon.js adalah salah satu mesin grafis berbasis WebGL terkemuka di dunia. Contoh berikut menunjukkan cara memuat file GLTF dan merendernya di peta menggunakan babylon.js.

Anda perlu menambahkan file skrip berikut.

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

Sampel ini merender menara satelit di peta.

Fungsi ini onAdd membuat instans mesin BABYLON dan adegan. Kemudian memuat .gltf file menggunakan BABYLON. SceneLoader.

Fungsi menghitung render matriks proyeksi kamera dan merender model ke adegan.

Untuk sampel yang berfungsi penuh dengan kode sumber, lihat Lapisan WebGL kustom Babylon di Sampel Azure Peta.

Merender lapisan deck.gl

Lapisan WebGL dapat digunakan untuk merender lapisan dari pustaka deck.gl . Sampel berikut menunjukkan visualisasi data aliran migrasi orang di Amerika Serikat dari kabupaten ke kabupaten dalam rentang waktu tertentu.

Anda perlu menambahkan file skrip berikut.

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

Tentukan kelas lapisan yang memperluas 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 }); 
    } 
} 

Sampel ini merender google lapisan arc pustaka deck.gl .

Untuk sampel yang berfungsi penuh dengan kode sumber, lihat Lapisan WebGL kustom Deck GL di Sampel Azure Peta.

Langkah berikutnya

Pelajari selengkapnya tentang kelas dan metode yang digunakan di artikel ini:

WebGLLayer

WebGLLayerOptions

Antarmuka WebGLRenderer

MercatorPoint