mapbox

mapbox

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

```javascript
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 =  - 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);
glpileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentSource);
glpileShader(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.UniformLocation(this.program, "u_matrix"), false, matrix);
gl.uniform1f(this.aTime, utime);
var duration = 1000;
utime = (w() % duration) / duration;
gl.drawArrays(gl.POINTS, 0, 2);
//实现实时渲染
iggerRepaint();
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);
}

实现效果图：
![在这里插入图片描述](.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djbHdrc24yMDE5,size_16,color_FFFFFF,t_70)
更多文章请关注公众号查看！
![在这里插入图片描述](.png)