如何添加動畫新畫布openlayers3或openlayers4

Question

我畫了一個動畫在帆布像this和使用openlayers4渲染的地圖。我想在下一步中將此畫布添加到地圖[openlayers canvas]中。

我曾經使用過ol.source.ImageCanvas爲openlayers添加邊界，所以我嘗試使用ImageCanvas添加動畫，但失敗。

更重要的是，的OpenLayers API說ol.source.ImageCanvas方法只有圖像畫布可以加入。我不知道是否animate canvas也是如此。

我是否應該使用ImageCanvas方法或嘗試別人？

有人可以給我一個例子，如果我放棄ImageCanvas方法？

Answer 1

經過一番嘗試，我得到了一個解決方案！哈哈！

首先：在ol.source.ImageCanvas可以仍然使用，但你會得到一個停止動畫就像一個屏幕截圖。

二：必須知道openlayers3或openlayers4，其說明是ol.map.render()：

請求的地圖繪製（在下一個動畫幀）。

因此，你可以用它來刷新地圖，並得到畫布的下一個動畫。

以下是我的代碼片段：

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]; 
}