Performant GL Triangles Mapbox GL JS

时间:2016-07-08 01:13:30

标签: javascript mapbox mesh mapbox-gl mapbox-gl-js

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

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

使用说明: - 点击Wind图标(左侧) - 等待三角形占据屏幕 - 平移时间滑块(位于底部)

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

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

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

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

  • 创建geojson FeatureCollection源
  • 创建填充图层
  • 使用数据驱动属性:fill-color

数据功能:

  1. 获取地图范围
  2. Project sw&进入屏幕点(map.project(LatLng))
  3. 将高度和宽度分成部分
  4. 循环通过宽度和高度部分
  5. 查找数据
  6. 访问数据轮播属性
  7. 根据中心点+尺寸
  8. 创建顶点
  9. 旋转顶点
  10. 为顶点创建点对象
  11. Unproject Point Object并包装map.unproject(Point).wrap()
  12. 创建要素对象,指定数据驱动的颜色
  13. 将未投影的LatLng指定为多边形几何的坐标
  14. 添加到要收集的要素数组
  15. 调用图层上的setData
  16. 所以虽然这有效,但我正在寻求更友善的方法。

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

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

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

    编辑:

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

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

1 个答案:

答案 0 :(得分:0)

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