Question

我将amCharts图表添加到了openlayers地图叠加层中，但是图表光标缩放无法像下面提供的gif那样起作用：

此处提供的示例：

// 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的更多信息

问题是，相同的单击和拖动事件将传播到背面的地图上，并且无法选择图表。在此fiddle上可以看到此故障的示例。此外，Github上还有a ticket关于这个确切的问题。

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

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
}

禁用新的叠加层创建事件。

可以找到最后完美工作的小提琴 here

Pirooz bashi好友

amCharts光标缩放在openlayers覆盖中不起作用

1 个答案: