Openlayer系列：点击地图上的点位，弹出信息窗在点位上方显示；

遇到问题

有没有精通openlayer web开发呀
需要点地图的上点位的时候，弹出框在点位上方显示（UI效果图如下，使用的vue2和element、openlayer6）

解决思路

我自己找的方法，openlayer的Overlay、Select都使用到了，

// 创建一个弹窗 Overlay 对象
      var overlay = new Overlay({
        element: container, //绑定 Overlay 对象和 DOM 对象的
        autoPan: true, // 定义弹出窗口在边缘点击时候可能不完整 设置自动平移效果
        offset: [-110, -180],//偏移量，使得弹出框显示在坐标点正上方
        autoPanAnimation: {
          duration: 250 //自动平移效果的动画时间 9毫秒
        }
      });

      window.map.addOverlay(overlay);

      window.map.on('singleclick', function (evt) {
        
        let coordinate = evt.coordinate
        // 点击尺 （这里是尺(米)，并不是经纬度）;
        var feature = window.map.forEachFeatureAtPixel(evt.pixel, (feature) => {
          return feature;
        });

        console.log('singleclick feature1', feature);

        if (JSON.stringify(feature) == 'undefined' || !feature) {

          console.log('closed le');
          _that.isShowDialog = false;
          return;
        } else if (!feature.values_.data) {
          _that.isShowDialog = false;
          return;
        }
        if (feature.values_.data) { //捕捉到要素
          let Coordinates = [feature.values_.data.longitude, feature.values_.data.latitude];
          // window.map.getView().setCenter(fromLonLat(Coordinates, 'EPSG:3857'))
          window.map.getView().animate({ // 只设置需要的属性即可
            target: 'map',
            center: fromLonLat(Coordinates, 'EPSG:3857'),
            zoom: 12.6, // 缩放级别
            rotation: undefined, // 缩放完成view视图旋转弧度
            duration: 1000 // 缩放持续时间，默认不需要设置
          })
        }
    }

    overlay.setPosition(coordinate); //把 overlay 显示到指定的 x,y坐标
          if (_that.mapInfo.projectName) {
            console.log('_that.mapInfo.projectName 44', _that.mapInfo.projectName);
            setTimeout(() => {
              _that.isShowDialog = true;
            }, 600);
          }
    

---

未完待续