konvajs和openlayers之间的混合模式

编程问答 2022-08-13

问题描述

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

我有一个使用openlayers创建的地图，然后我使用openlayers的Overlay（https://openlayers.org/en/latest/examples/overlay.html）在地图上添加画布konvajs。

我已经尝试：

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

有什么办法可以做到这一点？

以下是我在上面的No.1中尝试过的示例代码： https://codesandbox.io/s/cool-monad-ow21j?file=/main.js

解决方法

为帮助调查OpenLayer和Konvajs画布如何相互作用，我创建了以下代码段。这将绘制一个Openlayer地图元素，然后添加一个Konvajs画布元素。两者都是绝对放置，以便它们重叠。我使用了一些不透明的简单矩形来说明这种可能性，以防万一，这正是您真正需要的。

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

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

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

F12 view of the elements 

// 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,draggable: true,opacity: 0.5 });
layer1.add(rect); 

rect = new Konva.Rect({x: 300,y: 125,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>

javascriptkonvajsopenlayersopenlayers