openlayers 实现右键弹框效果

因为业务需要,这个需求需要的地方太多再次记录一下 使用openlayers +vue

在这里插入图片描述
**首先先实现布局需要有map地图的容器 **
这个可以多搜索下openlyers有这实现在线地图的方法

     <div id="popuper" class="ol-popup" v-show="rightContentShowFlag">
      <div id="popup-content" class="popup-content">
        <ul>
          <li>
            <a href="#" @click="getLonlater">
              <i
                class="el-icon-sunrise-1"
                style="color: red; font-size: 16px"
              ></i
              >&nbsp;查看气温</a
            >
          </li>
        </ul>
      </div>
    </div>

然后我们去搞css布局部分

.ol-popup {
  position: absolute;
  background-color: white;
  padding: 15px 0;
  border-radius: 10px;
  z-index: 99999;
  cursor: pointer;
  display: block;
}
.ol-popup:before {
  top: -20px;
  border: solid transparent;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.ol-popup:before {
  border-bottom-color: #ffffff;
  border-width: 11px;
  left: 80px;
  margin-left: -11px;
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 0px;
  right: 8px;
}

2.实现效果
data()中***
windrightPointLayer: null,
windrightPointSource: null,
windrightContentShowFlager: false,

 addwindPopup() {
      let _that = this;
      let mapDiv = document.getElementById("map");
      mapDiv.oncontextmenu = (event) => {
        event.preventDefault(); // 阻止冒泡事件
        // 点击的地理坐标
        const coordinate = _that.map.getEventCoordinate(event);
        this.clickPosition = coordinate;
        let n1 = coordinate[0];
        let s1 = coordinate[1];
        this.windrightPointSource.clear();
        //#region 在此处弹窗开始
        let d2 = document.querySelector(".ol-popup-fkx");
        this.windrightContentShowFlager = true;
        //这里是根据地图位置来确定弹框位置
        d2.style.top = event.offsetY - 86 + "px";
        d2.style.left = event.offsetX - 278 + "px";
        //#endregion 在此处弹窗结束
        //右键添加点
        let feature = new Feature({
          geometry: new Point([n1, s1], "XY"),
          name: "fffffer",
        });
        _that.windrightPointLayer.getSource().addFeature(feature);
      };
    },

然后我们在地图map上添加点~

 this.windrightPointSource = new VectorSource();
      this.windrightPointLayer = new VectorLayer({
        source: this.windrightPointSource,
        style: new Style({
          fill: new Fill({
            color: "rgba(255, 0, 0, 1)",
          }),
          stroke: new Stroke({
            color: "blue",
            width: 2,
          }),
          image: new Circle({
            radius: 7,
            fill: new Fill({
              color: "pink",
            }),
          }),
        }),
      });
      this.map.addLayer(this.windrightPointLayer);

有个问题就是点删除,那么我实现的思路是左键点击删除点事件

    this.map.on("singleclick", (evt) => {
      this.windrightContentShowFlager = false;
      console.log("windrightPointLayer", this.windrightPointSource);
      if (this.windrightPointSource) {
        this.windrightPointSource.clear();
        map.removeLayer(this.frontSource);
      }
    });
 就实现了右键添加点和弹框,随意点~
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Vue是一种现代的JavaScript框架,而OpenLayers是一个用于创建交互式地图的开源JavaScript库。Vue OpenLayers的主要目的是使用Vue框架来创建具有交互性的地图应用程序。 在Vue OpenLayers中,要实现点击点弹框效果,首先需要引入Vue和OpenLayers的依赖。然后,在Vue组件中,我们可以通过监听地图点击事件来实现弹框效果。 首先,我们需要在data属性中定义一个变量来存储弹框的内容,例如: ``` data() { return { popupContent: "" }; }, ``` 然后,在mounted钩子函数中,我们需要创建一个地图对象,并添加点击事件监听器: ``` mounted() { // 创建地图对象 const map = new ol.Map({ // 地图的目标元素 target: "map-container", // 地图的图层 layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], // 地图的视图 view: new ol.View({ center: [0, 0], zoom: 2 }) }); // 点击事件监听器 map.on("click", event => { // 获取点击的像素坐标 const pixel = event.pixel; // 转换为地图坐标 const coordinate = map.getCoordinateFromPixel(pixel); // 根据坐标进行相应的处理,例如显示弹框 // 这里我们只是将弹框的内容设置为坐标,你可以根据实际需求来设置弹框的内容 this.popupContent = coordinate.toString(); }); }, ``` 最后,在Vue组件的模板中,我们可以使用绑定语法来显示弹框的内容: ``` <div id="map-container"></div> <div class="popup">{{ popupContent }}</div> ``` 总结而言,要在Vue OpenLayers实现点击点弹框效果,我们需要创建地图对象,并监听地图的点击事件。当点击事件发生时,我们可以通过坐标处理来显示弹框内容。以上就是实现点击点弹框的一个简单示例。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值