三十二、openlayers官网示例解析Draw lines rendered with WebGL——使用WebGL动态修改多边形端点类型、连接类型、偏移量、虚线等设置

本文链接：https://blog.csdn.net/aaa_div/article/details/139289825

官网demo地址：

Draw lines rendered with WebGL

这个示例展示了如何用webgl渲染矢量图形并动态修改点、线属性。

首先先把基本的地图加载上去

initMap() {
      this.map = new Map({
        layers: [
          new TileLayer({
            source: new XYZ({
              url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
            }),
          }),
        ],
        target: "map",
        view: new View({
          center: fromLonLat([8.43, 46.82]),
          zoom: 7,
        }),
      });
    },

然后是基本的交互， Modify是修改、Snap是捕捉，这三个交互都绑定着this.source

addDrawInteraction() {
      this.draw = new Draw({
        source: this.source,
        type: "LineString",
      });
      this.map.addInteraction(this.draw);
      const modify = new Modify({ source: this.source });
      this.map.addInteraction(modify);
      //捕捉
      let snap = new Snap({ source: this.source });
      this.map.addInteraction(snap);
    },

接下来是重点部分，webgl。

什么是webgl？

WebGL 是基于硬件加速的图形库，能够利用 GPU 来进行高效的并行计算。与传统的 2D 绘图方式（如 Canvas 2D API）相比，WebGL 可以处理更多的图形数据、更高的绘图复杂度，并且在高分辨率和高刷新率下保持流畅的性能。这对于需要渲染大量图形元素的应用尤为重要，例如地理信息系统（GIS）、数据可视化和复杂动画。

在需要渲染和处理大量数据点的应用中，如地理信息系统、科学可视化和大数据分析，WebGL 的并行计算能力和高效的渲染管道使其能够在不牺牲性能的情况下处理大规模数据可视化。

在现代地图应用中，WebGL 的应用非常广泛。例如，像 Google Maps 和 Mapbox 这样的地图服务都使用 WebGL 来渲染地图和地理数据。这些应用需要处理大量的地理数据，包括矢量数据和栅格数据，并且需要在用户平移、缩放和旋转地图时保持流畅的交互体验。

webgl不是openlayers中才有的概念，openlayers底层是用的canvas，是因为canvas中有webgl，openlayers才可以使用webgl的。

下面是一个使用canvas+webgl绘制三角形的例子，大家随便看一眼，感受一下webgl就行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL Example</title>
</head>
<body>
    <canvas id="webgl-canvas" width="800" height="600"></canvas>
    <script>
        const canvas = document.getElementById('webgl-canvas');
        const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
        
        if (!gl) {
            console.error("WebGL not supported, falling back on experimental-webgl");
        }
        if (!gl) {
            alert("Your browser does not support WebGL");
        }

        gl.viewport(0, 0, canvas.width, canvas.height);
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        const vertexShaderSource = `
        attribute vec4 a_Position;
        void main() {
            gl_Position = a_Position;
        }`;
        
        const fragmentShaderSource = `
        void main() {
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }`;
        
        function createShader(gl, type, source) {
            const shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);
            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                console.error('Error compiling shader:', gl.getShaderInfoLog(shader));
                gl.deleteShader(shader);
                return null;
            }
            return shader;
        }
        
        const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
        const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

        function createProgram(gl, vertexShader, fragmentShader) {
            const program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);
            if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
                console.error('Error linking program:', gl.getProgramInfoLog(program));
                gl.deleteProgram(program);
                return null;
            }
            return program;
        }
        
        const program = createProgram(gl, vertexShader, fragmentShader);
        gl.useProgram(program);

        const vertices = new Float32Array([
            0.0,  0.5,
           -0.5, -0.5,
            0.5, -0