网站建设哪家好就推 鹏博资讯_单位网站制作_关键词优化有哪些作用_百度首页网址

一、配置openlayer环境

借鉴：Vue 3 + OpenLayers 的简单使用_vue3 openlayers-CSDN博客

二、代码如下（绘制点、线、面、矩形、圆、随意画）

drawTools.js:

import {ref} from "vue";
import Draw from 'ol/interaction/Draw.js';
import {Vector as VectorSource
} from 'ol/source.js';
import {Feature } from "ol";
import {Vector as VectorLayer
} from 'ol/layer.js';
import {Circle as CircleStyle,Fill,Stroke,Style,
} from 'ol/style';
/*import {Point,LineString,Polygon
} from 'ol/geom.js';*/
import {createRegularPolygon
} from 'ol/interaction/Draw.js';export const drawTypeEnum = {POINT:"Point",// 绘制点LINE:"LineString",// 绘制线POLYGON:"Polygon",// 绘制多边形（移动端不适合）CIRCLE:"Circle",// 绘制圆（边很多）RECTANGLE:"Rectangle",// 绘制矩形（边为4）// 随手画,增加下面的函数控制，即可为拖拽绘制// freehandCondition: (event) => {// 	// 按压拖拽绘制// 	return event.originalEvent.button == -1 || event.originalEvent.button === 0;// },OPTIONAL: "Optional",
}const drawLayer = ref(null);
const drawSource = ref(null);
const draw = ref(null);// 默认导出方法
export default {/*** 绘制方法* @param map - 地图容器* @param - drawType 绘制类型* */ drawGraphical(map,drawType){this.startDraw(map);// 开始绘制switch(drawType){/*case "Point":break;*/case drawTypeEnum.POINT:// 绘制点draw.value = new Draw({source: drawSource.value,// style: drawStyle,type: "Point",});break;case drawTypeEnum.LINE:// 绘制线draw.value = new Draw({source: drawSource.value,// style: drawStyle,type: "LineString",});break;case drawTypeEnum.POLYGON:// 绘制面draw.value = new Draw({source: drawSource.value,// style: drawStyle,type: "Polygon",});break;case drawTypeEnum.CIRCLE:// 绘制圆draw.value = new Draw({source: drawSource.value,//style: drawStyle,type: "Circle",geometryFunction:createRegularPolygon(32),freehandCondition: (event) => {// 按压拖拽绘制return event.originalEvent.button == -1 || event.originalEvent.button === 0;},});break;case drawTypeEnum.RECTANGLE:// 绘制矩形// 绘制矩形draw.value = new Draw({source: drawSource.value,// style: drawStyle,type: 'Circle',geometryFunction: createRegularPolygon(4),freehandCondition: (event) => {// 按压拖拽绘制return event.originalEvent.button == -1 || event.originalEvent.button === 0;},});break;case drawTypeEnum.OPTIONAL:// 随意画// 随手画draw.value = new Draw({source: drawSource.value,// style: drawStyle,//type: 'Polygon',// 随意画面type:'LineString',// 随意画线freehandCondition: (event) => {// 按压拖拽绘制return event.originalEvent.button == -1 || event.originalEvent.button === 0;},});break;}map.addInteraction(draw.value);// 监听绘制完成事件draw.value.on("drawend",function(event){// 获取绘制的要素//console.log('监听绘制完成事件', event, drawLayer.value);const geom = event.target;// 添加绘制结果到图层const feature = new Feature(geom)drawSource.value.addFeature(feature);});},/*** 开始绘制*/startDraw(map){this.endDraw(map);drawSource.value = new VectorSource({});drawLayer.value = new VectorLayer({id:'Draw',source: drawSource.value,style: new Style({fill: new Fill({color: 'rgba(255, 255, 255, 0.5)'}),stroke: new Stroke({color: '#0099ff',width: 3}),image: new CircleStyle({radius: 7,fill: new Fill({color: '#0099ff'})})}),zIndex:16});map.addLayer(drawLayer.value);},/*** 结束绘制*/endDraw(map){if (drawLayer.value) {// 清除绘制图层map.removeLayer(drawLayer.value);// 清除绘制map.removeInteraction(draw.value);}}}

三、使用方法

在**vue中引入

import drawTools, {drawTypeEnum} from "../js/drawTools.js";

方法中调用：

// 绘制点事件
const drawPoint = () =>{//alert("绘制点");drawTools.drawGraphical(props.map,drawTypeEnum.POINT);
}// 绘制线事件
const drawLine = () =>{//alert("绘制线");drawTools.drawGraphical(props.map,drawTypeEnum.LINE);
}// 绘制面事件
const drawArea = () =>{//alert("绘制面");drawTools.drawGraphical(props.map,drawTypeEnum.POLYGON);
}const clear = () =>{//alert("清除");drawTools.endDraw(props.map);// 清除绘制
}

注意：props.map是map.vue中传递过来的map容器对象

父组件：

<template><div class="openlayers-map"><div id="map"><BaseVue :map="map" :mapCenter="mapCenter" :mapZoom="mapZoom"/></div></div>
</template>
<script setup>
***
***const map = ref(null)
const mapCenter = ref([125.313642, 43.898338])
const mapZoom = ref(15) // 默认缩放级别//配置地图方法
***
***</script>

子组件：

// 子组件承接父组件对象
const props = defineProps({map:Map,mapCenter:[],mapZoom:Number
});

注意：如果和测量（测距、测面）measure.js一起使用需要先清除测量绘制图层，使用如下：

// 绘制点事件
const drawPoint = () =>{// 清除测量clearMeasure(props.map);drawTools.drawGraphical(props.map,drawTypeEnum.POINT);}// 绘制线事件
const drawLine = () =>{// 清除测量clearMeasure(props.map);drawTools.drawGraphical(props.map,drawTypeEnum.LINE);
}// 绘制面事件
const drawArea = () =>{// 清除测量clearMeasure(props.map);drawTools.drawGraphical(props.map,drawTypeEnum.POLYGON);
}const clear = () =>{clearMeasure(props.map);// 清除测量drawTools.endDraw(props.map);// 清除绘制
}