我这里事先已经先下载了node.js
官网链接
1:创建Vue项目
链接
2:下载openlayers的依赖
npm install ol
上代码
<template>
<div id="map"></div>
</template>
<script>
import Map from "ol/Map";
import View from "ol/View";
import Tile from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
export default {
name: "HelloWorld",
data() {
return {};
},
mounted() {
var satelliteMap = new Tile({
title: "谷歌卫星图",
source: new XYZ({
crossOrigin: "anonymous",
url: "http://t7.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=自己申请的key",
}),
visible: true, // 默认为true 展示
});
new Map({
layers: [satelliteMap],
target: "map",
view: new View({
projection: "EPSG:4326", // 使用这个坐标系
center: [112.45, 28.67],
zoom: 12,
minZoom: 8,
maxZoom: 18,
}),
});
},
};
</script>
<style scoped>
#map {
height: 100vh;
}
</style>
我这里加载的网上天地图key是需要自己去申请的
天地图官网链接
没有错误的话应该就可以看到我们加载出的天地图了