OpenLayers 6 学习一：构建第一个地图应用

一、安装OpenLayers

OpenLayers官网：OpenLayers - Get the Code

npm+OpenLayers官网：ol - npm

npm install ol

Vue项目直接安装ol会报错，安装OpenLayers失败，解决办法有两种：

方法一：先把node_modules文件夹删除，待安装OpenLayers后，再npm install安装被删除的依赖。适用于项目刚创建时，没有安装过多的依赖，毕竟依赖过多时，安装所有的依赖也很费时间。

方法二：在一个没有node_modules文件夹的新项目中，安装OpenLayers后，复制dependencies下的ol依赖和node_modules文件夹下的ol文件夹到当前项目中：

  

二、全局引入OpenLayers

 main.js文件全局引入OpenLayers：不知道用什么API，可以学习官方文档

OpenLayers官方API：OpenLayers v6.8.1 API - Index

OpenLayers官方示例：OpenLayers Examples

其实OpenLayers不推荐使用全局引入，可以在用到的页面中导入需要的js文件及变量。

//main.js
/**
 * 按需导入OpenLayers所需内容
 */
import "ol/ol.css";
import olMap from "ol/Map"
import olView from "ol/View"
import olTile from "ol/layer/Tile"
import olOSM from "ol/source/OSM"
import {fromLonLat} from "ol/proj"

let ol = {
	Map: olMap,
	View: olView,
	layer: {
		Tile: olTile,
	},
	source: {
		OSM: olOSM
	},
	proj: {
		fromLonLat: fromLonLat
	}
}
//OpenLayers全局引入方式
Vue.prototype.$ol = ol;

三、构建第一个地图应用

参照官网：OpenLayers - Quick Start

<template>
	<div class="main">
		<div id="map" class="map"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				//引用全局变量
				let ol = this.$ol;
				//官方示例
				let map = new ol.Map({
					target: 'map',
					layers: [
						new ol.layer.Tile({
							source: new ol.source.OSM()
						})
					],
					view: new ol.View({
						center: ol.proj.fromLonLat([37.41, 8.82]),
						zoom: 4
					})
				});
			}
		}
	}
</script>

<style>
	.main{
		height: calc(100vh - 100px);
	}
	.map {
		width: 100%;
		height: 100%;
	}
</style>

效果图：

​​​​​​​

 右下角总是有一个贡献者的属性显示：

 

可以通过修改css属性隐藏掉：

<style>	
	.ol-attribution{
		display: none;
	}
</style>