自定义图层
如果内置的图层不满足要求,可以自定义图层,详见示例。
自定义图层需要创建自定义的图层类,如下例所示:
let customLayer = {
id: 'highlight',
type: 'custom',
onAdd: function (map, gl) {
// 顶点着色器代码
var vertexSource =
'' +
'uniform mat4 u_matrix;' +
'attribute vec2 a_pos;' +
'void main() {' +
' gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);' +
'}';
// 片元着色器代码
var fragmentSource =
'' +
'void main() {' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);' +
'}';
// 创建顶点着色器对象
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexSource);
gl.compileShader(vertexShader);
// 创建片元着色器对象
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentSource);
gl.compileShader(fragmentShader);
// 创建Program对象
this.program = gl.createProgram();
gl.attachShader(this.program, vertexShader);
gl.attachShader(this.program, fragmentShader);
gl.linkProgram(this.program);
this.aPos = gl.getAttribLocation(this.program, 'a_pos');
// 定义顶点数据
var p1 = wmapgl.MercatorCoordinate.fromLngLat({
lng: 116.125488,
lat: 40.040232
});
var p2 = wmapgl.MercatorCoordinate.fromLngLat({
lng: 116.625366,
lat: 39.943436
});
var p3 = wmapgl.MercatorCoordinate.fromLngLat({
lng: 116.328735,
lat: 39.816975
});
// 缓冲顶点缓冲区
this.buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array([
p1.x,
p1.y,
p2.x,
p2.y,
p3.x,
p3.y
]),
gl.STATIC_DRAW
);
},
render: function (gl, matrix) {
gl.useProgram(this.program);
gl.uniformMatrix4fv(
gl.getUniformLocation(this.program, 'u_matrix'),
false,
matrix
);
gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
gl.enableVertexAttribArray(this.aPos);
gl.vertexAttribPointer(this.aPos, 2, gl.FLOAT, false, 0, 0);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
}
};
map.addLayer(customLayer);
自定义图层的需要实现如下三个方法:
1、constructor 方法
constructor(),表示自定义图层的构造方法,需声明以下变量:id:自定义图层唯一标识,type:自定义图层类型,值为"custom",renderingMode:渲染模式,值域为[“2d”,“3d”],默认值为"2d";
2、onAdd 方法
onAdd(map, gl),表示自定义图层图层添加方法,参数为:map:地图实例,gl:WebGL 句柄;函数内部需要实现以下内容:定义着色器,配置 program、坐标、矩阵等;
3、render 方法
render(gl, matrix),表示自定义图层渲染方法,参数为:gl:WebGL 句柄,matrix:变量矩阵;函数内部需要实现以下内容:绑定缓冲区,绘制自定义图层;