Leaflet系列：webgl方式加载point

决方案来源于github，基于Leaflet的地图的，使用webgl方式加载了8万多个点，除去互联网上访问数据，渲染的时候没有出现卡顿的情况，缩放也没有卡顿，此方式可以作为一个地图上加载特征图层的方式。

这种方式不同于使用Leaflet的API加载point，这个是在地图的上层覆盖一个canvas对象，使用的是开源的L.CanvasOverlay.js，github上可以搜索到这个，将point绘制在canvas上，在地图范围或级别的动态变化时，计算vertex shader中的变换矩阵，保持和地图上的位置一致。

json坐标数据量：

关键的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);



    }

关注公众号，查看更多文章！