vue2+Ts中openLayer绘图工具组件封装-编程知识

vue2+Ts中openLayer绘图工具组件封装

效果：
在这里插入图片描述
封装组件代码：

<!-- openLayer绘图工具 -->
<template><a-button-group v-show="isShow"><a-button v-if="shouldShowButton('point')" @click="draw('Point')">绘点<a-icon type="dot-chart" /></a-button><a-button v-if="shouldShowButton('line')" @click="draw('LineString')">绘线<a-icon type="line-chart" /></a-button><a-button v-if="shouldShowButton('polygon')" @click="draw('Polygon')">绘面<a-icon type="border" /></a-button><a-button v-if="shouldShowButton('edit')" @click="edit()">编辑<a-icon type="edit" /></a-button><a-button v-if="shouldShowButton('undo')" @click="undo()">撤销<a-icon type="undo" /></a-button><a-button v-if="shouldShowButton('redo')" @click="redo()">重做<a-icon type="redo" /></a-button><a-button v-if="shouldShowButton('save')" @click="save()">保存<a-icon type="save" /></a-button></a-button-group>
</template><script lang="ts">
import abpbase from '@/libs/abpbase';
import VectorSource from 'ol/source/Vector';
import Map from 'ol/Map';
import { Component, Emit, Prop } from 'vue-property-decorator';
import ol from 'ol';
import VectorLayer from 'ol/layer/Vector';
import Draw, { createRegularPolygon } from 'ol/interaction/Draw';
import Modify from 'ol/interaction/Modify';
import {singleClick, doubleClick, pointerMove, never,
} from 'ol/events/condition';
import Select from 'ol/interaction/Select';
import Translate from 'ol/interaction/Translate';
import Snap from 'ol/interaction/Snap';
// eslint-disable-next-line import/no-unresolved
import * as jsts_io from 'jsts/org/locationtech/jts/io';
import {Style, Fill, Stroke, Circle,
} from 'ol/style';
import {LinearRing,LineString,MultiLineString,MultiPoint,MultiPolygon,Point,Polygon,
} from 'ol/geom.js';
import MapBrowserEventType from 'ol/MapBrowserEventType';@Component({name: 'OpenLayerDrawTool',components: {},
})
export default class OpenLayerDrawTool extends abpbase {/*** 最大可绘制要素数量*/@Prop({type:Number, default:1})maxFeatures@Prop({ type: Array, default: () => ["point", "line", "polygon", "undo", "redo", "save", "edit"] })buttonsToShow: string[];/*** 编辑操作*/editOperation: Modify;shouldShowButton(buttonName: string): boolean {return this.buttonsToShow.includes(buttonName);}/*** 绘制的矢量图层*/drawVectorLayer: VectorLayer<any>;/*** 绘制的数据源*/drawSource: VectorSource;/*** 传入的openLayer地图*/map: Map = null;/*** 绘制操作*/drawOperation: Draw;/*** 绘制的图形堆栈*/drawStack = []/*** 重做的图形堆栈*/redoStack = []selectOperation: SelecttranslateOperation: TranslatesnapOperation: Snapget isShow() {return this.map != null;}/*** 初始化地图控件,需要在父组件调用;* @param map openLayer地图对象* @param requestDataId 请求的数据参数*/initCtrl(map: Map) {this.map = map;this.drawSource = new VectorSource();const createCustomStyle = () => (feature) => {const geometryType = feature.getGeometry().getType();let style;switch (geometryType) {case 'Point':style = new Style({image: new Circle({radius: 6,fill: new Fill({ color: 'rgba(255, 0, 0, 0.5)' }),stroke: new Stroke({ color: 'red', width: 2 }),}),});break;case 'LineString':style = new Style({stroke: new Stroke({color: 'blue',width: 4,}),});break;case 'Polygon':style = new Style({fill: new Fill({ color: 'rgba(0, 255, 0, 0.2)' }),stroke: new Stroke({ color: 'green', width: 3 }),});break;default: {break;}}return style;};this.drawVectorLayer = new VectorLayer<any>({source: this.drawSource,style: createCustomStyle(),zIndex: 999,});this.map.addLayer(this.drawVectorLayer);this.$forceUpdate();}draw(type) {this.map.removeInteraction(this.drawOperation);this.drawOperation = new Draw({source: this.drawSource,type,condition: (event) => event.type === MapBrowserEventType.POINTERDOWN && event.originalEvent.button === 0,});this.map.addInteraction(this.drawOperation);this.drawOperation.on('drawend', (e) => {// 为要素分配一个唯一的 IDe.feature.set('id', Date.now());this.drawStack.push(e.feature);// 如果绘制的图形数量超过最大限制，移除最早添加的图形if (this.drawStack.length > this.maxFeatures) {const firstFeature = this.drawStack.shift();this.drawSource.removeFeature(firstFeature);}this.map.removeInteraction(this.drawOperation);});}undo() {const lastFeature = this.drawStack.pop();if (lastFeature) {this.drawSource.removeFeature(lastFeature);this.redoStack.push(lastFeature);}}redo() {const lastFeature = this.redoStack.pop();if (lastFeature) {// 如果绘制的图形数量达到最大限制，移除最早添加的图形并将其从重做堆栈中移除if (this.drawStack.length >= this.maxFeatures) {const firstFeature = this.drawStack.shift();this.drawSource.removeFeature(firstFeature);}this.drawSource.addFeature(lastFeature);this.drawStack.push(lastFeature);}}save() {const parser = new jsts_io.OL3Parser();parser.inject(Point,LineString,LinearRing,Polygon,MultiPoint,MultiLineString,MultiPolygon,);const format = new jsts_io.WKTWriter();const features = this.drawSource.getFeatures();const wkts = features.map((feature) => {const olGeom = feature.getGeometry();const jstsGeom = parser.read(olGeom);return format.write(jstsGeom);});console.log(JSON.stringify(wkts));}mounted() {}edit() {// 移除 drawOperation 交互this.map.removeInteraction(this.drawOperation);// // 创建 selectOperation 交互对象this.selectOperation = new Select({condition: singleClick,});this.map.addInteraction(this.selectOperation);// 创建 translateOperation 交互对象this.translateOperation = new Translate({features: this.selectOperation.getFeatures(),});this.map.addInteraction(this.translateOperation);// 创建 modifyOperation 交互对象this.editOperation = new Modify({features: this.selectOperation.getFeatures(),});this.editOperation.setActive(false);this.map.addInteraction(this.editOperation);this.editOperation.on('modifyend', (e) => {// 更新 drawStack 中的要素const updatedFeature = e.features.getArray()[0];const featureIndex = this.drawStack.findIndex((feature) => feature.get('id') === updatedFeature.get('id'),);if (featureIndex >= 0) {this.drawStack.splice(featureIndex, 1, updatedFeature);}});// 为地图添加双击事件侦听器this.map.on('dblclick', (event) => {const features = this.map.getFeaturesAtPixel(event.pixel);if (features && features.length > 0) {this.editOperation.setActive(true);this.snapOperation.setActive(true);this.translateOperation.setActive(false);} else {this.editOperation.setActive(false);this.snapOperation.setActive(false);this.translateOperation.setActive(true);}});// 为地图添加 pointermove 事件侦听器// this.map.on('pointermove', (event) => {//   const features = this.map.getFeaturesAtPixel(event.pixel);//   if (features && features.length > 0) {//     this.editOperation.setActive(true);//   } else {//     this.editOperation.setActive(false);//   }// });}// 初始化// init() {// }// created() {// }
}
</script><style lang="less" scoped>
.home-wrap {min-width: 1280px;overflow: auto;
}
</style>

父组件使用：

<div class="absolute right-4 top-4"><open-layer-draw-tool ref="drawTool"></open-layer-draw-tool>
</div>initDrawTool() {this.$nextTick(() => {(this.$refs.drawTool as any).initCtrl(this.map);});}