konvajs 和 openlayers 之间的混合模式

Question

我尝试在 konvajs (https://konvajs.org/) 和 openlayers (https://openlayers.org/) 之间使用混合模式

我有一张用 openlayers 创建的地图，然后我使用 openlayers 的 Overlay (https://openlayers.org/en/latest/examples/overlay.html) 在地图上添加 canvas konvajs。

我试过了：

1. konvajs 的属性globalCompositeOperation，但它仅适用于 konvajs 中的项目
2. css mix-blend-mode，但是 konvajs 中的所有项目都卡在相同的模式下，我希望每个项目都有不同的模式。

有什么办法可以做到吗？

这里是我尝试使用上面的 No.1 的示例代码： https://codesandbox.io/s/cool-monad-ow21j?file=/main.js

Answer 1

为了帮助研究 OpenLayer 和 Konvajs 画布如何交互，我创建了以下 sn-p。这将绘制一个 Openlayer 地图元素，然后添加一个 Konvajs 画布元素。两者都是绝对定位的，因此它们重叠。我添加了一些具有不同不透明度的简单矩形来说明这种可能性，以防万一这是您真正需要的。

下图显示了元素的 F12 检查器视图。正如我们所见，标签 a 指出 OpenLayers 元素使用了专用画布。同样，标签 b 显示 Konvajs 画布。

结论是这些元素确实是独立的 HTML5 画布元素。因此问题切换到“是否可以在画布上使用混合模式？”。幸运的是，这是asked before。

所以，在回答您的问题时，“有什么方法可以实现 [OpenLayer 和 Konvajs 之间的混合]？”答案似乎是肯定的。但是，看看潜在的方法，您似乎可能会失去两个画布层的一些鼠标/触摸功能。

// Create the map element
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([-1.1656, 51.0856]),
    zoom: 15
  })
});


// Create the Konva element
var stage = new Konva.Stage({container: 'container1', width: 600, height: 400});
var layer1 = new Konva.Layer();
stage.add(layer1);

var rect = new Konva.Rect({x: 100, y: 25, width: 100, height: 50, fill: 'magenta', stroke: 'black', draggable: true });
layer1.add(rect); 

rect = new Konva.Rect({x: 200, y: 75, width: 100, height: 50, fill: 'magenta', stroke: 'black', draggable: true, opacity: 0.5 });
layer1.add(rect); 

rect = new Konva.Rect({x: 300, y: 125, width: 100, height: 50, fill: 'magenta', stroke: 'black', draggable: true, opacity: 0.25 });
layer1.add(rect); 

stage.draw();

      .map {
        height: 400px;
        width: 100%;
      }

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>
    <div id="map" class="map"  style="left: 0; top: 0; width: 600px; height: 400px; background-color: transparent; position: absolute;"></div>
    
    <div id='container1' style="left: 0; top: 0; width: 600px; height: 400px; background-color: transparent; position: absolute;"></div>