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>

效果图：