6. OpenLayer vector drawing

openlayer provides the Draw class to implement map drawing functions such as points, lines, surfaces, circles, etc.

//定义绘制图层
var lineLayer = new VectorLayer({
  properties: { name: "lineLayer", isClick: false },
  source: new VectorSource(),
  style: new Style({
    fill: new Fill({
      color: "#ffffffcc",
    }),
    stroke: new Stroke({
      color: "#0099ff",
      size: 1,
    }),
    //image是设置点的样式
    image: new Circle({
      radius: 7,
      fill: new Fill({
        color: "#ffffffcc",
      }),
      stroke: new Stroke({
        color: "#0099ff",
        width: 2,
      }),
    }),
  }),
});
this.map.addLayer(lineLayer);
//定义绘制类
this.lineDraw = new Draw({
  type:  "Polygon", // 默认支持：Point（点）、LineString（线）、Polygon（面）和Circle（圆）。
  source: lineLayer.getSource(),  
  style: new Style({
    fill: new Fill({
      color: "#ffffffcc",
    }),
    stroke: new Stroke({
      color: "#0099ff",
      width: 2,
    }),
    image: new Circle({
      radius: 7,
      fill: new Fill({
        color: "#0099ff",
      }),
    }),
  }),
  // maxPoints: 4    // 限制不超过4个点
});

// 监听线绘制结束事件，获取坐标
this.lineDraw.on("drawstart", (event) => {
  this.overTipLayer.getElement().innerHTML = "提示：右击结束绘制";  //定义的绘制提示框，
  lineLayer.getSource().clear();
});
this.lineDraw.on("drawend", (event) => {
  const geometry = event.feature.getGeometry();
  this.map.selectFeature(geometry); //高亮
  // event.feature 就是当前绘制完成的线的Feature
  //构建查询
  const region = this.getSupermapRegion(geometry);
  this.executeSpatialQuery(dataUrl, region, false).then((query) => {
    const result = query.result.features;
    callback(result);
  });
  this.lineDraw.abortDrawing();  //销毁工具
  this.lineDraw.setActive(false);  //设置状态
  this.map.removeInteraction(this.lineDraw);  //清除绘制监听
  this.removeLineLayer();
  this.overTipLayer.getElement().innerHTML = "";
});
//右键事件 此事件主要关闭右击弹窗
this.map.on("contextmenu", (e) => {
  e.preventDefault();
});
this.map.addInteraction(this.lineDraw);

Custom drawing rectangle method

    drawRectangle() {
      //设置maxPoints及geometryFunction
      var maxPoints, geometryFunction;
      maxPoints = 2;
      geometryFunction = function (coordinates, geometry) {
        //设置起始点及终止点
        var start = coordinates[0];
        var end = coordinates[1];
        if (!geometry) {
          var lonLatArr = [
            [start, [start[0], end[1]], end, [end[0], start[1]], start], //特别注意，长方形终止点与起始点重合
          ];
          geometry = new Polygon(lonLatArr);
        }
        geometry.setCoordinates([
          [start, [start[0], end[1]], end, [end[0], start[1]], start], //特别注意，长方形终止点与起始点重合
        ]);
        return geometry;
      };

      // 添加一个绘制的线使用的layer
      var lineLayer = new VectorLayer({
        source: new VectorSource(),
        properties: { name: "lineLayer", isClick: false },
        style: new Style({
          fill: new Fill({
            color: "#ffffffcc",
          }),
          stroke: new Stroke({
            color: "#0099ff",
            size: 1,
          }),
          //image是设置点的样式
          image: new Circle({
            radius: 7,
            fill: new Fill({
              color: "#ffffffcc",
            }),
            stroke: new Stroke({
              color: "#0099ff",
              width: 2,
            }),
          }),
        }),
      });
      this.map.addLayer(lineLayer);
      this.lineDraw = new Draw({
        source: lineLayer.getSource(),
        style: new Style({
          fill: new Fill({
            color: "#ffffffcc",
          }),
          stroke: new Stroke({
            color: "#0099ff",
            width: 2,
          }),
          image: new Circle({
            radius: 7,
            fill: new Fill({
              color: "#0099ff",
            }),
          }),
        }),
        type: "LineString",
        geometryFunction: geometryFunction,
        maxPoints: maxPoints,
      });

      // 监听线绘制结束事件，获取坐标
      this.lineDraw.on("drawstart", (event) => {
        this.overTipLayer.getElement().innerHTML = "提示：右击结束绘制";
        lineLayer.getSource().clear();
      });
      this.lineDraw.on("drawend", (event) => {
        const geometry = event.feature.getGeometry();
        this.map.selectFeature(geometry); //高亮
        // event.feature 就是当前绘制完成的线的Feature
        //构建查询
        const region = this.getSupermapRegion(geometry);
        this.executeGeojson(region);

        this.lineDraw.abortDrawing();
        this.lineDraw.setActive(false);
        this.map.removeInteraction(this.lineDraw);
        this.map.removeLayer(lineLayer);
        this.overTipLayer.getElement().innerHTML = "";
      });
      //右键事件
      this.map.on("contextmenu", (e) => {
        e.preventDefault();
      });
      //将layer和interaction添加到地图中
      this.map.addLayer(lineLayer);
      this.map.addInteraction(this.lineDraw);
    },

Mouse tip bar method

    //鼠标移动提示条
    addTooltip() {
      let elment = document.createElement("div");
      elment.className = "tipClass";
      this.overTipLayer = new Overlay({
        element: elment,
        positioning: "center-left",  //弹窗位置
        stopEvent: false,
      });
      this.map.addOverlay(this.overTipLayer);

      //地图中鼠标悬浮移动事件
      this.map.on("pointermove", (evt) => {
        if (this.overTipLayer) {
          // this.overlayLayer.getElement().innerHTML = '指示弹窗里的内容'
          this.overTipLayer.setPosition(evt.coordinate);
        }
      });
    },