如何在使用 Select 交互时获取我点击的点的坐标？

Question

我们在我们的网络项目中使用 Vue.js 和 OpenLayers (4.6.5)。我们在地图上有很多特征，其中一些是多边形。当我 select 某个特定的多边形时，它的样式变成另一种颜色，这意味着它被突出显示 (selected)。当然，我可以获得 selected 多边形的坐标。但是，我怎样才能得到我点击的多边形内点的坐标？

代码如下：

markObject (mark) {
  if (!mark) {
    this.map.un('select', this.onMarkObject)
    if (this.markSelection) {
      this.markSelection.getFeatures().remove(this.lastSelectedFeature)
      this.map.removeInteraction(this.markSelection)
    }
    return
  }

  if (!this.markSelection) {
    this.markSelection = new Select({
      condition: condition.click,
      layers: [this.vectorLayer]
    })
    this.markSelection.on('select', this.onMarkObject)
  }

  this.map.addInteraction(this.markSelection)
},
onMarkObject (event) {
  if (event.selected && event.selected.length > 0) {
    const coordinates = event.selected[0].getGeometry().getCoordinates()
  }
}

Answer 1

你需要的是捕获地图上的点击事件，然后将像素转换为地图坐标，看看我给你做的这个例子，

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
   #a { display: none; }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
    <title>Click Pixel Coord</title>
  </head>
  <body>
    <h2>Click on Map to get pixel and coord values</h2>
    <p id="p"></p>
    <div id="map" class="map"></div>
  <script type="text/javascript">
  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([37.41, 8.82]),
    zoom: 4
   })
  });
    map.on('click', function(evt) {
      const coord = map.getCoordinateFromPixel(evt.pixel);
      document.getElementById('p').innerHTML =
      `Pixel:${evt.pixel[0]} ${evt.pixel[0]}` + '<br>' + 
      `Coord:${coord[0].toFixed(2)} ${coord[1].toFixed(2)}`;
    });
    </script>
  </body>
</html>

Answer 2

实际上，我找到了解决方案：

onMarkObject (event) {
    const clickCoordinates = event.mapBrowserEvent.coordinate
    ...
}

谢谢你。

如何在使用 Select 交互时获取我点击的点的坐标？

How to get the coordinates of point where I clicked while using Select interaction?

openlayers

vue.js