VueOpenLayers——一个用于地图开发的vue组件库

VueOpenLayers是一个基于Vue.js和开源JavaScript库OpenLayers构建的地图组件库。可以方便地用Vue.js技术栈来构建高性能的WebGIS应用。在这篇文章中，我们将从几个方面探究VueOpenLayers的使用。

一、根据经纬度画圆形

在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的组件和方法，可以大大提高开发效率。