openlayers 实现 聚合点删除 和聚合点弹框的效果

openlayers 实现 聚合点删除 和聚合点弹框的效果

我的地图用的是父传子的方法写的

<template>
  <div>
  //弹框
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <!-- <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span> -->
    </el-dialog>
  </div>
</template>

<script>
import { Circle as CircleStyle } from "ol/style";
import { Map, View, Feature, Overlay } from "ol";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { Point } from "ol/geom";
import Style from "ol/style/Style";
import Fill from "ol/style/Fill";
import Stroke from "ol/style/Stroke";
import Text from "ol/style/Text";
import { Vector as SourceVec, Cluster } from "ol/source";

export default {
  props: ["map"],
  data() {
    return {
      size: "1",
      layer: null,
      sourceArr: null,
      dialogVisible: false,
    };
  },
  mounted() {
    this.addMarker();
    this.singleclick();
  },
  methods: {
    addMarker() {
      //先清除
      if (this.layer) {
        let flag = this.layer.getVisible();
        this.layer.setVisible(!flag);
      } else {
        const map = window.map;
        //创建画板
        this.sourceArr = new SourceVec({});
        //定义随机数据，这里随机了200个
        for (let i = 1; i <= 200; i++) {
          // console.log("进");
          //点的坐标信息
          let coordinates = [120.0 + Math.random(), 30.0 + Math.random()];
          let feature = new Feature(new Point(coordinates));
          let markerStyle = new Style({
            image: new CircleStyle({
              radius: 4,
              stroke: new Stroke({
                color: "#ffffff",
                width: 1,
              }),
              fill: new Fill({
                color: "blue",
              }),
            }),
            text: new Text({
              scale: 1.4,
              // text: size.toString(),
              // text: String(i),
              fill: new Fill({
                color: "#ffffff",
              }),
              offsetX: 30,
              offsetY: 0,
            }),
          });
          feature.setStyle(markerStyle);
          this.sourceArr.addFeature(feature);
        }
        //LayerVec /VectorLayer  这两种都可以
        this.layer = new VectorLayer({
          source: this.sourceArr,
          name: "xxx",
        });
        //地图添加画板
        map.addLayer(this.layer);
      }
    },
    //设置图层显示或者隐藏  flag  true 显示  false 隐藏
    setVisibleZSQWFXLayer(flag) {
      this.layer.setVisible(flag);
    },

    //清除逐时气温分析绘制的点
    clearZSQWFXLayer() {
      if (this.layer) {
        this.layer.getSource().clear();
      }
    },
    //点击事件
    singleclick() {
      const map = window.map;
      // 点击
      map.on("singleclick", (e) => {
        // 判断是否点击在点上
        let feature = map.forEachFeatureAtPixel(e.pixel, (feature) => feature);
        if (feature) {
          this.dialogVisible = true;
          // 设置弹窗位置
          let coordinates = feature.getGeometry().getCoordinates();
         // this.popup.setPosition(coordinates);
        } else {
          this.dialogVisible = false;
        }
      });
    },
    handleClose() {
      this.dialogVisible=false
    },
  },
};
</script>

<style  scoped>
</style>