OpenLayers将几何渲染到画布

Question

我看到了“将几何图形渲染到画布 ”的示例：

  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）中的几何？

PS，我看到了一个问题“ 我们如何才能使用样式而不是使用地图将OpenLayers 3功能渲染到画布上 ”，但是我不理解代码可以使用的投影方式。 并且要澄清作者不允许我在stackoverflow上声名狼藉 。

Answer 1

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

如果要在地图画布中绘制，请参见地图的getPixelFromCoordinate函数。

Answer 2

@抓到我挖了一点。 在该答案中，他使用canvas.width（以像素为单位）和ol.extent.getWidth（extent）/ height。 ol.Extent只是一个数字数组，没有有关坐标系的任何信息。 如果使用地理坐标，则可以像使用笛卡尔坐标一样使用它们。 因此，这取决于您要扩大显示的区域，但是我建议将其转换为某些投影，然后使用建议的方法-翻译，缩放，翻译（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将几何渲染到画布