A001： 从0到1学 vue + openlayers

---

前言

提示：本次演示项目是基于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，就能显示我们的第一个地图。