一，OSM街道图（匹配4326）

1，安装ol

cnpm i ol -S

2，在components文件夹下面新建olmap.vue

<template>
    <div id="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 {
    };
  },
  mounted() {
    new Map({
      target: "map",
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        projection: "EPSG:4326",    //使用这个坐标系
        center: [104.704968,31.540962],  //西南科技大学
        zoom: 15
      })
    });
  }
};
</script>
<style>
   #map {
  height: 100vh;
  width: 100vw;
}
</style>

修改APP.vue如下

<template>
  <div id="app">
    <olmap/>
    <router-view/>
  </div>
</template>
<script>
import olmap from '@/components/olmap.vue'
export default {
  name: 'App',
  components:{
    olmap
  }
}
</script>
<style>
/* #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
#app {
  height: 100%;
}
*{padding:0; margin:0;}
html,body{
  height: 100%;
}
</style>

目录结构：

3，运行结果

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70

注意：有时候加载出来的地图只显示一半，此时只需要将APP.vue中的app样式中的text-align属性设为‘left’即可

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1

二，谷歌影像图

// Google影像地图
          source: new XYZ({
            url:
              "http://mt3.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}"
          })

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2

如果坐标系不匹配的话，可以试一下天地图影像图（匹配4326）：

source: new XYZ({
            url:
              "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=5a257cd2df1b3311723bd77b0de14baf",
          })

三，天地图

// 天地图地形图
          source: new XYZ({
            url:
              "http://t4.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=5a257cd2df1b3311723bd77b0de14baf"
          })
// 天地图影像图
          source: new XYZ({
            url:
              "http://t3.tianditu.com/DataServer?T=img_w&tk=5a257cd2df1b3311723bd77b0de14baf&x={x}&y={y}&l={z}"
          })
// 天地图标注
          source: new XYZ({
            url:
              "http://t4.tianditu.com/DataServer?T=cva_w&tk=5a257cd2df1b3311723bd77b0de14baf&x={x}&y={y}&l={z}"
          })
// 天地图底图
          source: new XYZ({
            url:
              "http://t4.tianditu.com/DataServer?T=vec_w&tk=5a257cd2df1b3311723bd77b0de14baf&x={x}&y={y}&l={z}"
          })

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3

还有更多底图加载，见：https://www.cnblogs.com/asdlijian/p/13518837.html

修改地图层级方法：

zoomIn() {
      this.map.getView().setZoom(this.map.getView().getZoom() + 1);
    },
 zoomOut() {
      this.map.getView().setZoom(this.map.getView().getZoom() - 1);
    }