共计 4133 个字符,预计需要花费 11 分钟才能阅读完成。
写文目标
不是常常用,可能会遗记根本用法,自留。
贴图
成果
留神点
- 形成矩形的两个三角形须要应用
mapboxgl.MercatorCoordinate.fromLngLat
办法转换至 WebGL 中的场景世界坐标,留神案例中是如何设置三角形程序的,要逆时针 render
函数是每一帧绘制的调用函数,每一帧都要设置一次 program、texture、vertexBuffer,能力触发 draw,并且尤为留神矩阵 uniform 的地址,也是每一帧都要获取最新的(gl.getUniformLocation(this.program, 'u_matrix')
)- 贴图的长宽尺寸要用 2 的次幂
源码
拜访令牌请应用本人的,代码不做解释,根本的正文已齐备。
页面局部(省略,请本人补全):
<link href="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js"></script>
<style>
#map {
width: 90vw;
height: 90vh;
}
</style>
<div id="map"></div>
<script>
// js 局部,见下
</script>
js 局部:
mapboxgl.accessToken = '你的令牌'
const map = new mapboxgl.Map({
container: 'map',
zoom: 7,
center: [112.5, 22.5],
style: 'mapbox://styles/mapbox/light-v10',
// 开启 WebGL 的 msaa(抗锯齿)antialias: true
})
const vertexSource = /* glsl */`
uniform mat4 u_matrix;
attribute vec3 a_pos;
attribute vec2 a_uv;
varying vec2 v_uv;
void main() {
v_uv = a_uv;
gl_Position = u_matrix * vec4(a_pos, 1.0);
}`
const fragmentSource = /* glsl */`
precision mediump float;
varying vec2 v_uv;
uniform sampler2D u_sampler;
void main() {gl_FragColor = texture2D(u_sampler, v_uv);
}`
// create a custom style layer to implement the WebGL content
const customLayer = {
id: 'highlight',
type: 'custom',
// 当图层增加时调用的函数
// https://docs.mapbox.com/mapbox-gl-js/api/#styleimageinterface#onadd
onAdd: function (map, /** @type {WebGLRenderingContext} */gl) {
// 创立、编译顶点着色器
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)
// 把 vertexAttributes 和 uniform 在着色器中的地位保留下来
this.aPos = gl.getAttribLocation(this.program, 'a_pos')
this.aUv = gl.getAttribLocation(this.program, 'a_uv')
this.uSamplerLoc = gl.getUniformLocation(this.program, 'u_sampler')
// 四个点用于定义一个矩形
const p1 = mapboxgl.MercatorCoordinate.fromLngLat({
lng: 112.5494384765625,
lat: 22.268764039073968
}, 10)
const p2 = mapboxgl.MercatorCoordinate.fromLngLat({
lng: 114.0216064453125,
lat: 22.268764039073968
}, 10)
const p3 = mapboxgl.MercatorCoordinate.fromLngLat({
lng: 114.0216064453125,
lat: 23.28171917560002
}, 10)
const p4 = mapboxgl.MercatorCoordinate.fromLngLat({
lng: 112.5494384765625,
lat: 23.28171917560002
}, 10)
// 加载贴图并创立纹理,在加载结束的回调函数中上载贴图数据
const img = new Image()
img.src = './img.png'
this.texture = gl.createTexture()
img.onload = () => {
// bind 和 storei 操作必须等纹理解码实现
gl.bindTexture(gl.TEXTURE_2D, this.texture)
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)
// 上载数据
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img)
}
// 创立 VBO
this.buffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer)
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array([
// position, uv
p1.x, p1.y, p1.z, 0, 0,
p2.x, p2.y, p2.z, 1, 0,
p3.x, p3.y, p3.z, 1, 1,
p1.x, p1.y, p1.z, 0, 0,
p3.x, p3.y, p3.z, 1, 1,
p4.x, p4.y, p4.z, 0, 1,
]),
gl.STATIC_DRAW
)
},
// 每帧运行
// https://docs.mapbox.com/mapbox-gl-js/api/#map.event:render
render: function (/** @type {WebGLRenderingContext} */gl, matrix) {
// 每帧都要指定用哪个着色器程序
gl.useProgram(this.program)
// 每帧都要传递 uniform
gl.uniformMatrix4fv(gl.getUniformLocation(this.program, 'u_matrix'),
false,
matrix
)
// 每帧都要绑定纹理参数
gl.bindTexture(gl.TEXTURE_2D, this.texture)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST)
// 每帧都要绑定 VBO,并启用 vertexAttributes、设置 vertexAttributes 的参数
gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer)
gl.enableVertexAttribArray(this.aPos)
gl.enableVertexAttribArray(this.aUv)
gl.vertexAttribPointer(this.aPos, 3, gl.FLOAT, false, 20, 0)
gl.vertexAttribPointer(this.aUv, 2, gl.FLOAT, false, 20, 12)
// 如果你用不着透明度,能够不执行这两行
// gl.enable(gl.BLEND)
// gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
// 触发绘制
gl.drawArrays(gl.TRIANGLES, 0, 6)
}
}
map.on('load', () => {map.addLayer(customLayer)
})
可改良点
上述例子在增加进 map 之后,图片还是没有申请、解码实现的,其回调函数还没有执行,如果你不去动一下地图,比方点击一下或挪动一下视角,是不会更新的,有可能是黑黑的一个框 —— 纹理还没筹备好,只能画黑框框。
改良办法也很简略,能够先在自定义图层之外异步申请实现图片、解码(Image
反对返回 Promise 的 decode
办法),再将 customLayer 对象创立、增加到地图中。
正文完