Question

openlayers鼠标点击feature时位置不准确，需要点击feature下方一段距离才会出现想要的效果，打印坐标后，发现能点出效果位置的坐标确实是添加feature时设置的坐标，但是显示出来feature的位置和实际的位置有差距。感觉是坐标的问题 但是也没在文档中找到关于VectorLayer的offset  网上有回答说因为vue加载顺序问题 ，希望大神解答！谢谢！

Answer 1

点击添加feature默认是没有偏移的，能否发一下重现问题的数据和代码？

Comments

您好  以下是添加点的代码 谢谢。还有一个问题就是我在修改多边形的时候，水平点击的位置是准的，垂直方向我需要在线下面1cm的位置点击，才能点到想要修改的线上。谢谢您

// 点的数据
marker: [
  {
  point: {
    lon: 12565670.355840394,
    lat: 4384379.561651001
  },
  id: '0001',
  properties:{
    name:'王五的地',
    plant:'玉米',
    area:'20'
  }
  },
  {
    point: {
      lon: 12565570.355840394,
      lat: 4384279.561651001
    },
    id: '0002',
    properties:{
      name:'李四的地',
      plant:'土豆',
      area:'18'
    }
  },
  {
    point: {
      // 鼠标点击此点时才会弹出信息
      // [12570780.699198745,4384640.069450277]
      // [12570747.542118035, 4384711.487538338]
      lon: 12570780.975710917,
      lat: 4384640.441153465
    },
    id: '0003',
    properties:{
      name:'张三的地',
      plant:'高粱',
      area:'15'
    }
  }
],

// 添加聚合点标记(地块标记)
getMarker() {
  let l = this.marker.length
  let markers = this.marker
  let features = new Array()
  let feature
  for (let i = 0; i < l; i++) {
    feature = new Feature({
      geometry: new Point([markers[i].point.lon, markers[i].point.lat]),
      id: markers[i].id,
      properties: markers[i].properties
    })
    features.push(feature)
  }
  // 矢量要素数据源
  let source = new VectorSource({
    features: features
  })
  // 聚合标注数据源
  let clusterSource = new Cluster({
    distance: 100, //聚合的距离参数，即当标注间距离小于此值时进行聚合，单位是像素
    source: source //聚合的数据源，即矢量要素数据源对象
  })
  // 加载聚合标注的矢量图层
  let styleCache = {} //用于保存特定数量的聚合群的要素样式
  this.clusters = new VectorLayer({
    name: 'test',
    source: clusterSource,
    style: function(feature, resolution) {
      let size = feature.get('features').length //获取该要素所在聚合群的要素数量
      let style = styleCache[size]
      if (!style) {
        style = [
          new Style({
            image: new ol.style.Circle({
              radius: 10,
              stroke: new ol.style.Stroke({
                color: '#fff'
              }),
              fill: new ol.style.Fill({
                color: 'green'
              })
            }),
            text: new ol.style.Text({
              text: size.toString(),
              fill: new ol.style.Fill({
                color: '#fff'
              })
            })
          })
        ]
        styleCache[size] = style
      }
      return style
    },
    zIndex: 999
  })
  this.map.addLayer(this.clusters)
},

---

点击问题可以参考https://iclient.supermap.io/examples/openlayers/editor.html#02_editFeatures范例191到223行代码，可以设置为click点击事件，hitTolerance参数设置点击容限

---

看到啦!非常感谢 我的代码在我的项目中有点击不准确的问题,但是放在另一个项目里,点击位置是没有问题的,因此我猜测是不是vue父组件中别的东西影响了地图,导致偏移,删除了组件中别的div块,可依然没有解决.对vue页面加载这一块不太熟悉,至今未解.如果方便的话 我可以将两个页面代码发您看一下吗?谢谢