OpenLayers6（6）：绘制图形工具条封装（Draw、Snap、Modify）

1 版本

• OpenLayers：6.14.1

---

2 说明

• Draw：绘制图形
• Snap：捕捉图形
• Modify：修改图形

---

3 绘制图形组件

将绘制界面直接封装成vue单文件组件，上代码：

<template>
  <div class="ol-draw-collapse">
    <el-collapse :value="['1']">
      <el-collapse-item name="12">
        <template slot="title">
          <p-button class="t-btn" tip="图形绘制" icon="draw" :place="pPlace" />
        </template>
        <p-button tip="点绘制" icon="point" :place="pPlace" @click="startDraw('Point')" />
        <p-button tip="线绘制" icon="polyline" :place="pPlace" @click="startDraw('LineString')" />
        <p-button tip="面绘制" icon="polygon" :place="pPlace" @click="startDraw('Polygon')" />
        <p-button tip="圆绘制" icon="circle" :place="pPlace" @click="startDraw('Circle')" />
        <p-button tip="完成绘制" icon="done" :place="pPlace" @click="doneDraw()" />
        <p-button tip="清除图形" icon="clear" :place="pPlace" @click="clearDraw()" />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
 
<script>
// PButton 自己封装的el-button按钮组件
import PButton from "../common/PButton.vue";  
// ODraw 编写的绘制图形的类
import { ODraw } from "@/assets/js/ol/POpenLayers.js";

export default {
  components: { PButton },
  name: "OlDraw",
  props: {
    pMap: {
      default: null,
      require: true,
    },
    pPlace: {
      default: "right",
      require: false,
    },
  },
  data() {
    return {
      mOlDraw: null,
    };
  },

  mounted() {
    this.mOlDraw = new ODraw(this.pMap);
    this.mOlDraw.init();
  },

  methods: {
    startDraw(drawType) {
      this.mOlDraw.startDraw(drawType);
    },

    doneDraw() {
      this.mOlDraw.doneDraw();
    },

    clearDraw() {
      this.mOlDraw.clearDraw();
    },
  },
};
</script>

<style lang='scss'>
@import "~@/assets/css/mixin.scss";
.ol-draw-collapse {
  @include p-collapse;
}
</style>

---

4 绘制图形类

主要基于动态原型模型编写绘制图形的类ODraw，上代码：

export function ODraw(map) {
    let this_ = this;

    this_.mMap = map;

    this_.mSource = null;
    this_.mLayer = null;

    this_.mDraw = null;
    this_.mModify = null;
    this_.mSnap = null;


    if (typeof ODraw.initialized == "undefined") {

        ODraw.prototype.init = () => {
            this_.mSource = new VectorSource();
            this_.mLayer = new VectorLayer({
                title: "草图图层", // ol-ext图层控件属性
                noSwitcherDelete: true, // ol-ext图层控件属性
                source: this_.mSource, 
            });
            this_.mMap.addLayer(this_.mLayer);


            this_.mModify = new Modify({
                source: this_.mSource,
                style: measureModifyStyle() // 自定义样式
            });
            this_.mMap.addInteraction(this_.mModify);
        };


        ODraw.prototype.addInteractions = (drawType) => {
            this_.mDraw = new Draw({
                source: this_.mSource,
                type: drawType,
            });
            this_.mDraw.on('drawstart', function () {
                this_.mModify.setActive(false);
            });
            this_.mDraw.on('drawend', function () {
                this_.mModify.setActive(true);
            });
            this_.mModify.setActive(true);
            this_.mMap.addInteraction(this_.mDraw);

            this_.mSnap = new Snap({
                source: this_.mSource
            });
            this_.mMap.addInteraction(this_.mSnap);
        };

        ODraw.prototype.removeInteractions = () => {
            this_.mDraw && this_.mMap.removeInteraction(this_.mDraw);
            this_.mSnap && this_.mMap.removeInteraction(this_.mSnap);
        };

        ODraw.prototype.startDraw = (drawType) => {
            this_.removeInteractions();
            this_.addInteractions(drawType);
        };

        ODraw.prototype.doneDraw = () => {
            this_.removeInteractions();
            // this_.mMap.getView().fit(this_.mSource.getExtent());
        };

        ODraw.prototype.clearDraw = () => {
            this_.mSource.clear();
        };

        ODraw.initialized = true;
    }

}

---

5 实现效果