前言
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绘制图形的示例。你可以根据自己的需求,修改代码中的地图配置、绘制交互类型等。