mapbox-gl：自定义webgl图层（1）

最新推荐文章于 2024-07-29 13:14:22 发布

GIS技术杂谈

最新推荐文章于 2024-07-29 13:14:22 发布

阅读量915

点赞数

分类专栏： gis 文章标签： mapbox-gl webgl

本文链接：https://blog.csdn.net/wclwksn2019/article/details/115159281

版权

gis 专栏收录该内容

314 篇文章 66 订阅

订阅专栏

在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 = 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);
}

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