移动端openlayers封装绘制Draw-随手画-矩形-圆

移动端openlayers封装绘制Draw-随手画-矩形-圆

如果直接使用官方示例的教程，在移动端绘制没法按压拖拽绘制，百度半天也是没有找到，解决了做一个笔记。

矩形：

随手画：

DrawArea.js代码：

/**
 * 检索组件绘制方法封装： DrawArea
 */
import Draw from 'ol/interaction/Draw.js';
import {
	OSM,
	Vector as VectorSource
} from 'ol/source.js';
import {
	Tile as TileLayer,
	Vector as VectorLayer
} from 'ol/layer.js';
import {
	Circle,
	Fill,
	Stroke,
	Style,
} from 'ol/style';
import {
	Polygon
} from '../ol/geom.js';
import {
	createRegularPolygon
} from 'ol/interaction/Draw.js';

const drawTypeEnum = {
	0: 'None', // 不绘制
	1: 'Point', // 绘制点
	2: 'Polygon', // 绘制多边形（移动端不适用）
	3: 'Circle', // 绘制圆（边为很多）
	4: 'Circle', // 绘制矩形（边为4）
	// 随手画,增加下面的函数控制，即可为拖拽绘制
	// freehandCondition: (event) => {
	// 	// 按压拖拽绘制
	// 	return event.originalEvent.button == -1 || event.originalEvent.button === 0;
	// },
	5: 'Polygon',

}

export class DrawArea {

	map;

	draw;

	projection;

	mapServiceLoader;

	drawSource;

	drawLayer;

	// 自定义参数
	startPoint = null;
	drawing = false;

	/**
	 * 清除图层的数据
	 */
	clearDrawLayer() {
		this.drawLayer.getSource().clear();
		this.endDraw();
	}

	/**
	 * 结束绘制
	 */
	endDraw() {
		if (this.draw) {
			this.map.removeInteraction(this.draw);
			this.draw = null;
		}
	}

	/**
	 * 开始绘制
	 */
	start(type = 3) {
		const drawType = drawTypeEnum[type];
		if (drawType !== 'None') {
			const drawStyle = new Style({
				fill: new Fill({
					color: 'rgba(172, 168, 85, 0.5)',
				}),
				stroke: new Stroke({
					color: 'red',
					width: 1,
				}),
			});
			if (this.draw) {
				this.map.removeInteraction(this.draw);
			}
			let draw = null;
			switch (type) {
				case 0:
					// 清除绘制
					draw = null;
					this.clearDrawLayer();
					break;
				case 1:
					// 绘制点
					draw = new Draw({
						source: this.drawSource,
						// style: drawStyle,
						type: 'Point',
					});
					break;
				case 2:
					// 绘制多边形
					draw = new Draw({
						source: this.drawSource,
						// style: drawStyle,
						type: 'Polygon',
						freehandCondition: (event) => {
							// 按压拖拽绘制-------随手画的关键代码就是这个增加freehandCondition
							return event.originalEvent.button == -1 || event.originalEvent.button === 0;
						},
					});
					break;
				case 3:
					//  绘制圆（边为很多）
					draw = new Draw({
						source: this.drawSource,
						// style: drawStyle,
						type: 'Circle',
						geometryFunction: createRegularPolygon(32),
						freehandCondition: (event) => {
							// 按压拖拽绘制
							return event.originalEvent.button == -1 || event.originalEvent.button === 0;
						},
					});
					break;
				case 4:
					// 绘制矩形
					draw = new Draw({
						source: this.drawSource,
						// style: drawStyle,
						type: 'Circle',
						geometryFunction: createRegularPolygon(4),
						freehandCondition: (event) => {
							// 按压拖拽绘制
							return event.originalEvent.button == -1 || event.originalEvent.button === 0;
						},
					});
					break;
				case 5:
					// 随手画
					draw = new Draw({
						source: this.drawSource,
						// style: drawStyle,
						type: 'Polygon',
						freehandCondition: (event) => {
							// 按压拖拽绘制
							return event.originalEvent.button == -1 || event.originalEvent.button === 0;
						},
					});
					break;
				default:
					return;
			}
			this.draw = draw;
			this.map.addInteraction(this.draw);

			// 监听绘制完成事件
			this.draw.on('drawend', (event) => {
				// 获取绘制的要素
				console.log('监听绘制完成事件', event, this.layer);
				const {
					feature
				} = event;
				this.drawLayer.getSource().addFeature(feature);
			});
		} else {
			// 移除绘制
		}
	}

	/**
	 * 创建一个图层用来绘制
	 */
	createDrawLayer() {
		const style = new Style({
			fill: new Fill({
				color: 'rgba(255, 255, 255, 0.5)',
			}),
			stroke: new Stroke({
				color: '#0099ff',
				width: 3,
			}),
		});
		const layer = new VectorLayer({
			source: new VectorSource({}),
			style: function() {
				return style;
			},
			zIndex: 99999,
		});
		// layer.setId('drawLayer');
		this.drawLayer = layer;
		this.map.addLayer(layer);
	}

	/**
	 * @param {Object} map
	 * @param {Object} projection
	 * @param {Object} mapServiceLoader
	 * @param {Object} drawSource
	 */
	constructor(map, projection, mapServiceLoader) {
		this.map = map;
		this.projection = projection;
		this.mapServiceLoader = mapServiceLoader;
		this.drawSource = new VectorSource({
			wrapX: false
		});;
		this.createDrawLayer();
	}
}

使用：

import {
		DrawArea
	} from '@/map/DrawArea.js';

// 这里示例-只放了部分代码
const map = new Map({
					target: this.mapId,
					layers: [],
					view,
					controls: [],
		});

// 创建绘制交互
this.DrawArea = new DrawArea(map, projection, this.mapServiceLoader);




// 检索组件相关参数改变-开始绘制
			spTypeAndDrawChange(e) {
				console.log('检索组件相关参数改变', e);
				this.spTypeAndDrawData = e;
				const {
					regionDrawType,
					spatialPositionType
				} = e;
				if (spatialPositionType === 1) {
					if (regionDrawType === 0) {
						// 清除
						this.DrawArea.clearDrawLayer();
					} else {
						// 禁止拖动地图
						// 绘制模式
						this.DrawArea.start(regionDrawType);
					}
				} else {
					// 清除
					this.DrawArea.clearDrawLayer();
				}
			},

ok