Vue+Openlayers加载OSM、加载天地图

1. 介绍

Openlayers官网：https://openlayers.org/

安裝依赖：npm i ol

2. 加载底图

参考博客：
vue+openlayers环境配置：https://blog.csdn.net/cuclife/article/details/126195754
加载天地图：https://blog.csdn.net/weixin_43390116/article/details/122326847

2.1 加载默认OSM地图

主要的HomeView.vue内容：

<template>
  <div class="home">
    <div id="map"></div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import OSM from "ol/source/OSM";

export default {
  name: "HomeView",
  components: {},
  data() {
    return {
      map: null,
    };
  },
  methods: {
    initMap() {
      this.map = new Map({
        target: "map",
        layers: [
          new Tile({
            source: new OSM({
              wrapX: true,
            }),
          }),
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [114.064839, 22.548857],
          zoom: 8,
        }),
      });
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>
<style scoped>
.home,
#map {
  height: 100%;
  width: 100%;
}
</style>

需确保网络通畅可以访问OSM。
效果图：

2.2 加载天地图

HomeView.vue主要内容（需要更换token）：

<template>
  <div class="home">
    <div id="map"></div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { defaults as Defaults } from "ol/control.js";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
export default {
  name: "HomeView",
  components: {},
  data() {
    return {
      map: null,
    };
  },
  methods: {
    initMap() {
      let token = "xxxx换成自己申请的天地图tokenxxxx";
      let url_vec = `http://t4.tianditu.com/DataServer?T=vec_w&tk=${token}&x={x}&y={y}&l={z}`;
      let url_cav = `http://t4.tianditu.com/DataServer?T=cva_w&tk=${token}&x={x}&y={y}&l={z}`;
      var source = new XYZ({
        url: url_vec,
      });
      var tileLayer = new TileLayer({
        title: "矢量图层",
        source,
      });
      var sourceCav = new XYZ({
        url: url_cav,
      });
      var tileLayerCav = new TileLayer({
        title: "标注图层",
        source: sourceCav,
      });

      this.map = new Map({
        target: "map",
        layers: [tileLayer, tileLayerCav],
        view: new View({
          projection: "EPSG:4326",
          center: [118.91, 32.1],
          zoom: 14,
          maxZoom: 18,
          minZoom: 1,
        }),
        //不显示地图自带控件（左上角的加号、减号）
        controls: new Defaults({
          zoom: false,
          rotate: false,
        }),
      });
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>
<style scoped>
.home,
#map {
  height: 100%;
  width: 100%;
}
</style>

效果图：