javascript - 如何在 openlayers 3 或 openlayers 4 中添加带有动画的新 Canvas

Question

我在 canvas 中绘制了一个动画，如 this并使用 openlayers4 渲染了一张 map 。我想在下一步中将此 Canvas 添加到 map [openlayers canvas]。

我曾使用 ol.source.ImageCanvas 为 openlayers 添加边界，因此我尝试使用 ImageCanvas 添加带有动画的 Canvas ，但失败了。

此外，openlayers API说ol.source.ImageCanvas方法只能添加图像 Canvas 。我不知道 animate canvas 是否如此。

我应该坚持使用 ImageCanvas 方法还是尝试其他方法？

如果我放弃 ImageCanvas 方法，有人能给我一个例子吗？

Answer 1

经过一些尝试，我找到了解决方案!哈哈!

首先:ol.source.ImageCanvas可以仍然使用，但是你会得到一个停止的动画，就像截图一样。

其次:必知ol.map.render()在 openlayers3 或 openlayers4 中，其描述为:

Request a map rendering (at the next animation frame).

因此，您可以使用它来刷新 map 并获取 Canvas 的下一个动画。

以下是我的代码片段:

    var topoCanvas = function(extent, resolution, pixelRatio, size, projection) {
    // topo features;
    var features = topojson.feature(tokyo, tokyo.objects.counties);
    var canvasWidth = size[0];
    var canvasHeight = size[1];

    var canvas = d3.select(document.createElement('canvas'));
    canvas.attr('width', canvasWidth).attr('height', canvasHeight);

    var context = canvas.node().getContext('2d');

    var d3Projection = d3.geo.mercator().scale(1).translate([0, 0]);
    var d3Path = d3.geo.path().projection(d3Projection);

    var pixelBounds = d3Path.bounds(features);
    var pixelBoundsWidth = pixelBounds[1][0] - pixelBounds[0][0];
    var pixelBoundsHeight = pixelBounds[1][1] - pixelBounds[0][1];

    var geoBounds = d3.geo.bounds(features);
    var geoBoundsLeftBottom = ol.proj.transform(geoBounds[0], 'EPSG:4326', projection);
    var geoBoundsRightTop = ol.proj.transform(geoBounds[1], 'EPSG:4326', projection);
    var geoBoundsWidth = geoBoundsRightTop[0] - geoBoundsLeftBottom[0];
    if (geoBoundsWidth < 0) {
        geoBoundsWidth += ol.extent.getWidth(projection.getExtent());
    }
    var geoBoundsHeight = geoBoundsRightTop[1] - geoBoundsLeftBottom[1];

    var widthResolution = geoBoundsWidth / pixelBoundsWidth;
    var heightResolution = geoBoundsHeight / pixelBoundsHeight;
    var r = Math.max(widthResolution, heightResolution);
    var scale = r / (resolution / pixelRatio);

    var center = ol.proj.transform(ol.extent.getCenter(extent), projection, 'EPSG:4326');
    d3Projection.scale(scale).center(center).translate([canvasWidth / 2, canvasHeight / 2]);
    d3Path = d3Path.projection(d3Projection).context(context);
    d3Path(features);
    context.stroke();
    // above code is add a topoJson boundary to canvas
    // below code is add an animation to canvas
    var settings = createSettings(tokyo, {
        width: canvasWidth,
        height: canvasHeight
    });
    // reset the projection and bounds for animation canvas
    settings.projection = d3Projection;
    settings.bounds = geoBounds;

    var mesh = buildMeshes(tokyo, settings);

    when(render(settings, mesh, {
        width: canvasWidth,
        height: canvasHeight
    })).then(function(masks) {
        when(interpolateField(stations, data, settings, masks)).then(function(field) {
            // wind moving animation
            animate(settings, field, canvas);
            // refresh  the map to get animation
            window.setInterval(function() {

                map.render();
            }, 50);

        });
    });

    return canvas[0][0];
}