Vue+OpenLayers(4.6.5)中Select交互时如何获取点击点坐标？

嘿，这个问题其实很容易搞定！你当前在onMarkObject方法里获取的是多边形自身的几何坐标，但点击位置的坐标其实就包含在Select交互的select事件参数里，具体来说是event.mapBrowserEvent这个属性。

具体实现步骤： #

在你的onMarkObject方法中，直接通过event.mapBrowserEvent.coordinate就能拿到点击位置的地理坐标（这个坐标的投影和你的地图当前投影一致，通常是EPSG:3857）。

修改后的代码示例：

onMarkObject (event) {
  if (event.selected && event.selected.length > 0) {
    // 获取选中多边形的几何坐标（你原来的逻辑）
    const polygonCoordinates = event.selected[0].getGeometry().getCoordinates()
    // 获取点击该多边形时的位置坐标
    const clickPosition = event.mapBrowserEvent.coordinate
    
    console.log('多边形坐标:', polygonCoordinates)
    console.log('点击位置坐标:', clickPosition)
  }
}

额外小技巧： #

如果需要将点击坐标转换成WGS84（EPSG:4326，也就是常用的经纬度格式），可以用OpenLayers的投影转换方法：

// 假设当前地图投影是EPSG:3857，转成EPSG:4326
const wgs84ClickCoords = ol.proj.transform(clickPosition, 'EPSG:3857', 'EPSG:4326')
console.log('经纬度格式的点击坐标:', wgs84ClickCoords)

原理很简单：Select交互的select事件会携带触发这次选择的原始地图浏览器事件（mapBrowserEvent），这个事件对象里就包含了点击位置的坐标、像素位置等信息，直接取用就行啦～

内容的提问来源于stack exchange，提问作者tesicg