konvajs 和 openlayers 之间的混合模式

Question

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

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

我试过了：

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

有什么办法可以实现吗？

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

Answer 1

为了帮助研究 OpenLayer 和 Konvajs canvas 可能如何交互，我创建了以下代码片段。这会绘制一个 Openlayer 地图元素，然后添加一个 Konvajs canvas 元素。两者都是绝对定位的，因此它们会重叠。我放入了一些不透明度不同的简单矩形，以说明在您真正需要的情况下的可能性。

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

结论是这些元素确实是独立的HTML5canvas元素。因此问题切换到'is it possible to use blend mode across canvasses?'。幸运的是，这是 asked before。

因此，在回答您的问题时，'Is there any way to achieve this [blend between OpenLayer and Konvajs] ?' 答案似乎是肯定的。但是，看看潜在的方法，您似乎可能会失去两个 canvas 层的一些 mouse/touch 功能。

// 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>

konvajs 和 openlayers 之间的混合模式

Blending mode between konvajs and openlayers

javascript

openlayers

konvajs