我这里事先已经先下载了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: "/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是需要自己去申请的
天地图官网链接
没有错误的话应该就可以看到我们加载出的天地图了
