OpenLayers 实现画点、画线、画面、画圆

本文将实现如何用openlayers在地图上画点、线、面、圆，创建地图可参考我的上一篇文章Vue+OpenLayers 创建地图并显示鼠标所在经纬度

1、页面

2、代码

                  <div class="fense_card_top_flex">
          <button @click="selectDraw('Point')">点</button>
          <button @click="selectDraw('LineString')">线</button>
                   <button @click="selectDraw('Polygon')">多边形</button>
                 <button @click="selectDraw('Circle')">圆</button>                
        </div>
1
2
3
4
5
6

  import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import {  Draw } from "ol/interaction";

     selectDraw(value) {
        //取消上一次的绘制动作,避免重叠
        this.draw ? this.map.removeInteraction(this.draw) : '';

        var source = new VectorSource();
        //定义vector图层，将绘制的图形加入到vector图层，叠加在地图上展示
        var vector = new VectorLayer({
          source: source
        });

        if (value === 'Polygon') {

          this.draw = new Draw({
            source: source,
            type: value,
            geometryFunction: Draw.createBox
          });
        } else {
          this.draw = new Draw({
            source: source,
            type: value
          });
        }
        // 将交互动作添加到地图上
        this.map.addInteraction(this.draw);
        this.map.addLayer(vector);


      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33