我正在尝试创建一个基本的、基于网格的、但性能良好的天气箭头可视化系统。
编辑2： 最新版本在此处：（Mapbox Tracker），使用下面描述的工作流程
使用说明： - 点击风标图标（在左侧） - 等待三角形出现在屏幕上 - 拖动时间滑块（在底部）
正如你所观察到的（特别是在较大的分辨率或快速拖动时间滑块时），绘制三角形时会有相当大的性能损失。
我非常感谢任何关于如何使用当前API中的某些东西来帮助，或者任何关于如何利用当前图形管道的一些自定义缓冲区的想法，只需要旋转、缩放、更改已经填充在屏幕空间中的三角形的颜色。
我觉得我的具体用例将极大地受益于这样的东西，我真的不知道该如何处理它。
我有一个朴素的实现，使用以下工作流程运行：
- 创建geojson FeatureCollection源 - 创建填充层 - 使用数据驱动属性：填充颜色
编辑：
之前使用gmaps / three.js实现的内容：volvooceanrace（等待左侧按钮从灰色变为黑色），单击顶部按钮，在悬停时显示“风”标签，滑动下面的红色时间条以更改数据。
添加了当前工作实现的屏幕截图Mapbox GL Arrows。
编辑2： 最新版本在此处：（Mapbox Tracker），使用下面描述的工作流程
使用说明： - 点击风标图标（在左侧） - 等待三角形出现在屏幕上 - 拖动时间滑块（在底部）
正如你所观察到的（特别是在较大的分辨率或快速拖动时间滑块时），绘制三角形时会有相当大的性能损失。
我非常感谢任何关于如何使用当前API中的某些东西来帮助，或者任何关于如何利用当前图形管道的一些自定义缓冲区的想法，只需要旋转、缩放、更改已经填充在屏幕空间中的三角形的颜色。
我觉得我的具体用例将极大地受益于这样的东西，我真的不知道该如何处理它。
我有一个朴素的实现，使用以下工作流程运行：
- 创建geojson FeatureCollection源 - 创建填充层 - 使用数据驱动属性：填充颜色
数据功能：
- 获取地图边界
- 将sw和ne投影到屏幕点上（map.project(LatLng)）
- 将高度和宽度分成部分
- 循环遍历宽度和高度部分
- 查找数据
- 访问数据旋转属性
- 基于中心点+大小创建顶点
- 旋转顶点
- 为顶点创建Point对象
- 取消投影的Point Object并包装map.unproject(Point).wrap()
- 创建Feature对象，分配数据驱动颜色
- 将未投影的LatLng分配为多边形几何体的坐标
- 添加到Collection的Feature数组中
- 在图层上调用setData
虽然这样可以工作，但我正在寻求更加性能友好的方法的建议。
我在思考是否可以创建自定义图层，只需要绘制到屏幕坐标来表示相对于其LatLng点的数据。这样我就可以在屏幕空间中绘制着色、缩放、旋转的三角形，然后使它们根据新的相对LatLng位置更新相关数据。
例如，在屏幕上更新某种类型的网格，而不必进行以下操作：解除投影，然后使用map.getSource('arrows').setData(d)更新要素集合源，requestAnimationFrame(function)等。我在其他项目中也使用了three.js完成类似的操作，但我更愿意使用更为本地化的Mapbox。如果这样做，我会看到相当大的性能提升吗？我以前没有处理过原始的gl调用等，所以如果需要达到那个级别，我可能需要一两个指针来指向正确的方向。编辑：
之前使用gmaps / three.js实现的内容：volvooceanrace（等待左侧按钮从灰色变为黑色），单击顶部按钮，在悬停时显示“风”标签，滑动下面的红色时间条以更改数据。
添加了当前工作实现的屏幕截图Mapbox GL Arrows。
