Performant GL Triangles Mapbox GL JS

Question

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

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

使用说明: - 单击风图标(左侧) - 等待三角形占用屏幕 - 平移时间滑块(在底部)

正如您将观察到的那样(特别是在较大的分辨率或快速平移时间滑块时),绘制三角形时会有相当大的性能损失.

我非常感谢任何建议,从哪里开始使用当前API中的某些内容可能有所帮助,或者有关如何使用某种类型的自定义缓冲区进入当前图形管道的任何想法,我只需要旋转,缩放,更改已在屏幕空间中填充的三角形的颜色.

我觉得好像我的具体用例会从这样的事情中受益匪浅,我真的只是不知道如何处理它.

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

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

数据功能:

1. 获取地图边界
2. 项目sw&ne到屏幕点(map.project(LatLng))
3. 将高度和宽度分成几部分
4. 环绕宽度和高度部分
5. 查找数据
6. 访问数据旋转属性
7. 根据中心点+大小创建顶点
8. 旋转顶点
9. 为顶点创建Point对象
10. Unproject Point Object和wrap map.unproject(Point).wrap()
11. 创建要素对象,指定数据驱动的颜色
12. 将未投影的LatLng指定为多边形几何的坐标
13. 添加到集合的功能数组
14. 在图层上调用setData

因此,虽然这有效,但我正在寻求更友好的性能建议.

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

例如,在屏幕上更新某种类型的网格而不必:unproject,然后使用map.getSource('arrows')更新要素集合源.setData(d),requestAnimationFrame(function)等.

我在其他项目中的three.js中做过类似的事情,但我宁愿使用更多mapbox本地的东西.这听起来可行吗？如果是这样,我会看到一个不错的性能提升吗？我之前没有处理过原始gl调用,所以如果它需要得到那么低的水平,我可能需要一个或两个正确方向的指针.

编辑:

以前使用gmaps/three.js实现:volvooceanrace (等待左边的按钮从灰色变为黑色)单击顶部按钮,当悬停在上方时显示"wind"标签,在下面滑动红色时间条以更改数据.

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

Answer 1

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