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

最新推荐文章于 2024-06-27 16:40:00 发布

浪潮行舟

最新推荐文章于 2024-06-27 16:40:00 发布

阅读量1.1k

点赞数

分类专栏：前端 WebGIS Openlayer 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/I_nur/article/details/130350513

版权

前端同时被 3 个专栏收录

56 篇文章 1 订阅

订阅专栏

WebGIS

9 篇文章 0 订阅

订阅专栏

Openlayer

6 篇文章 0 订阅

订阅专栏

文章描述了一种在OpenLayer6集成于Vue2和Element的应用中，当用户点击地图点位时，如何创建并定位一个弹出框在点位上方显示的方法。涉及到的关键技术包括Overlay和Select，以及处理单击事件来更新地图中心和缩放级别。

摘要由CSDN通过智能技术生成

遇到问题

有没有精通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);
          }