Vue+Openlayers加载OSM、加载天地图
文章目录
- 1. 介绍
- 2. 加载底图
- 2.1 加载默认OSM地图
- 2.2 加载天地图
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>
效果图: