openlayer 添加框选

import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import OSM from "ol/source/OSM";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import { Draw, Modify, Select } from "ol/interaction";
import { Fill, Stroke, Style, Text, Circle } from "ol/style";
import DragBox from "ol/interaction/DragBox";

// 多选点击
    addInteraction() {
      let map = this.map;
       
      //清除选择和框选，避免重复
      if (this.select) {
        this.map.removeInteraction(this.select);
      };

      if (this.dragBox) {
        this.map.removeInteraction(this.dragBox);
      };

      this.select = new Select({
        condition: click,
        toggleCondition: click, // 多选
        style: new Style({
          fill: new Fill({
            // 填充样式
            color: "rgba(243,214,12, .5)",
          }),
          stroke: new Stroke({
            //线样式
            color: "yellow",
            width: 2,
          }),
          image: new Circle({
            //点样式
            radius: 5,
            fill: new Fill({
              color: "blue",
            }),
          }),
        }),
      });
   
      this.selectedFeatures = this.select.getFeatures();
      this.map.addInteraction(this.select);
      // 允许用户通过在地图上单击并拖动来绘制一个矢量框
      this.dragBox = new DragBox();
      this.map.addInteraction(this.dragBox);

      this.dragBox.on("boxend", () => {
        let extent = this.dragBox.getGeometry().getExtent();

         // weiGeVectorSources 要框选的图层
        /**this.weiGeVectorSources =nem VectorSource() */
        this.weiGeVectorSources.forEachFeatureIntersectingExtent(
          extent,
          (feature) => {
            if (feature.values_.MERGE_STATUS != '2') {
              this.selectedFeatures.push(feature);
            }
            // console.log(this.selectedFeatures);
          }
        );
      });
      this.dragBox.on("boxstart", () => {
        // this.selectedFeatures.clear();
        // console.log(this.selectedFeatures);
      });
    },