Добавление настраиваемого слоя WebGL на карту

Веб-пакет SDK для Azure Карты поддерживает создание пользовательских слоев с помощью WebGL. WebGL основан на OpenGL ES и включает отрисовку трехмерной графики в веб-браузерах.

С помощью WebGL можно создавать высокопроизводительные интерактивные графики, которые отображаются в браузере в режиме реального времени, которые поддерживают такие сценарии, как моделирование, визуализация данных, анимация и трехмерная моделирование.

Разработчики могут получить доступ к контексту WebGL карты во время отрисовки и использовать пользовательские слои WebGL для интеграции с другими библиотеками, такими как три.js и deck.gl для предоставления обогащенного и интерактивного содержимого на карте.

Добавление слоя WebGL

Прежде чем добавить слой WebGL на карту, необходимо иметь объект, реализующий WebGLRenderer интерфейс. Сначала создайте слой WebGL, предоставив id конструктору объект и renderer объект, а затем добавьте слой в карту для отрисовки.

В следующем примере кода показано, как добавить слой WebGL на карту:

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

Примечание.

Класс WebGLLayer поддерживает minZoommaxZoomпараметры уровня, а также 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
    }
));

Этот пример отрисовывает треугольник на карте с помощью слоя WebGL.

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

Полный функциональный пример с исходным кодом см. в статье Simple 2D WebGL layer in the Azure Карты Samples.

Матрица камеры карты используется для проецировать сферическую точку Меркатора на gl координаты. Точка Меркатора [0, 0] представляет верхний левый угол мира Меркатора, а [1, 1] представляет нижний правый угол. В противном renderingMode случае "3d"координата z соответствует требованиям. Поле с идентичными длинами x, y и z в единицах Меркатора будет отображаться в виде куба.

Класс MercatorPoint имеет fromPositionfromPositionsи toFloat32Array статические методы, которые можно использовать для преобразования геопространственной позиции в точку Меркатора. Аналогичным образом toPosition можно использовать методы для toPositions проецирования точки Mercator на позицию.

отрисовка трехмерной модели.

Используйте слой WebGL для отрисовки трехмерных моделей. В следующем примере показано, как загрузить файл glTF и отобразить его на карте с помощью three.js.

Необходимо добавить следующие файлы скриптов.

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

Этот пример отрисовывает анимированный трехмерный попугай на карте.

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

Полный функциональный пример с исходным кодом см. в разделе "Три пользовательских слоя WebGL" в azure Карты Samples.

Функция onAdd загружает .glb файл в память и создает экземпляры объектов three.js, таких как Камера, Сцена, Свет и .THREE.WebGLRenderer

Функция render вычисляет матрицу проекции камеры и отрисовывает модель на сцену.

Совет

  • Для непрерывной и плавной анимации можно активировать перезапущение одного кадра, вызвав map.triggerRepaint() функцию render .
  • Чтобы включить функцию защиты от псевдонима, просто задайте antialias true один из вариантов стиля при создании карты.

Отрисовка трехмерной модели с помощью babylon.js

Babylon.js является одним из ведущих графических двигателей на основе WebGL в мире. В следующем примере показано, как загрузить ФАЙЛ GLTF и отобразить его на карте с помощью babylon.js.

Необходимо добавить следующие файлы скриптов.

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

В этом примере отображается спутниковая башня на карте.

Функция onAdd создает экземпляр обработчика BABYLON и сцены. Затем он загружает .gltf файл с помощью BABYLON. SceneLoader.

Функция render вычисляет матрицу проекции камеры и отрисовывает модель на сцену.

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

Полный функциональный пример с исходным кодом см. в статье Babylon custom WebGL layer in the Azure Карты Samples.

Отрисовка слоя deck.gl

Слой WebGL можно использовать для отрисовки слоев из библиотеки deck.gl . В следующем примере показана визуализация данных потока миграции людей в США из округа в округ в течение определенного диапазона времени.

Необходимо добавить следующий файл скрипта.

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

Определите класс слоя, который расширяется 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 }); 
    } 
}

В этом примере отрисовывается arc-слой google библиотеки deck.gl .

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

Полный функциональный пример с исходным кодом см. в разделе "Палуба GL" пользовательского уровня WebGL в azure Карты Samples.

Следующие шаги

Дополнительные сведения о классах и методах, которые используются в этой статье:

WebGLLayer

WebGLLayerOptions

Интерфейс WebGLRenderer

МеркаторPoint

  • Last updated on