Openlayers 7.1.0：将样式函数与 WebGLPointsLayer/VectorSource 一起使用答案

【问题标题】：Openlayers 7.1.0: Using a Style Function with WebGLPointsLayer/VectorSourceOpenlayers 7.1.0：将样式函数与 WebGLPointsLayer/VectorSource 一起使用
【发布时间】：2022-11-24 04:13:27
【问题描述】：

我有一个简单的 Openlayers 7.1.0 应用程序 (Node.JS)，它处理 30K+ 记录并使用 WebGLPointsLayer 和 VectorSource 将它们绘制在地图上。使用静态样式对象，每个点都会被渲染，但我想根据特征对每个点进行样式设置。我尝试了样式函数，但样式功能，而不是编译后的样式，被传递给 parseLiteralStyle() ，它失败了未捕获的类型错误：无法读取未定义的属性（读取“大小”）.

知道我做错了什么吗？谢谢。

回购：https://github.com/Tomcariello/ol-plot_direction_and_magnitude-WebGL

const map = new Map({
  layers: [new Tile({source: new OSM()}),
    new WebGLPointsLayer({
      source: new VectorSource({ features: featuresArr,}),

      // THIS STATIC STYLE OBJECT WORKS AS EXPECTED
      style: {
        symbol: {
          symbolType: "triangle",
          size: 8,
          color: "blue",
          rotateWithView: true,
        }
      }

      // A STYLE FUNCTION FAILS TO RENDER
      // Result: Uncaught TypeError: Cannot read properties of undefined (reading 'size')
      // style (feature, resolution) {
      //   return { 
      //     symbol: {
      //       symbolType: "triangle",
      //       size: 8,
      //       color: "blue",
      //     }
      //   }
      // }
    }),
  ],
  target: "map",
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

【问题讨论】：

WebGL 点不支持样式函数，因为样式对象可以使用 ['get', 'speed'] 等表达式访问要素的属性，例如 codesandbox.io/s/simple-forked-ptw09b?file=/main.js
谢谢@Mike，这很好用！

标签： openlayers

【解决方案1】：

再次感谢上面@Mike 提供的解决方案，已推送至repo。

“WebGL 点不支持样式函数，因为样式对象可以使用 [样式] 表达式访问特征的属性”。

单击此处了解有关 Openlayers 的更多信息Style Expressions

这是我的问题的工作风格表达。

style: {
    symbol: {
      symbolType: "triangle",
      size: [
        "array",
        ["*", ["get", "speed"], 0.3], // speed * 0.4 --> width (triangle base)
        ["*", ["get", "speed"], 0.8], // speed * 0.8 --> height (triangle peak)
      ],
      color: [
        "case",
        [">", ["get", "speed"], 40], // if speed over 40 --> red
        "red",
        [">", ["get", "speed"], 20], // if speed over 20 --> blue
        "blue",
        "green", // if speed <= 20 --> green
      ],
      rotation: ["*", ["get", "deg"], Math.PI / 180],
      rotateWithView: true,
    },
  },
}),

【讨论】：