amCharts游标缩放在OpenLayers地图叠加中不起作用

Question

我将amCharts图表添加到OpenLayers地图叠加层，但图表光标缩放不像下面提供的图像那样工作：

以下示例提供：

 // Overlays init variables and function var container; var content; var closer = document.getElementById('popup-closer'); var overlay; function createOverlay(width) { container = document.getElementById('popup'); container.style.width = width; content = document.getElementById('popup-content'); closer = document.getElementById('popup-closer'); return container; } 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([51.338076, 35.699756]), zoom: 12 }) }); map.on("click", function(e) { let coordinates = e.coordinate; createOverlay("500px"); content.innerHTML = '<div id="chartdiv" class="ltr"></div>'; am4core.ready(function() { // Themes begin am4core.useTheme(am4themes_animated); // Themes end var chart = am4core.create("chartdiv", am4charts.XYChart); var data = []; var value = 50; for(let i = 0; i < 300; i++){ let date = new Date(); date.setHours(0,0,0,0); date.setDate(i); value -= Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10); data.push({date:date, value: value}); } chart.data = data; // Create axes var dateAxis = chart.xAxes.push(new am4charts.DateAxis()); dateAxis.renderer.minGridDistance = 60; var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); // Create series var series = chart.series.push(new am4charts.LineSeries()); series.dataFields.valueY = "value"; series.dataFields.dateX = "date"; series.tooltipText = "{value}" series.tooltip.pointerOrientation = "vertical"; chart.cursor = new am4charts.XYCursor(); chart.cursor.snapToSeries = series; chart.cursor.xAxis = dateAxis; //chart.scrollbarY = new am4core.Scrollbar(); chart.scrollbarX = new am4core.Scrollbar(); }); // end am4core.ready() $(".ol-popup").show(); overlay = new ol.Overlay({ element: container, autoPan: true, autoPanMargin: 20, autoPanAnimation: { duration: 50 } }); map.addOverlay(overlay); overlay.setPosition(coordinates); }); 

 /* ol PopUp */ .ol-popup { text-align: right; position: absolute; background-color: white; -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); border-radius: 10px; bottom: 12px; transform: translateX(50%); display: none; } .ol-popup:after, .ol-popup:before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .ol-popup:after { border-top-color: white; border-width: 10px; left: 50%; transform: translateX(-50%); } .ol-popup:before { border-top-color: #cccccc; border-width: 11px; left: 50%; transform: translateX(-50%); } .ol-popup-closer { text-decoration: none !important; font-size: 16px; position: absolute; top: 5px; right: 8px; cursor: pointer; } .map { height: 400px; width: 100%; } #chartdiv { width: 100%; height: 300px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script> <link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet"/> <script src="https://www.amcharts.com/lib/4/core.js"></script> <script src="https://www.amcharts.com/lib/4/charts.js"></script> <script src="https://www.amcharts.com/lib/4/themes/animated.js"></script> <div id="map" class="map"></div> <div id="popup" class="ol-popup"> <i class="fas fa-times ol-popup-closer" id="popup-closer"></i> <div id="popup-content" class="p-4"></div> </div> 

正如您所看到的，我创建了一个动态叠加层并将其添加到地图中，当用户点击地图时，在创建该图表后，将向用户显示叠加弹出窗口，并且图表光标缩放不起作用，但在我网站的其他位置工作得很好。

Answer 1

这是由于OpenLayers Overlay实体停止事件传播（例如，在图表上单击并拖动事件）

这可以通过stopEvent: false轻松禁用;

overlay = new ol.Overlay({
  element: container,
  stopEvent: false,
  autoPan: true,
  autoPanMargin: 20,
  autoPanAnimation: {
    duration: 50
  }
});

有关OpenLayers Overlay更多信息

这样的问题是，相同的点击和拖动事件将传播到后面的地图，并且无法选择图表。 可以在这个小提琴上看到这种麻烦的例子。 此外，Github还有关于这个问题的门票 。

---

为了解决这个问题，我使用了一个非常简单的想法，即跟踪光标在叠加层上的时间，并在这些时间内禁用地图事件;

var mouseOver = false;
function createOverlay(width) {
  container = document.getElementById('popup');
  container.style.width = width;
  container.onmouseover = function() {
    mouseOver = true;   // when cursor is targeting overlay we enable this boolean
  };
  container.onmouseout = function() {
    mouseOver = false;  // and disable when out
  };
  ...
}

然后使用这个boolean如下;

map.on("pointerdrag", function(e) {
  if (mouseOver) {
    e.stopPropagation();
    return;
  }
});

禁用拖动事件，和;

map.on("click", function(e) {
  if (mouseOver) {
    return;
  }
  // rest of chart creation logic here
}

禁用新的叠加创建事件。

最后完美的小提琴可以在这里找到

Pirooz bashi哥们