安装openlayers
网址：npm-ol
安装：npm install ol
引用
参考网址：简单的地图
代码如下
注：我使用了一个新的页面
1、在components文件下，新建一个新的map.vue文件
代码如下：
<template>
<div>
<div id="map" ref="map">
</div>
</div>
</template>
<script>
import Map from 'ol/Map.js'
import '../../node_modules/ol/ol.css'
import OSM from 'ol/source/OSM.js'
import TileLayer from 'ol/layer/Tile';
import {getLayers} from 'ol/Map.js'
import View from 'ol/View.js'
import {fromLonLat, toLonLat} from 'ol/proj.js'
export default {
name: "index",
data() {
return {
map: null
}
},
mounted：
mounted() {
this.mapint()
},
methods: {
mapint(){
var map = this.$refs.map
var layer = new TileLayer({
source: new OSM(),
wrapX:false })
this.map = new Map({
target: 'map',
layers:[layer],
view: new View({
center: fromLonLat([116, 39]),
zoom: 5 })})
}
}
</script>
<style lang="scss" scoped>
#map {
position:absolute;
/*top:100px;*/
bottom:0px;
width:100%;
height:100%;
}
</style>
2、显示,在配置路由router.js文件中引入：
import map from '@/components/map'
在const routes中添加如下代码 ：
{
path: '/',
name: 'map',
component: map
}
效果如下图
