【OpenLayers笔记】对要素进行新增绘制、选择、修改等交互

绘制-Draw

    const vector = new VectorLayer({
      source: new VectorSource(),
      style: {
        "fill-color": "rgba(255, 255, 255, 0.2)",
        "stroke-color": "#ffcc33",
        "stroke-width": 2,
        "circle-radius": 7,
        "circle-fill-color": "#ffcc33",
      },
    });

在图层中对多边形要素进行绘制：

let draw = new Draw({
      source: vector.getSource(),
      type: "Polygon",
    });
    map.addInteraction(draw);

效果：

备注：draw.setActivity(false)即可禁用要素绘的制功能

选择-Select

实现绘制完一个多边形之后禁用多边形绘制，并且开启选择器功能

let draw = new Draw({
      //放置一个source(要素需要放到Source里)
      source: vector.getSource(),
      type: "Polygon",
    });
    draw.on("drawend", function () {
      draw.setActive(false);
      //只需要new一个Select实例，后面可以根据select.setActive进行启用和禁用要素选择器
      if (!select) select = new Select();
      map.addInteraction(select);
    });
    map.addInteraction(draw);

 效果：

修改-Modify