参考文章：https://www.jianshu.com/p/fd399ad4b7d8
1、安装vue-cli
npm install -g @vue/cli
2、vue初始化项目，一路Enter，默认
vue init webpack vue-openlayers
3、安装ol包
cnpm i -S ol(指定版本安装：cnpm i -S ol@4.6.5)
4、创建组件，更改路由
src\components\olmap.vue
<template>
<div id="map" ref="rootmap">
</div>
</template>
<script>
import "ol/ol.css";
//最新版本引入
import { Map, View } from "ol";
//v4.5.6引入
//import Map from 'ol/map';
//import View from 'ol/view';
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
export default {
data() {
return {
map: null
};
},
mounted() {
var mapcontainer = this.$refs.rootmap;
this.map = new Map({
target: "map",
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
projection: "EPSG:4326", //使用这个坐标系
center: [114.064839,22.548857], //深圳
zoom: 12
})
});
}
};
</script>
<style>
#map{height:100%;}
/*隐藏ol的一些自带元素*/
.ol-attribution,.ol-zoom { display: none;}
</style>
src\App.vue
<template>
<div id="app">
<olmap />
</div>
</template>
<script>
import olmap from './components/olmap.vue'
export default {
name: 'app',
components: {
olmap
}
}
</script>
<style>
*{padding:0; margin:0;}
html,body{
height: 100%;
}
#app {
height: 100%;
}
</style>
src\router\index.js
import Vue from 'vue'
import Router from 'vue-router'
import olmap from '../components/olmap'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'olmap',
component: olmap
}
]
})
