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的組件和方法，可以大大提高開發效率。