应用OpenLayers过滤器,并在我将地图保存为图像时使其保持。

huangapple go评论68阅读模式
英文:

Apply an openlayers filter and have it persist when I save the map as an image

问题

我已经创建了一个包含各种折线的OpenLayers地图。我正在使用默认的OpenStreetMap图层,但希望将其变暗以突出显示我的折线。我发现可以使用以下方式实现:

map.getLayers().getArray()[0].on('postcompose', function (evt) {
   evt.context.canvas.style.filter="invert(99%)";
});

然而,我还想让用户能够将此地图下载为PNG格式。为此,我使用以下代码,通过按钮点击触发:

map.once('postcompose', function(event) {
   var canvas = event.context.canvas;
   if (navigator.msSaveBlob) {
      navigator.msSaveBlob(canvas.msToBlob(), 'mymap.png');
   } else {
      canvas.toBlob(function(blob) {
         saveAs(blob, 'mymap.png')
      });
   }
});
map.renderSync();

不幸的是,这样做不会保留我对画布所做的修改。请有人可以帮助我吗?谢谢你的阅读。

英文:

I have made an openlayers map with various polylines on it. I am using the default openstreetmap layer, but would like to darken it to make my polylines stand out. I've discovered that I can do this as follows:

map.getLayers().getArray()[0].on('postcompose', function (evt) {
   evt.context.canvas.style.filter="invert(99%)";
});

However, I'd also like to give my users the ability to download this map as a PNG. For that, I am using the following code, triggered from a button click:

map.once('postcompose', function(event) {
   var canvas = event.context.canvas;
   if (navigator.msSaveBlob) {
      navigator.msSaveBlob(canvas.msToBlob(), 'mymap.png');
   } else {
      canvas.toBlob(function(blob) {
         saveAs(blob, 'mymap.png')
      });
   }
});
map.renderSync();

Unfortunately, this does not preserve the amendment I made to adjust the canvas.

Please can someone help me? Thank you for reading.

答案1

得分: 1

在元素上设置样式过滤器不会影响toBlob()toDataURL()的输出。如果您想要更改画布上下文而不是浏览器渲染画布的方式,您需要使用globalCompositeOperation(根据您使用的代码,我假设您正在使用OpenLayers 5):

map.getLayers().getArray()[0].on('postcompose', function (evt) {
  evt.context.globalCompositeOperation = 'difference';
  evt.context.fillStyle = 'white';
  evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height);
  evt.context.globalCompositeOperation = 'source-over';
});
英文:

Setting a style filter on an element will not affect the output of toBlob() or toDataURL(). If you want to change the canvas context instead of how the browser renders the canvas you will need a globalCompositeOperation (from the code you are using I presume you are using OpenLayers 5):

map.getLayers().getArray()[0].on('postcompose', function (evt) {
  evt.context.globalCompositeOperation = 'difference';
  evt.context.fillStyle = 'white';
  evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height);
  evt.context.globalCompositeOperation = 'source-over';
});

huangapple
  • 本文由 发表于 2023年7月4日 21:57:27
  • 转载请务必保留本文链接:https://go.coder-hub.com/76613395.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定