• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

mapbox-gl:自定义webgl图层(1)

互联网 diligentman 2周前 (10-16) 13次浏览

mapbox-gl开发:自定义图层CustomLayer

mapbox-gl的开发中,除了默认的地图动态效果,可以通过两种方式增加地图中的显示效果,一是修改mapboxg-gl的源代码,另外就是通过加载自定义图层(
CustomLayer)的方式,
CustomLayer
上可以以webgl的方式实现,也能够以html5 canvas形式去实现。
下边简单的以代码形式展示地图上的–动态闪光圆环效果:

//定义着色器代码

const vertexSource =

`uniform mat4 u_matrix;

            attribute vec4 a_position;

             void main() {

               gl_Position = u_matrix * a_position;

               gl_PointSize = 64.0;

              }`;

   //定义片段着色器代码

const frameSource = `precision mediump float;   

uniform float time;

void main(){

     vec2 p = gl_PointCoord.xy – vec2(0.5, 0.5);

     float l = 0.1 / abs(length(p) – 0.4);     

if(length(p) > 0.427||length(p)<0.350)

{

vec4(0.0);

}else

        { 

gl_FragColor = vec4(1.0,0.0,0.0, time);

        }

    }`;

//定义时间变换变量

var utime = 1.0;

//定义mapbox-gl的自定义图层

var customLayer = {

id: ‘mycustomlayer’,

type: ‘custom’,

renderingMode: ‘3d’,

//添加方法

onAdd: function(map, gl) {

//webgl的基础编译代码,文章最后会分享webgl的基础学习网站,可以参见

const fragmentSource = frameSource ;

const vertexShader = gl.createShader(gl.VERTEX_SHADER);

gl.shaderSource(vertexShader, vertexSource);

gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

gl.shaderSource(fragmentShader, fragmentSource);

gl.compileShader(fragmentShader);

this.program = gl.createProgram();

gl.attachShader(this.program, vertexShader);

gl.attachShader(this.program, fragmentShader);

gl.linkProgram(this.program);

//传递位置信息

var positionLocation = gl.getAttribLocation(this.program, “a_position”);

//传递事件变化参数

this.aTime = gl.getUniformLocation(this.program, “time”);

var positionBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

gl.enableVertexAttribArray(positionLocation);

setData(gl);

var size = 3;

var type = gl.FLOAT;

var normalize = false;

var stride = 0;

var offset = 0;

gl.vertexAttribPointer(positionLocation, size, type, normalize, stride, offset);

},

//渲染方法

render: function(gl, matrix) {

gl.useProgram(this.program);

gl.uniformMatrix4fv(gl.getUniformLocation(this.program, “u_matrix”), false, matrix);

gl.uniform1f(this.aTime, utime);

var duration = 1000;

utime = (performance.now() % duration) / duration;

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

//实现实时渲染

map.triggerRepaint();

return true; }

};

//添加测试圆环数据

function setData(gl) {

//以墨卡托的形式添加坐标数据

var singlepoint = mapboxgl.MercatorCoordinate.fromLngLat([117.0, 36.0], 20);

var singlepoint1 = mapboxgl.MercatorCoordinate.fromLngLat([117.06, 36.01], 20);

gl.bufferData(

gl.ARRAY_BUFFER,

new Float32Array([

singlepoint.x, singlepoint.y, singlepoint.z,

singlepoint1.x, singlepoint1.y, singlepoint1.z

]),

gl.STATIC_DRAW);

}

实现效果图:

mapbox-gl:自定义webgl图层(1)


webgl基础知识网站:
https://webglfundamentals.org/

本文分享自微信公众号 – 技术几句杂谈(tecsimplepoint)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。


喜欢 (0)