vue 引入 OpenLayers

一、VUE 引入OpenLayers

npm install ol

二、初始化一个地图

<template>
  <div class="map-container" ref="map"></div>
</template>
<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'

export default {
  data () {
    return {
      map: null
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      this.map = new Map({
        target: this.$refs.map,
        layers: [
          new TileLayer({
            source: new OSM()
          })
        ],
        view: new View({
          projection: 'EPSG:4326', // 使用这个坐标系
          center: [113.570594, 34.829485], // 郑州
          zoom: 12
        })
      })
    }

  }
}
</script>
<style lang="scss" scoped>
  .map-container{
    width: 100%;
    height: 100%;
  }
</style>

三、效果

1662621101083.png