简单使用 MapboxGL 自定义图层绘制带贴图的矩形

目录

• 贴图
  
• 效果
  
• 注意点
  
• 源码
  
• 可改进点
  

写文目的
不是经常用，可能会忘记基本用法，自留。
贴图


效果


注意点

• 构成矩形的两个三角形需要使用 mapboxgl.MercatorCoordinate.fromLngLat 方法转换至 WebGL 中的场景世界坐标，注意案例中是如何设置三角形顺序的，要逆时针
  
• render 函数是每一帧绘制的调用函数，每一帧都要设置一次 program、texture、vertexBuffer，才能触发 draw，并且尤为注意矩阵 uniform 的地址，也是每一帧都要获取最新的（gl.getUniformLocation(this.program, 'u_matrix')）
  
• 贴图的长宽尺寸要用 2 的次幂
  

源码

访问令牌请使用自己的，代码不做解释，基本的注释已完备。
页面部分（省略，请自己补全）：

1. [/code]js 部分：
2. [code]mapboxgl.accessToken = '你的令牌'
4. const map = new mapboxgl.Map({
5.   container: 'map',
6.   zoom: 7,
7.   center: [112.5, 22.5],
8.   style: 'mapbox://styles/mapbox/light-v10',
9.   // 开启 WebGL 的 msaa（抗锯齿）
10.   antialias: true
11. })
13. const vertexSource = /* glsl */`
14. uniform mat4 u_matrix;
15. attribute vec3 a_pos;
16. attribute vec2 a_uv;
17. varying vec2 v_uv;
18. void main() {
19.   v_uv = a_uv;
20.   gl_Position = u_matrix * vec4(a_pos, 1.0);
21. }`
23. const fragmentSource = /* glsl */`
24. precision mediump float;
25. varying vec2 v_uv;
26. uniform sampler2D u_sampler;
27. void main() {
28.     gl_FragColor = texture2D(u_sampler, v_uv);
29. }`
31. // create a custom style layer to implement the WebGL content
32. const customLayer = {
33.   id: 'highlight',
34.   type: 'custom',
36.   // 当图层添加时调用的函数
37.   // https://docs.mapbox.com/mapbox-gl-js/api/#styleimageinterface#onadd
38.   onAdd: function (map, /** @type {WebGLRenderingContext} */gl) {
40.     // 创建、编译顶点着色器
41.     const vertexShader = gl.createShader(gl.VERTEX_SHADER)
42.     gl.shaderSource(vertexShader, vertexSource)
43.     gl.compileShader(vertexShader)
45.     // 创建、编译片元着色器
46.     const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
47.     gl.shaderSource(fragmentShader, fragmentSource)
48.     gl.compileShader(fragmentShader)
50.     // 创建着色器程序，链接片元和顶点着色器
51.     this.program = gl.createProgram()
52.     gl.attachShader(this.program, vertexShader)
53.     gl.attachShader(this.program, fragmentShader)
54.     gl.linkProgram(this.program)
56.     // 把 vertexAttributes 和 uniform 在着色器中的位置保存下来
57.     this.aPos = gl.getAttribLocation(this.program, 'a_pos')
58.     this.aUv = gl.getAttribLocation(this.program, 'a_uv')
59.     this.uSamplerLoc = gl.getUniformLocation(this.program, 'u_sampler')
61.     // 四个点用于定义一个矩形
62.     const p1 = mapboxgl.MercatorCoordinate.fromLngLat({
63.       lng: 112.5494384765625,
64.       lat: 22.268764039073968
65.     }, 10)
66.     const p2 = mapboxgl.MercatorCoordinate.fromLngLat({
67.       lng: 114.0216064453125,
68.       lat: 22.268764039073968
69.     }, 10)
70.     const p3 = mapboxgl.MercatorCoordinate.fromLngLat({
71.       lng: 114.0216064453125,
72.       lat: 23.28171917560002
73.     }, 10)
74.     const p4 = mapboxgl.MercatorCoordinate.fromLngLat({
75.       lng: 112.5494384765625,
76.       lat: 23.28171917560002
77.     }, 10)
79.     // 加载贴图并创建纹理，在加载完毕的回调函数中上载贴图数据
80.     const img = new Image()
81.     img.src = './img.png'
82.     this.texture = gl.createTexture()
83.     img.onload = () => {
84.       // bind 和 storei 操作必须等纹理解码完成
85.       gl.bindTexture(gl.TEXTURE_2D, this.texture)
86.       gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)
88.       // 上载数据
89.       gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img)
90.     }
92.     // 创建 VBO
93.     this.buffer = gl.createBuffer()
94.     gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer)
95.     gl.bufferData(
96.       gl.ARRAY_BUFFER,
97.       new Float32Array([
98.         // position, uv
99.         p1.x, p1.y, p1.z, 0, 0,
100.         p2.x, p2.y, p2.z, 1, 0,
101.         p3.x, p3.y, p3.z, 1, 1,
103.         p1.x, p1.y, p1.z, 0, 0,
104.         p3.x, p3.y, p3.z, 1, 1,
105.         p4.x, p4.y, p4.z, 0, 1,
106.       ]),
107.       gl.STATIC_DRAW
108.     )
109.   },
111.   // 每帧运行
112.   // https://docs.mapbox.com/mapbox-gl-js/api/#map.event:render
113.   render: function (/** @type {WebGLRenderingContext} */gl, matrix) {
114.     // 每帧都要指定用哪个着色器程序
115.     gl.useProgram(this.program)
116.     // 每帧都要传递 uniform
117.     gl.uniformMatrix4fv(
118.       gl.getUniformLocation(this.program, 'u_matrix'),
119.       false,
120.       matrix
121.     )
122.     // 每帧都要绑定纹理参数
123.     gl.bindTexture(gl.TEXTURE_2D, this.texture)
124.     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
125.     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
126.     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST)
127.     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST)
129.     // 每帧都要绑定 VBO，并启用 vertexAttributes、设置 vertexAttributes 的参数
130.     gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer)
131.     gl.enableVertexAttribArray(this.aPos)
132.     gl.enableVertexAttribArray(this.aUv)
133.     gl.vertexAttribPointer(this.aPos, 3, gl.FLOAT, false, 20, 0)
134.     gl.vertexAttribPointer(this.aUv, 2, gl.FLOAT, false, 20, 12)
136.     // 如果你用不着透明度，可以不执行这两行
137.     // gl.enable(gl.BLEND)
138.     // gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
140.     // 触发绘制
141.     gl.drawArrays(gl.TRIANGLES, 0, 6)
142.   }
143. }
145. map.on('load', () => {
146.   map.addLayer(customLayer)
147. })

复制代码

可改进点

上述例子在添加进 map 之后，图片还是没有请求、解码完成的，其回调函数还没有执行，如果你不去动一下地图，比如点击一下或移动一下视角，是不会更新的，有可能是黑黑的一个框 —— 纹理还没准备好，只能画黑框框。
改进方法也很简单，可以先在自定义图层之外异步请求完成图片、解码（Image 支持返回 Promise 的 decode 方法），再将 customLayer 对象创建、添加到地图中。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！