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>

效果圖：