怎么用webgl方式加載point

本篇內容介紹了“怎么用webgl方式加載point”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

這種方式不同于使用Leaflet的API加載point，這個是在地圖的上層覆蓋一個canvas對象，使用的是開源的L.CanvasOverlay.js，github上可以搜索到這個，將point繪制在canvas上，在地圖范圍或級別的動態變化時，計算vertex shader中的變換矩陣，保持和地圖上的位置一致。

json坐標數據量：

關鍵的shader：

<!-- vertex shader -->

    <script id="vshader" type="x-shader/x-vertex">

        uniform mat4 u_matrix;

        attribute vec4 a_vertex;

        attribute float a_pointSize;

        attribute vec4 a_color;

        varying vec4 v_color;

        void main() {

        // Set the size of the point

        gl_PointSize =  a_pointSize; 

        // multiply each vertex by a matrix.

        gl_Position = u_matrix * a_vertex;  

        // pass the color to the fragment shader

        v_color = a_color;

        }

    </script>

    <!-- fragment shader --> 

    <script id="fshader" type="x-shader/x-fragment">

        precision mediump float;

        varying vec4 v_color;

        void main() {

        float border = 0.05;

        float radius = 0.5;

        vec4 color0 = vec4(0.0, 0.0, 0.0, 0.0);

        vec4 color1 = vec4(v_color[0], v_color[1], v_color[2], 0.2);

        vec2 m = gl_PointCoord.xy - vec2(0.5, 0.5);

        float dist = radius - sqrt(m.x * m.x + m.y * m.y);

        float t = 0.0;

        if (dist > border)

        t = 1.0;

        else if (dist > 0.0)

        t = dist / border;

        // float centerDist = length(gl_PointCoord - 0.5);

        // works for overlapping circles if blending is enabled

        gl_FragColor = mix(color0, color1, t);

        /*

        // -- another way for circle

        float centerDist = length(gl_PointCoord - 0.5);

        float radius = 0.5;

        // works for overlapping circles if blending is enabled

        gl_FragColor = vec4(v_color[0], v_color[1], v_color[2], 0.2 * step(centerDist, radius));

        */

        /*

        // simple circles

        float d = distance (gl_PointCoord, vec2(0.5,0.5));

        if (d < 0.5 ){

        gl_FragColor =vec4(v_color[0], v_color[1], v_color[2], 0.2);

        }

        else{

        discard;

        }

        */

        // -- squares

        //gl_FragColor = v_color;

        //gl_FragColor =vec4(v_color[0], v_color[1], v_color[2], 0.2); // v_color;

        }

    </script>

// -- converts latlon to pixels at zoom level 0 (for 256x256 tile size) , inverts y coord )

        // -- source : http://build-failed.blogspot.cz/2013/02/displaying-webgl-data-on-google-maps.html

//將經緯度轉換像素的代碼，在第一級別進行轉換

        function LatLongToPixelXY(latitude, longitude) {

            var pi_180 = Math.PI / 180.0;

            var pi_4 = Math.PI * 4;

            var sinLatitude = Math.sin(latitude * pi_180);

            var pixelY = (0.5 - Math.log((1 + sinLatitude) / (1 - sinLatitude)) / (pi_4)) * 256;

            var pixelX = ((longitude + 180) / 360) * 256;

            var pixel = { x: pixelX, y: pixelY };

            return pixel;

        }

//計算轉換的矩陣

function drawingOnCanvas(canvasOverlay, params) {

            if (gl == null) return;

            gl.clear(gl.COLOR_BUFFER_BIT);

            pixelsToWebGLMatrix.set([2 / canvas.width, 0, 0, 0, 0, -2 / canvas.height, 0, 0, 0, 0, 0, 0, -1, 1, 0, 1]);

            gl.viewport(0, 0, canvas.width, canvas.height);

            var pointSize = Math.max(leafletMap.getZoom() - 4.0, 1.0);

            gl.vertexAttrib1f(gl.aPointSize, pointSize);

            // -- set base matrix to translate canvas pixel coordinates -> webgl coordinates

            mapMatrix.set(pixelsToWebGLMatrix);

            var bounds = leafletMap.getBounds();

            var topLeft = new L.LatLng(bounds.getNorth(), bounds.getWest());

            var offset = LatLongToPixelXY(topLeft.lat, topLeft.lng);

            // -- Scale to current zoom

            var scale = Math.pow(2, leafletMap.getZoom());

            scaleMatrix(mapMatrix, scale, scale);

            translateMatrix(mapMatrix, -offset.x, -offset.y);

            // -- attach matrix value to 'mapMatrix' uniform in shader

            gl.uniformMatrix4fv(u_matLoc, false, mapMatrix);

            gl.drawArrays(gl.POINTS, 0, numPoints);

        }

“怎么用webgl方式加載point”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！