一、根据经纬度画圆形
在WebGIS应用开发中，根据某个点和半径在地图上画圆形是一个常见的需求。VueOpenLayers提供了相应的组件和方法，方便用户实现这个需求。
<template>
<openlayers-map>
<openlayers-layer>
<openlayers-source>
<openlayers-feature :geometry="myCircleGeometry">
<openlayers-style
:fill="{ color: 'rgba(255, 0, 0, 0.1)' }"
:stroke="{ color: 'red', width: 2 }"
/>
</openlayers-feature>
</openlayers-source>
</openlayers-layer>
</openlayers-map>
</template>
<script>
import { fromCircle } from 'ol/geom'
import { Component, Prop } from 'vue-property-decorator'
import { VueOpenLayers } from 'vue-openlayers'
@Component
export class MyComponent extends VueOpenLayers {
@Prop({ required: true }) lat!: number
@Prop({ required: true }) lon!: number
@Prop({ required: true }) radius!: number
get myCircleGeometry() {
return fromCircle([this.lon, this.lat], this.radius)
}
}
</script>
在上述代码中，我们首先定义了一个MyComponent组件，接收经纬度和半径作为传入参数，然后通过定义myCircleGeometry计算属性及其依赖数据来实现圆形的绘制。
二、在地图上标注
除了叠加各种图层，标注也是WebGIS应用中常见的需求，VueOpenLayers在标注方面提供了多种方式，以下是其中的一种。
<template>
<div>
<openlayers-map>
<openlayers-layer
:source="imageLayer"
:style="imageStyle"
/>
</openlayers-map>
</div>
</template>
<script>
import { Component } from 'vue-property-decorator'
import { View, Map, Feature } from 'ol'
import { Point } from 'ol/geom'
import { Tile, Vector as VectorSource } from 'ol/source'
import { fromLonLat } from 'ol/proj'
import Icon from 'ol/style/Icon'
import Style from 'ol/style/Style'
import ImageLayer from 'ol/layer/Image'
import image from './images/marker.png'
@Component
export class MarkersMap extends Vue {
private map!: Map
private imageLayer!: ImageLayer
private imageStyle: Style = new Style({
image: new Icon({
src: image,
anchor: [0.5, 1],
crossOrigin: 'anonymous'
})
})
private markerCoords = [104.0665, 30.5728]
private mounted() {
const markerFeature = new Feature({
geometry: new Point(fromLonLat(this.markerCoords))
})
this.imageLayer = new ImageLayer({
source: new VectorSource({
features: [markerFeature]
})
})
this.map = new Map({
target: this.$el.querySelector('.map') as HTMLElement,
view: new View({
center: fromLonLat(this.markerCoords),
zoom: 15
})
})
}
}
</script>
在上述代码中，我们自定义了MarkersMap组件，并在其中定义了一个点，并在地图中显示。我们使用ImageLayer来实现这个需求，将一张图片作为标注点。
三、图层管理
在WebGIS应用中，图层的管理是一个十分重要的环节。VueOpenLayers提供了多种方式来管理地图图层，以下是其中的一种：
<template>
<div>
<openlayers-map :zoom.sync="zoom">
<openlayers-layer
v-for="(layer, index) in layers"
:key="index"
:z-index="index"
:source="layer.source"
:style="layer.style"
/>
</openlayers-map>
<div class="layer-chooser">
<div
v-for="(layer, index) in layers"
:key="layer.name"
@click="layer.visible = !layer.visible"
class="layer-chooser-item"
:class="{ enabled: layer.visible }"
>
{{ layer.name }}
<i></i>
</div>
</div>
</div>
</template>
<script>
import { Component, Vue, Watch } from 'vue-property-decorator'
import { Vector as VectorSource } from 'ol/source'
import { Style, Icon } from 'ol/style'
import { Fill, Stroke } from 'ol/style'
import { Point, LineString, Polygon } from 'ol/geom'
import { Map, View } from 'ol'
import 'ol/ol.css'
@Component
export class LayerChooser extends Vue {
public zoom: number = 4
public layers = [
{
name: '点图层',
visible: true,
source: new VectorSource({
features: [
{
geometry: new Point([0, 0]),
style: new Style({
image: new Icon({
src: require('@/assets/icons/pin.png'),
anchor: [0.5, 1]
})
})
}
]
}),
style: null
},
{
name: '线图层',
visible: true,
source: new VectorSource({
features: [
{
geometry: new LineString([
[0, 0],
[10e6, 0]
]),
style: new Style({
stroke: new Stroke({
color: [255, 0, 0, 1],
width: 2
})
})
}
]
}),
style: null
},
{
name: '面图层',
visible: true,
source: new VectorSource({
features: [
{
geometry: new Polygon([[[0, 0], [10e6, 0], [10e6, 1000000]]]),
style: new Style({
fill: new Fill({
color: [0, 0, 255, 0.1]
}),
stroke: new Stroke({
color: [0, 0, 255, 1],
width: 2
})
})
}
]
}),
style: null
}
]
public mounted() {
const mapContainer = document.getElementById('map-container') as HTMLElement
this.$nextTick(() => {
new Map({
view: new View({
center: [0, 0],
zoom: this.zoom
}),
target: mapContainer.querySelector('.map') as HTMLElement,
layers: this.layers.map(layer => {
const olLayer: any = {}
for (const key in layer) {
if (key === 'source') {
olLayer.source = layer.source
} else if (key === 'style') {
olLayer.style = layer.style
} else {
olLayer[key] = layer[key]
}
}
return olLayer
})
})
})
}
@Watch('zoom')
handleZoom() {
console.log('zoom changed', this.zoom)
}
}
</script>
在上述代码中，我们首先定义了一个LayerChooser组件，可以管理多个图层，并且为每个图层提供可见性切换功能。我们使用了VectorSource来实现不同类型的图层。
通过上述的介绍，我们可以看到VueOpenLayers提供了非常多的功能和组件来满足WebGIS应用开发中的需求。在实际开发中，根据实际需求进行选择和使用VueOpenLayers的组件和方法，可以大大提高开发效率。
