前言
提示:本次演示项目是基于node14+版本创建:
一、创建vue+openlayers项目
在系统中找一个文件夹,如d:/demos中,打开cmd窗口,使用 vue create vue-openlayers命令创建vue项目
在项目中选择了 vue-router和vuex,方便以后的路由和组件数据传递使用方便。
二、安装openlayers,引入element-ui组件库
1.安装openlayers
进入到vue-openlayers文件夹中, 打开cmd窗口,使用 npm install ol --save 来安装openlayers组件
2.安装element-ui组件库
为了在项目中操作方便,我们直接引用elementUI组件,方便添加一些按钮,弹窗等。 进入到vue-openlayers文件夹中, 打开cmd窗口,使用 npm i element-ui -S 来安装elementUI组件 在src/main.js中添加
三、初始化地图页面
打开src/views/Home.vue文件替换以下代码
<template>
<div class="container">
<h3>加载OpenStreet地图</h3>
<div id="vue-openlayers" class="map-x"></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'
import {
getPointResolution,
get as getProjection,
fromLonLat,
transform,
} from 'ol/proj';
export default {
name: 'FirstMap',
data() {
return {
map: null,
}
},
methods: {
initMap() {
this.map = new Map({
target: "vue-openlayers",
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>
#vue-openlayers {
width: 800px;
height: 400px;
margin: 0 auto;
border: 1px solid #42B983;
}
h3 {
line-height: 40px;
}
</style>
进入到vue-openlayers文件夹中, 打开cmd窗口,执行命令:npm run serve 浏览器打开http://localhost:8080,就能显示我们的第一个地图。