1 需求

使用openlayers繪圖功能繪制多邊形

2 分析

主要是openlayers中draw功能的使用，感覺比較簡單，祖?zhèn)鰿V大法搞起來

3 實(shí)現(xiàn)

為了方便，就不加載底圖了，直接使用繪制功能

2.1 簡單實(shí)現(xiàn)

<template><div id="map" class="map"></div>
</template><script setup lang="ts">
import { Map, View } from 'ol';
import { get } from 'ol/proj';
import { Style } from 'ol/style';
import { Fill, Stroke } from 'ol/style.js';
import Draw from 'ol/interaction/Draw.js';
import { Vector as VectorSource } from 'ol/source.js';
import { Vector as VectorLayer } from 'ol/layer.js';const projection = get('EPSG:4326');
const source = new VectorSource();
const map = ref();
const draw = ref();onMounted(() => {initMap();initDraw();
});const initMap = () => {map.value = new Map({target: 'map',view: new View({center: [116.406393, 39.909006],projection: projection,zoom: 5}),layers: [new VectorLayer({source: source,style: new Style({stroke: new Stroke({color: 'orange',width: 2}),fill: new Fill({color: [203, 150, 62, 0.5]})})})]});
};const initDraw = () => {draw.value = new Draw({source: source,type: 'Polygon'});draw.value.on('drawstart', e => {console.log('e', e);});draw.value.on('drawend', e => {console.log('coord', e.feature.getGeometry().getCoordinates());});map.value.addInteraction(draw.value);
};
</script>
<style scoped lang="scss">
.map {width: 100%;height: 100%;background: #000;
}
</style>

2.2 需求更新1

新需求：

• 自定義繪制時(shí)的樣式，沒有繪制完成時(shí)，顯示虛線，頂點(diǎn)增加Point
• 繪制完成后每個(gè)頂點(diǎn)需要顯示一個(gè)Point

分析：

這里主要是styleFunction的靈活使用

實(shí)現(xiàn):

<template><div id="map" class="map"></div>
</template><script setup lang="ts">
import { Map, View } from 'ol';
import { get } from 'ol/proj';
import { Style } from 'ol/style';
import Draw from 'ol/interaction/Draw.js';
import { Vector as VectorSource } from 'ol/source.js';
import { Vector as VectorLayer } from 'ol/layer.js';
import { Circle, Fill, Stroke } from 'ol/style.js';
import {  Point } from 'ol/geom';const projection = get('EPSG:4326');
const source = new VectorSource();
const map = ref();
const draw = ref();onMounted(() => {initMap();initDraw();
});const initMap = () => {map.value = new Map({target: 'map',view: new View({center: [116.406393, 39.909006],projection: projection,zoom: 5}),layers: [new VectorLayer({source: source,style: styleFunc})]});
};const initDraw = () => {draw.value = new Draw({source: source,type: 'Polygon',style: drawStyleFunc});draw.value.on('drawstart', e => {console.log('e', e);});draw.value.on('drawend', e => {console.log('coord', e.feature.getGeometry().getCoordinates());});map.value.addInteraction(draw.value);
};const drawStyleFunc = (feature) => {const styles = [];const coord = feature.getGeometry().getCoordinates();for (let i = 0; i < coord.length - 1; i++) {styles.push(new Style({geometry: new Point(coord[i]),image: new Circle({radius: 4,fill: new Fill({color: '#ffff'}),stroke: new Stroke({color: 'orange',width: 2})})}));}styles.push(new Style({fill: new Fill({color: [255, 255, 255, 0.5]}),stroke: new Stroke({color: 'red',lineDash: [10],width: 2})}));return styles;
};const styleFunc = (feature) => {const styles = [];const coord = feature.getGeometry().getCoordinates();for (let i = 0; i < coord[0].length - 1; i++) {styles.push(new Style({geometry: new Point(coord[0][i]),image: new Circle({radius: 4,fill: new Fill({color: '#ffff'}),stroke: new Stroke({color: 'orange',width: 2})})}));}styles.push(new Style({fill: new Fill({color: [128, 128, 255, 0.5]}),stroke: new Stroke({color: 'blue',width: 2})}));return styles;
};
</script>
<style scoped lang="scss">
.map {width: 100%;height: 100%;background: #000;
}
</style>

2.2 需求更新2

新需求：

• 確定的兩個(gè)頂點(diǎn)之間變?yōu)閷?shí)線
• 取消跟隨鼠標(biāo)的Point，影響定位
• 取消繪制時(shí)的填充

分析：

這里主要是styleFunction的靈活使用

實(shí)現(xiàn)：

<template><div id="map" class="map"></div>
</template><script setup lang="ts">
import { Map, View } from 'ol';
import { get } from 'ol/proj';
import { Style } from 'ol/style';
import Draw from 'ol/interaction/Draw.js';
import { Vector as VectorSource } from 'ol/source.js';
import { Vector as VectorLayer } from 'ol/layer.js';
import { Circle, Fill, Stroke } from 'ol/style.js';
import {  LineString, Point } from 'ol/geom';const projection = get('EPSG:4326');
const source = new VectorSource();
const map = ref();
const draw = ref();onMounted(() => {initMap();initDraw();
});const initMap = () => {map.value = new Map({target: 'map',view: new View({center: [116.406393, 39.909006],projection: projection,zoom: 5}),layers: [new VectorLayer({source: source,style: styleFunc})]});
};const initDraw = () => {draw.value = new Draw({source: source,type: 'Polygon',style: drawStyleFunc});draw.value.on('drawstart', e => {console.log('e', e);});draw.value.on('drawend', e => {console.log('coord', e.feature.getGeometry().getCoordinates());});map.value.addInteraction(draw.value);
};const drawStyleFunc = (feature) => {const styles = [];const type = feature.getGeometry().getType();const coord = feature.getGeometry().getCoordinates();for (let i = 0; i < coord.length - 1; i++) {styles.push(new Style({geometry: new Point(coord[i]),image: new Circle({radius: 4,fill: new Fill({color: '#ffff'}),stroke: new Stroke({color: 'orange',width: 2})})}));}if (type === 'LineString') {for (let i = 0; i < coord.length - 1; i++) {styles.push(new Style({geometry: new LineString([coord[i], coord[i + 1]]),stroke: new Stroke({color: 'orange',lineDash: coord.length > 2 && i < coord.length - 2 ? [] : [10],width: 2})}));}}return styles;
};const styleFunc = (feature) => {const styles = [];const coord = feature.getGeometry().getCoordinates();for (let i = 0; i < coord[0].length - 1; i++) {styles.push(new Style({geometry: new Point(coord[0][i]),image: new Circle({radius: 4,fill: new Fill({color: '#ffff'}),stroke: new Stroke({color: 'orange',width: 2})})}));}styles.push(new Style({fill: new Fill({color: [128, 128, 255, 0.5]}),stroke: new Stroke({color: 'blue',width: 2})}));return styles;
};
</script>
<style scoped lang="scss">
.map {width: 100%;height: 100%;background: #000;
}
</style>

存在問題：

• 在點(diǎn)擊鼠標(biāo)后并且鼠標(biāo)有移動時(shí)，前一段虛線才會變成實(shí)線，并且頂點(diǎn)加上Point，因?yàn)橹挥惺髽?biāo)移動才會有新的坐標(biāo)點(diǎn)加入到繪制，因?yàn)閛penlayers沒有提供繪制過程中的鉤子函數(shù)，所以只能是當(dāng)前效果
• 有需要時(shí)drawStyleFunction可以和styleFuntion合并成一個(gè)