Leaflet系列:webgl方式加载point
Posted 技术几句杂谈
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Leaflet系列:webgl方式加载point相关的知识,希望对你有一定的参考价值。
解决方案来源于github,基于Leaflet的地图的,使用webgl方式加载了8万多个点,除去互联网上访问数据,渲染的时候没有出现卡顿的情况,缩放也没有卡顿,此方式可以作为一个地图上加载特征图层的方式。
这种方式不同于使用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);
}
以上是关于Leaflet系列:webgl方式加载point的主要内容,如果未能解决你的问题,请参考以下文章