【开源WebGIS】06-Openlayers+Vue 画点、线、面

openlayers画点、线、面

实现效果

实现步骤

1 定义几个按钮按钮

这里用的elementui

<el-button-group>
      <el-button type="primary" @click="drawVector('Point')">画点</el-button>
      <el-button type="primary" @click="drawVector('LineString')">画线 </el-button>
      <el-button type="primary" @click="drawVector('Polygon')">画面</el-button>
      <el-button type="primary" @click="drawVector('Circle')">画圆</el-button>
      <el-button type="primary" @click="drawVector('None')">清除</el-button>
    </el-button-group>
1
2
3
4
5
6
7

2 定义按钮的点击事件

主要步骤：

1. 清除Interaction
2. 判断按钮类型
3. 如果是画东西的按钮就执行addInteraction函数，来画点、线、面
4. 如果是清除图形的按钮，就先获取map的所有layers，然后根据name删除前面画的点、线、面

drawVector(type) {
      this.map.removeInteraction(this.draw);
      if (type !== 'None') {
        console.log(type);
        this.addInteraction(type);
      } else {
        //清空绘制图形
        this.map.getAllLayers().forEach((element) => {
          console.log(element.values_.name);
          if (element.values_.name == 'drawtest') {
            console.log(element.values_.name);
            this.map.removeLayer(element);
          }
        });
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3 addInteraction绘制图形

主要步骤：

1. 定义一个vector作为layer
2. 给其添加一个name属性，便于后面可以按照name清除图形
3. 指定其style属性
4. 指定其zIndex属性大于9，因为我这个osm的底图默认的zInex居然是9，所以我画的图形都被osm底图盖住看不到了
5. 使用map.allLyaer()将vector添加到地图中
6. 定义一个Draw，指定其source和type（既点、线或者面）
7. 将addInteraction添加至map中

//根据绘制类型进行交互绘制图形处理
    addInteraction(type) {
      //实例化一个矢量图层Vector作为绘制层
      this.vector = new VectorLayer({
        name: 'drawtest',
        source: new VectorSource({ wrapX: false }),
        style: new Style({
          fill: new Fill({
            color: 'rgba(255, 255, 255, 0.5)',
          }),
          stroke: new Stroke({
            color: '#e60039',
            width: 2,
          }),
          image: new CircleStyle({
            radius: 7,
            fill: new Fill({
              color: '#e60039',
            }),
          }),
        }),
        zIndex: 10,
      });
      //将绘制层添加到地图容器中
      this.map.addLayer(this.vector);
      this.draw = new Draw({
        source: this.vector.getSource(),
        type: type,
      });
      this.map.addInteraction(this.draw);
    },
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

获取代码

2. 关注公粽号“老靳的WebGIS”回复ol06获取

1 使用vscode打开
2 使用npm i 命令安装引用的库
3 使用npm run serve 命令运行程序
1
2
3