javascript - 高性能 GL 三 Angular 形 Mapbox GL JS

Question

我正在努力尝试创建一个基本的、基于网格的但高性能的天气箭头可视化系统。

编辑 2: 此处的最新版本:( Mapbox Tracker ) 使用下面描述的工作流程的系统

使用说明: - 点击风图标(在左边) - 等待三 Angular 形占据屏幕 - 平移时间 slider (在底部)

正如您将观察到的(尤其是在较大的分辨率下或快速平移时间 slider 时)，绘制三 Angular 形时性能会受到很大影响。

我将非常感谢任何关于从哪里开始使用当前 API 中有帮助的东西的建议，或者关于如何使用某种类型的自定义缓冲区进入当前图形管道的任何想法我只需要旋转、缩放、更改屏幕空间中已经填充的三 Angular 形的颜色。

我觉得好像我的特定用例会从这样的事情中受益匪浅，我真的只是不知道如何处理它。

我有一个使用此工作流运行的简单实现:

• 创建一个 geojson FeatureCollection 源
• 创建一个填充层
• 使用数据驱动属性:填充颜色

数据函数:

1. 获取 map 边界
2. 将 sw & ne 投影到屏幕点 (map.project(LatLng))
3. 将高度和宽度分成几部分
4. 遍历宽度和高度部分
5. 查找数据
6. 访问数据轮换属性
7. 根据中心点+大小创建顶点
8. 旋转顶点
9. 为顶点创建点对象
10. 取消投影点对象并包装 map.unproject(Point).wrap()
11. 创建特征对象，分配数据驱动的颜色
12. 将未投影的 LatLng 作为坐标分配给多边形几何体
13. 添加到特征数组以供收集
14. 在图层上调用setData

因此，虽然这行得通，但我正在寻找对性能更友好的方法的建议。

我在这里想的是我是否可以以某种方式创建一个自定义图层，我只需要在其中绘制屏幕坐标来表示相对于其 LatLng 点的数据。这样我就可以在屏幕空间中绘制彩色、缩放、旋转的三 Angular 形，然后让它们从新的相对 LatLng 位置更新为相关数据。

例如在屏幕上更新某种类型的网格，而不必:取消投影，然后使用 map.getSource('arrows').setData(d)、requestAnimationFrame(function) 等更新特征集合源。

我在其他项目的 three.js 中做过类似的事情，但我更愿意使用更原生的 mapbox。这听起来可行吗？如果是这样，我会看到体面的性能提升吗？ 我之前没有处理过原始 gl 调用等，所以如果它需要达到那样低的级别，我可能需要一个或两个正确方向的指针。

编辑:

以前使用 gmaps/three.js 的实现:volvooceanrace (等待左侧的按钮从灰色变为黑色)单击顶部按钮，悬停时显示“风”标签，滑动下方的红色时间条以更改数据。

添加了当前工作实现的屏幕截图 Mapbox GL Arrows

Answer 1

不确定 2016 年有什么可用，但现在合理的方法可能是使用 symbol 层和 icon-rotate数据驱动属性，根据其数据点的属性旋转每个图标。