【记录】openlayers使用WebGLPointsLayer优化VectorLayer加载geojson大文件卡顿问题

生成 VectorSource

const pointSource = new VectorSource({
  url: url,
  format: new GeoJSON(),
});

VectorLayer 写法

const newlayer = new VectorLayer({
  source: pointSource,
  style: (feature) => {
    const type: string = feature.getProperties()[field];
    const color = mapFillColor(parseFloat(type)); // 颜色匹配函数

    return new Style({
      image: new CircleStyle({
        radius: 3, // 圆点半径
        fill: new Fill({ color: color }), // 填充颜色
        stroke: new Stroke({
          color: "#fff", // 边框颜色
          width: 0.5, // 边框宽度
        }),
      }),
    });
  },
});

WebGLPointsLayer 写法

const newWebGLlayer = new WebGLPointsLayer({
  source: pointSource,
  style: {
    'circle-radius': 3,
    "circle-fill-color": [
      "match",
      ["get", "type"],
      1,
      "rgb(139, 209, 0)",
      2,
      "rgb(255, 255, 0)",
      3,
      "rgb(255, 128, 0)",
      4,
      "rgb(255, 0, 0)",
      "rgb(255, 255, 255)",
    ],
    'circle-stroke-color': "rgb(255, 255, 255)",
  },
});

如果只需写点的填充颜色样式"circle-fill-color"，也必须写点大小"circle-radius"，否则会报错
其中match的语法是 [‘match’, input, match1, output1, match2, output2, …, defaultOutput]

相关链接：
openlayers>WebGLStyle：https://openlayers.org/en/latest/apidoc/module-ol_layer_WebGLTile.html#~Style
openlayers>ColorExpression：https://openlayers.org/en/latest/apidoc/module-ol_style_flat.html#~ColorExpression
openlayers>WebGLPointsLayer示例：https://openlayers.org/en/latest/examples/webgl-points-layer.html