时间戳

首页 > 解决方案 > OpenLayers 将几何图形渲染到 Canvas

javascript - OpenLayers 将几何图形渲染到 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）中的几何图形呢？

PS 我看到了问题“我们如何使用样式而不使用地图将 OpenLayers 3 功能渲染到画布”，但我不明白代码适用于什么投影。并澄清作者不允许我在stackoverflow上的低声誉。

标签： javascriptcanvasgeometryrenderingopenlayers

解决方案

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

getPixelFromCoordinate如果您在地图画布中绘图，请查看地图的功能。

推荐阅读