map.on('click') 在 Firefox 中坐标错误

Question

我正在使用 OpenLayers 3.10.1 和以下代码：

map.on('click', function (map, evt) {
    var mouseCoords = [evt.originalEvent.offsetX, evt.originalEvent.offsetY];

    alert(mouseCoords);
});

当我在 IE 或 Chrome 中尽可能靠近地图的左上角单击时，我收到一条警告，鼠标坐标偏离地图的左上角 div，即像 [3,4].

这样明智的东西

但是当我尝试相同的操作时，我得到的是相对于浏览器 window 而不是地图 div 的鼠标坐标。有人知道为什么吗？我是否使用了过时的方法来查找鼠标坐标（最终我可以计算出单击了哪个功能）？

Answer 1

一些备选方案：

map.on('click', function(evt){
    console.info(evt.pixel);
    console.info(map.getPixelFromCoordinate(evt.coordinate));
});

Answer 2

以下代码适用于我（openlayer 4.4，angular 4+）

_initMap() {
  console.info("_initMap");
  this.mapW = new ol.Map({
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      target: 'myMapDiv',
      controls: ol.control.defaults({
          attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
          })
      }),
      view: new ol.View({
          center: ol.proj.fromLonLat([this.lon, this.lat]);,
          zoom: 12
      })
    });
  const theMap = this.mapW; 
  // display on click
  this.mapW.on('click', function(evt) {
    /* // you want to detect feature click
    var feature = theMap.forEachFeatureAtPixel(evt.pixel,
        function(feature, layer) {
          return feature;
        });
    if (feature) {
      var fname = feature.getProperties().name;
      console.info("feature clicked:" + fname);
      return;
    }
    */
    console.info(evt.coordinate);
    console.info(ol.proj.toLonLat(evt.coordinate)); //   <=== coordinate projection
  });

JS 控制台结果（在法国格勒诺布尔附近单击时）：

(2) [637000.3050167585, 5652336.68427412]
(2) [5.722271099853512, 45.19540527485873]

map.on('click') 在 Firefox 中坐标错误

map.on('click') coordinates wrong in Firefox

openlayers-3