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 实现效果