【Openlayers】绘制和编辑图形（完整示例）

---

前言

OpenLayers是一个开源的JavaScript库，它用于在Web页面中创建交互式地图应用程序。使用OpenLayers可以绘制各种类型的图形，如点、线、面等。

以下是使用OpenLayers绘制图形的示例代码：

---

一、初始化图层和影像：

let raster = new Tile({
    name: 'defaultLayer',
    source: new XYZ({
    	url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=6'
    })
})
let vector = new LayerVector({
    source: this.source,
    style: new Style({
    	fill: new Fill({
     		color: 'rgba(255, 255, 255, 0.2)'
    	}),
		stroke: new Stroke({
       		color: '#ffcc33',
			width: 2
		}),
		image: new Circle({
			radius: 7,
			fill: new Fill({
				color: '#ffcc33'
			})
		})
	})
})

二、创建地图对象：

this.map = new Map({
    target: 'map',
    layers: [raster, vector],
    view: new View({
        projection: "EPSG:4326",
        center: [115.543045, 45.16871],
        zoom: 10
    })
})

三、创建绘制交互对象和编辑交互对象：

this.draw = new Draw({
    source: this.source,
    type: this.tool
})
this.map.addInteraction(this.draw)

let modify = new Modify({
    source: this.source,
    insertVertexCondition: () => false // 如果返回true，可以增加节点
})

this.map.addInteraction(modify)

四、完整示例

<template>
    <div class="vm">
        <h2 class="h-title">修改已绘制的图形</h2>
        <div class="tools-x">
            <select id="type" v-model="tool">
                <option v-for="item in tools" :key="item.value" :value="item.value">{{item.label}}</option>
            </select>
        </div>
        <div id="map" class="map-x"></div>
    </div>
</template>

<script>
    import 'ol/ol.css'
    import {Map, View} from 'ol'
    import Tile from 'ol/layer/Tile'
    import OSM from 'ol/source/OSM'
    import XYZ from 'ol/source/XYZ'
    import LayerVector from 'ol/layer/Vector'
    import SourceVector from 'ol/source/Vector'
    import {Draw, Modify, Snap} from 'ol/interaction'
    import {Style, Fill, Stroke, Circle} from 'ol/style'

    export default {
        data() {
            return {
                tool: 'Circle', // 当前选中的工具
                tools: [ // 工具集
                    {
                        value: 'Point',
                        label: '点'
                    },
                    {
                        value: 'LineString',
                        label: '线'
                    },
                    {
                        value: 'Polygon',
                        label: '多边形'
                    },
                    {
                        value: 'Circle',
                        label: '圆'
                    },
                    {
                        value: 'None',
                        label: '无'
                    }
                ],
                map: null,
                draw: null,
                source: new SourceVector(),
                draw: null,
                snap: null
            }
        },
        watch: {
            tool(newVal) {
                this.addInteractions()
            }
        },
        methods: {
            initMap() {
                let raster = new Tile({
                    name: 'defaultLayer',
                    source: new XYZ({
                        url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=6'
                    })
                })
                let vector = new LayerVector({
                    source: this.source,
                    style: new Style({
                        fill: new Fill({
                            color: 'rgba(255, 255, 255, 0.2)'
                        }),
                        stroke: new Stroke({
                            color: '#ffcc33',
                            width: 2
                        }),
                        image: new Circle({
                            radius: 7,
                            fill: new Fill({
                                color: '#ffcc33'
                            })
                        })
                    })
                })

                this.map = new Map({
                    target: 'map',
                    layers: [raster, vector],
                    view: new View({
                        projection: "EPSG:4326",
                        center: [115.543045, 45.16871],
                        zoom: 10
                    })
                })

                let modify = new Modify({
                    source: this.source,
                    insertVertexCondition: () => false // 如果返回true，可以增加节点
                })

                this.map.addInteraction(modify)
                this.addInteractions()
            },
            addInteractions() {
                if (this.draw !== null) {
                    this.map.removeInteraction(this.draw)
                }
                if (this.snap !== null) {
                    this.map.removeInteraction(this.snap)
                }

                this.draw = new Draw({
                    source: this.source,
                    type: this.tool
                })
                this.map.addInteraction(this.draw)

                this.draw.on('drawend', function (event) {
                    var feature = event.feature;
                    var geometry = feature.getGeometry();

                    // 可以根据需要对图形进行处理，例如获取坐标等
                    console.log(geometry.getCoordinates());
                });
                this.snap = new Snap({source: this.source})
            }
        },
        mounted() {
            this.initMap()
        }
    }
</script>

<style>

</style>

---

总结

以上是一个基本的使用OpenLayers绘制图形的示例。你可以根据自己的需求，修改代码中的地图配置、绘制交互类型等。