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);
      }
    });

 就实现了右键添加点和弹框，随意点~