一、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 XYZ from 'ol/source/XYZ'

export default {
  data () {
    return {
      map: null
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      this.map = new Map({
        target: this.$refs.map,
       layers: [
          new TileLayer({
            title: '网格',
            source: new XYZ({
              visible: true,
              wrapX: true,
              url: 'http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=‘‘你的key值’’'

            })
          }),

          new TileLayer({
            title: '数据',
            source: new XYZ({
              visible: true,
              wrapX: true,
              url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=“你的key值”'

            })
          })
        ],
        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>