使用环境
npm install -g @vue/cli
项目初始化
vue init webpack ol-vue
安装依赖
npm i ol -save
初体验
<template>
<div id="map"class="map"></div>
</template>
<script>
import 'ol/ol.css'
import olMap from 'ol/Map'
import olView from 'ol/View'
import ollayerTile from 'ol/layer/Tile'
import olsourceOSM from 'ol/source/OSM'
import {get as getProjection} from 'ol/proj';
export default {
name: 'Map',
data () {
return {
map:null,
view:null
}
},
mounted(){
var projection = getProjection('EPSG:4326');
this.map = new olMap({
target:'map',
layers:[
new ollayerTile({
source:new olsourceOSM()
})
],
view:new olView({
center: [108,30],
projection: projection,
zoom:5
})
});
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.map {
height: 800px;
}
</style>