javascript - OpenLayers 4 可变图标旋转

Question

我正在从 API 读取各种数据源。 该数据具有许多与 API 端点相关的属性，但都有一些共同的属性，即:

• 东移
• 北移
• 轮换
• 姓名

据此，我生成 GeoJSON 对象(它们都是点要素，并且我将东向/北向转换为纬度/经度)，并通过一些通用代码在 map 上呈现每个数据源:

let vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: (new ol.format.GeoJSON()).readFeatures(featureCollection)
    }),
    style: style
});

this.map.addLayer(vectorLayer);

这会获取 map 上的点，我可以通过创建自定义样式来设置它们的样式吗？我使用图像 (.png) 作为点标记。

但是我需要做的是根据数据的 Rotation 属性旋转标记，但我不知道该怎么做。

来自 API 的每个数据点都有自己的旋转 - 它们并非全部旋转相同的 Angular 。

该系统最初使用 this.map.addOverlay(overlay) 来添加每个点，这在测试中很好，但实际上扩展得不太好，因为渲染时间太长他们。目前我最大的数据集接近 7000 个数据点。

实现这一目标的最佳方法是什么？

Answer 1

您可以使用样式函数代替静态样式:https://openlayers.org/en/latest/apidoc/ol.html#.StyleFunction

因此，您可以根据每个特征的属性计算旋转，设置每个特征的样式。