vue利用openlayers实现动态轨迹

“vue利用openlayers实现动态轨迹”的实现过程中，需要安装openlayers、esri-leaflet等相关库，而vue可以利用npm进行安装，具体步骤如下：

安装依赖库

npm install ol esri-leaflet --save

在Vue中引入openlayers和esri-leaflet

import 'ol/ol.css'
import ol from 'ol'
import 'esri-leaflet'

在Vue中利用openlayers实现动态轨迹，则需要实现以下几步：

1. 初始化地图对象

let map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

1. 实例化layer和source

let vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [] // 存放轨迹的feature
  })
})
map.addLayer(vectorLayer)

1. 初始化feature

let feature = new ol.Feature({
  geometry: new ol.geom.LineString([]) // 空的轨迹线
})
vectorLayer.getSource().addFeature(feature)

1. 接收实时位置更新

let newCoords = []
for (let i = 0; i < coords.length; i++) {
  newCoords.push(
    ol.proj.fromLonLat([coords[i].longitude, coords[i].latitude])
  )
}
feature.setGeometry(new ol.geom.LineString(newCoords))

1. 清除轨迹线

vectorLayer.getSource().clear()

1. 一条示例：实时更新轨迹线

<template>
  <div>
    <div id="map" style="width: 100%; height: 100vh;"></div>
  </div>
</template>

<script>
import 'ol/ol.css'
import ol from 'ol'
import 'esri-leaflet'

export default {
  name: 'RealtimeTrack',
  data() {
    return {
      map: null,
      feature: null
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      let self = this
      let map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      })
      let vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
          features: []
        })
      })
      map.addLayer(vectorLayer)
      let feature = new ol.Feature({
        geometry: new ol.geom.LineString([])
      })
      vectorLayer.getSource().addFeature(feature)
      self.feature = feature

      setInterval(function() {
        // 模拟实时位置更新
        let newCoords = []
        let coords = self.getNewCoords()
        for (let i = 0; i < coords.length; i++) {
          newCoords.push(
            ol.proj.fromLonLat([coords[i].longitude, coords[i].latitude])
          )
        }
        feature.setGeometry(new ol.geom.LineString(newCoords))
      }, 1000)
    },
    getNewCoords() {
      // 返回一个包含经纬度信息的数组
      return [
        { longitude: 112.9813, latitude: 28.1788 },
        { longitude: 112.9534, latitude: 28.1710 },
        { longitude: 112.9397, latitude: 28.1654 },
        { longitude: 112.9378, latitude: 28.1364 },
        { longitude: 112.9385, latitude: 28.1126 }
      ]
    }
  }
}
</script>

<style scoped>
#map {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  position: absolute;
}
</style>

1. 另一条示例：清除轨迹线

<template>
  <div>
    <div id="map" style="width: 100%; height: 100vh;"></div>
    <button @click="clearTrack">Clear Track</button>
  </div>
</template>

<script>
import 'ol/ol.css'
import ol from 'ol'
import 'esri-leaflet'

export default {
  name: 'ClearTrack',
  data() {
    return {
      map: null,
      vectorLayer: null
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      let self = this
      let map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      })
      self.map = map
      let vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
          features: []
        })
      })
      map.addLayer(vectorLayer)
      self.vectorLayer = vectorLayer
      let feature = new ol.Feature({
        geometry: new ol.geom.LineString([])
      })
      vectorLayer.getSource().addFeature(feature)

      // 模拟实时位置更新
      setInterval(function() {
        let newCoords = []
        let coords = self.getNewCoords()
        for (let i = 0; i < coords.length; i++) {
          newCoords.push(
            ol.proj.fromLonLat([coords[i].longitude, coords[i].latitude])
          )
        }
        feature.setGeometry(new ol.geom.LineString(newCoords))
      }, 1000)
    },
    clearTrack() {
      this.vectorLayer.getSource().clear()
    },
    getNewCoords() {
      // 返回一个包含经纬度信息的数组
      return [
        { longitude: 112.9813, latitude: 28.1788 },
        { longitude: 112.9534, latitude: 28.1710 },
        { longitude: 112.9397, latitude: 28.1654 },
        { longitude: 112.9378, latitude: 28.1364 },
        { longitude: 112.9385, latitude: 28.1126 }
      ]
    }
  }
}
</script>

<style scoped>
#map {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  position: absolute;
}
</style>