openlayers整合Vue加载天地图

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！