Openlayers 是一個模組化、高效能並且功能豐富的WebGIS客戶端的包，用於顯示地圖及空間資料，並與之進行互動，具有靈活的擴充套件機制。

簡單來說，使用 Openlayers（後面簡稱ol） 可以很靈活自由的做出各種地圖和空間資料的展示。而且這個框架是完全免費和開源的。

前言

本文記錄 使用 OpenLayers 入門，使用 OpenLayers 建立地圖元件，分別使用 OpenLayers 提供的地圖和本地圖片做為地圖。

Overview
OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles,vector data and markers loaded from any source. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free,Open Source Script,released under the 2-clause BSD License (also known as the FreeBSD).

官方地址：https://openlayers.org/

1. 安裝 OpenLayers 庫

cnpm install ol

2. Vue 建立 OpenLayers 元件

效果圖

Code

	<template>
	  <div id="map" class="map"><;/div>
	</template>
	
	<script>
	import "ol/ol.";
	import Map from "ol/Map";
	import OSM from "ol/source/OSM";
	import TileLayer from "ol/layer/Tile";
	import View from "ol/View";
	
	export default {
	  mounted() {
	    this.initMap();
	  },methods: {
	    initMap() {
	      new Map({
	        layers: [
	          new TileLayer({
	            source: new OSM()
	          })
	        ],target: "map",view: new View({
	          center: [0,0],zoom: 2
	        })
	      });
	
	      console.log("init finished");
	    }
	  }
	};
	</script>
	<style>
	.map {
	  width: 100%;
	  height: 400px;
	}
	</style>

3. OpenLayers 使用本地圖片作為地圖

效果圖：

Code

	<template>
	  <div>
	    <div id="map" class="map"></div>
	  </div>
	</template>
	
	<script>
	import "ol/ol.css";
	import ImageLayer from "ol/layer/Image";
	iLQHdfGMmport Map from "ol/Map";
	import Projection from "ol/proj/Projection";
	imp
 
ort Static from "ol/source/ImageStatic";
	import View from "ol/View";
	import { getCenter } from "ol/extent";
	
	let extent = [0,338,600];
	let projection = new Projection({
	  code: "xkcd-image",units: "pixels",extent: extent
	});
	
	export default {
	  data() {
	    return {
	      map: {}
	    };
	  },mounted() {
	    this.initMap();
	  },methods: {
	    initMap() {
	      this.map = new Map({
	        layers: [
	          new ImageLayer({
	            source: new Static({
	              attributions: '© <a href="http://xkcd.com/license.html" rel="external nofollow" >xkcd</a>',url: "http://localhost:8080/img/123.5cba1af6.jpg",projection: projection,imageExtent: extent
	            })
	          })
	        ],view: new View({
	          projection: projection,center: getCenter(extent),zoom: 1,maxZoom: 4,minZoom: 1
	        })
	      })客棧;
	    }
	  }
	};
	</script>
	<style>
	.map {
	  width: 100%;
	  height: 400px;
	}
	</style>

到此這篇關於Vue + OpenLayers 快速入門學習教程的文章就介紹到這了,更多相關Vue OpenLayers入門內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！