OpenLayers 将几何图形渲染到 Canvas答案

【问题标题】：OpenLayers rendering Geometry to CanvasOpenLayers 将几何图形渲染到 Canvas
【发布时间】：2018-05-25 11:52:34
【问题描述】：

我看到了一个“Render geometries to a canvas”的例子：

  var canvas = document.getElementById('canvas');
  var vectorContext = ol.render.toContext(canvas.getContext('2d'), {size: [100, 100]});

  var fill = new ol.style.Fill({color: 'blue'});
  var stroke = new ol.style.Stroke({color: 'black'});
  var style = new ol.style.Style({
    fill: fill,
    stroke: stroke,
    image: new ol.style.Circle({
      radius: 10,
      fill: fill,
      stroke: stroke
    })
  });
  vectorContext.setStyle(style);

  vectorContext.drawGeometry(new ol.geom.LineString([[10, 10], [90, 90]]));
  vectorContext.drawGeometry(new ol.geom.Polygon([[[2, 2], [98, 2], [2, 98], [2, 2]]]));
  vectorContext.drawGeometry(new ol.geom.Point([88, 88]));

但是如何处理投影 EPSG:4326（或 EPSG:3857）中的几何图形？

附言我看到了问题“How can we render an OpenLayers 3 feature to a canvas using a style but not using a map”，但我不明白代码使用什么投影。并澄清作者不允许我在 stackoverflow 上的低声誉。

【问题讨论】：

标签： javascript canvas geometry rendering openlayers

【解决方案1】：

HTML canvas 元素用于通过 JavaScript 动态绘制图形。如果您在画布上的绘图不再有投影，则您处于像素坐标中。您必须以像素为单位转换几何体。

如果您在地图画布上绘图，请查看地图的 getPixelFromCoordinate 函数。

【讨论】：

谢谢，但这不是我需要的。

【解决方案2】：

@Catch我挖了一点。在那个答案中，他使用canvas.width（以像素为单位）和ol.extent.getWidth（extent）/height。 ol.Extent 只是数字数组，没有关于坐标系的任何信息。如果您使用地理坐标，它会像他们是 carthesian 一样与他们一起工作。因此，这取决于您要显示的区域，但我建议将其转换为某种投影，然后使用建议的方法 - 平移、缩放、平移（ol.geom 现在支持缩放）。

我能够在画布上绘制多边形：

    var geoJson = '{"type":"Polygon","coordinates":[[[32.00592041015625,49.55951603052614],[31.97296142578125,49.51673910294474],[32.103424072265625,49.433752230525585],[32.224273681640625,49.346151509388676],[32.54974365234375,49.24718981286537],[32.81890869140625,49.09814978542761],[32.80517578125,49.0729662700941],[32.85736083984375,49.0657686340536],[32.87933349609375,49.08376076915357],[32.95623779296875,49.067568140816434],[32.98370361328125,49.09095579858044],[33.145751953125,49.081961848889364],[33.11828613281251,49.067568140816434],[33.123779296875,49.056770122686174],[33.24737548828125,49.063969062121345],[33.23089599609375,49.16284875720291],[33.12652587890625,49.18080571099239],[33.079833984375,49.256153800301064],[32.95898437500001,49.28841067865025],[32.87933349609375,49.3295971091282],[32.83538818359375,49.38863055043896],[32.8436279296875,49.42794681507826],[32.67608642578125,49.4672315972079],[32.67333984375001,49.4297331699307],[32.7447509765625,49.352413884497594],[32.66510009765625,49.34794084076262],[32.52227783203125,49.38460779401288],[32.31079101562501,49.513172668717914],[32.18856811523438,49.50247180563116],[32.18856811523438,49.50247180563116],[32.00592041015625,49.55951603052614]]]}';
var parser  = new ol.format.GeoJSON();
var feature = parser.readFeature( geoJson );
var geom    = feature.getGeometry();

var canvas  = document.getElementById( 'canvas' );

var fill   = new ol.style.Fill({ color: 'blue' });
var stroke = new ol.style.Stroke({ color: 'black' });
var style  = new ol.style.Style({
    fill  : fill,
    stroke: stroke,
    image : new ol.style.Circle({
        radius: 10,
        fill  : fill,
        stroke: stroke
    })
});



function render( height, width, canvas, geometry, style ) {
    var vectorContext = ol.render.toContext(
                                            canvas.getContext( '2d' ),
                                            { size: [width, height] }
                                        );

    var geom   = geometry.clone(),
        line   = geom.getCoordinates()[0],
        extent = ol.extent.boundingExtent( line );

    var dxy = ol.extent.getCenter(extent),
        sxy = [ 
            width / ol.extent.getWidth(extent),
            height / ol.extent.getHeight(extent)
        ];

    var dx = dxy[0],
        dy = dxy[1],
        sx = sxy[0],
        sy = sxy[1];

    geom.translate( -dx, -dy );
    geom.scale( Math.min(sx, sy), -Math.min(sx, sy) );
    geom.translate( width / 2, height / 2 );

    vectorContext.setStyle( style );
    vectorContext.drawGeometry( geom );
}


geom.transform( 'EPSG:4326', 'EPSG:3857' );
render( 400, 400, canvas, geom, style );

<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<canvas id="canvas" width="400" height="400" style="width: 400px; height: 400px;"></canvas>

例子：

OpenLayers rendering Geometry to Canvas

【讨论】：