生成 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