Goong Documents
Ví dụ
Add a custom style layer

Add a custom style layer

Use a custom style layer to render custom WebGL content.

Add a custom style layer
Edit in JSFiddleEdit in CodePen

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a custom style layer</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.css" rel="stylesheet" />
<style>
	body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>

<div id="map"></div>
<script>
    goongjs.accessToken = 'wnicbAmnNkoMHNYUKWnlFHezV189FjmMwkNJ7hKW';
    var map = (window.map = new goongjs.Map({
        container: 'map',
        zoom: 3,
        center: [23.477125089122936, 54.809424416263155],
        style: 'https://tiles.goong.io/assets/goong_map_web.json',
        antialias: true // create the gl context with MSAA antialiasing, so custom layers are antialiased
    }));

    // create a custom style layer to implement the WebGL content
    var highlightLayer = {
        id: 'highlight',
        type: 'custom',

        // method called when the layer is added to the map
        // https://docs.goong.io/javascript/properties/#styleimageinterface#onadd
        onAdd: function (map, gl) {
            // create GLSL source for vertex shader
            var vertexSource =
                '' +
                'uniform mat4 u_matrix;' +
                'attribute vec2 a_pos;' +
                'void main() {' +
                '    gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);' +
                '}';

            // create GLSL source for fragment shader
            var fragmentSource =
                '' +
                'void main() {' +
                '    gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);' +
                '}';

            // create a vertex shader
            var vertexShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vertexShader, vertexSource);
            gl.compileShader(vertexShader);

            // create a fragment shader
            var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fragmentShader, fragmentSource);
            gl.compileShader(fragmentShader);

            // link the two shaders into a WebGL program
            this.program = gl.createProgram();
            gl.attachShader(this.program, vertexShader);
            gl.attachShader(this.program, fragmentShader);
            gl.linkProgram(this.program);

            this.aPos = gl.getAttribLocation(this.program, 'a_pos');

            // define vertices of the triangle to be rendered in the custom style layer
            var helsinki = goongjs.MercatorCoordinate.fromLngLat({
                lng: 25.004,
                lat: 60.239
            });
            var berlin = goongjs.MercatorCoordinate.fromLngLat({
                lng: 13.403,
                lat: 52.562
            });
            var kyiv = goongjs.MercatorCoordinate.fromLngLat({
                lng: 30.498,
                lat: 50.541
            });

            // create and initialize a WebGLBuffer to store vertex and color data
            this.buffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
            gl.bufferData(
                gl.ARRAY_BUFFER,
                new Float32Array([
                    helsinki.x,
                    helsinki.y,
                    berlin.x,
                    berlin.y,
                    kyiv.x,
                    kyiv.y
                ]),
                gl.STATIC_DRAW
            );
        },

        // method fired on each animation frame
        // https://docs.goong.io/javascript/map/#map.event:render
        render: function (gl, matrix) {
            gl.useProgram(this.program);
            gl.uniformMatrix4fv(
                gl.getUniformLocation(this.program, 'u_matrix'),
                false,
                matrix
            );
            gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
            gl.enableVertexAttribArray(this.aPos);
            gl.vertexAttribPointer(this.aPos, 2, gl.FLOAT, false, 0, 0);
            gl.enable(gl.BLEND);
            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
        }
    };

    // add the custom style layer to the map
    map.on('load', function () {
        map.addLayer(highlightLayer, 'road-primary');
    });
</script>
</body>
</html>