mapbox-gl：自定义webgl图层（1）
在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);
}
实现效果图：
