javascript - OL3 ImageCanvas renderFunction 性能不佳

Question

所以我正在尝试使用 Esri opensource example (windy.js)并使用类似于 the OL3 D3 example 的东西在 OpenLayers 3 上渲染它.

windy.js 在 Canvas 上渲染风动画 map 。 Canvas 大小似乎不会改变渲染性能。

首先，我将 windy.js 渲染到 Canvas 上并每 0.5 秒更新一次:

g_windy = new Windy({
    canvas: $("#canvas")[0],
    data: //Some data
});
//map is an OL3 Map object
function redraw() {
  windy.stop();

  setTimeout(function() {
    var mapSize = map.getSize();
    var extent = map.getView().calculateExtent(mapSize);

    extent = ol.proj.transformExtent(extent, 'EPSG:3857', 'EPSG:4326');

    var canvas_bounds = [
        [0,0],
        [mapSize[0]*2, mapSize[1]*2]
      ]; 

      var map_projected_bounds = [
        [
          extent[0],
          extent[1]
        ],
        [
          extent[2],
          extent[3]
        ]
      ];

    windy.start(
      canvas_bounds,
      mapSize[0]*2, mapSize[1]*2, 
      map_projected_bounds
    );
  }, 500);
}

redraw();

我的 canvasFunction 实现引用了 windy.js 呈现并返回它的 Canvas :

var canvasFunction = function(extent, resolution, pixelRatio, size, projection) {
  canvas = $("canvas#canvas")[0];
  canvas.setAttribute('width', map.getSize()[0]*4);
  canvas.setAttribute('height', map.getSize()[1]*4);
  return canvas;
};

我现在将图层添加到我的 map 中:

var canvasLayer = new ol.layer.Image({
  source: new ol.source.ImageCanvas({
    canvasFunction: canvasFunction,
    projection: 'EPSG:3857',
    ratio: 1
  })
});

map.addLayer(canvasLayer);
map.getView().on('change:center', redraw);
map.getView().on('change:resolution', redraw);

//Next I update my map to rerender at a fast interval. Note that having 1 millisecond vs 60 frames/second does not change performace.
setInterval(function() { map.updateSize();}, 1);

我的结果在我的 map 上显示了 windy.js 图层，但我遇到了一个问题:

• windy.js Canvas 的性能问题为零，运行流畅，但 OL3 层在较大的 Canvas / map 尺寸下非常滞后。

复制 Canvas 并不是我们想要实现的完美实现，但它比从 OL3 发出拉取请求并添加可以支持此功能的功能更有效。

Answer 1

因为我是这些风图的忠实粉丝，所以我忍不住试一试。

与 D3 示例的主要区别在于，D3 Canvas 是静态的，只有在 map 范围发生变化时才需要更新。 Windy.js 运行自己的动画循环，并且必须不断更新。首先 windy.js 绘制到它自己的 Canvas 中，然后 ol3 必须将这个 Canvas 绘制到 map 上。也许可以优化此技术，但我建议采用不同的方法:

创建一个 canvas 元素，windy.js 可以在其中绘制。在它旁边为 OpenLayers 创建一个 div 元素:

<div id="map" class="map">
  <canvas id="windyMap" class="fill"></canvas>
  <div id="olMap" class="fill"></div>
</div>

使用几行 CSS 将 Canvas 定位在 map div 上方，并确保事件仍然传递(pointer-events: none)。每次平移/缩放 map 时，重新启动 windy.js 动画。就这样。

Demo - Code