Vue + OpenLayers 快速入門學(xué)習(xí)教程

更新時(shí)間：2021年09月15日 11:23:34 作者：PAX-K

大家都知道使用 Openlayers可以很靈活自由的做出各種地圖和空間數(shù)據(jù)的展示。而且這個(gè)框架是完全免費(fèi)和開源的，本文記錄下 Vue 使用 OpenLayers 入門，使用 OpenLayers 創(chuàng)建地圖組件的相關(guān)知識(shí)，需要的朋友一起學(xué)習(xí)下吧

Openlayers 是一個(gè)模塊化、高性能并且功能豐富的WebGIS客戶端的JavaScript包，用于顯示地圖及空間數(shù)據(jù)，并與之進(jìn)行交互，具有靈活的擴(kuò)展機(jī)制。

簡單來說，使用 Openlayers（后面簡稱ol）可以很靈活自由的做出各種地圖和空間數(shù)據(jù)的展示。而且這個(gè)框架是完全免費(fèi)和開源的。

前言

本文記錄 Vue 使用 OpenLayers 入門，使用 OpenLayers 創(chuàng)建地圖組件，分別使用 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 JavaScript, released under the 2-clause BSD License (also known as the FreeBSD).

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

1. 安裝 OpenLayers 庫

cnpm install ol

2. Vue 創(chuàng)建 OpenLayers 組件

效果圖

在這里插入圖片描述

Code

	<template>
	  <div id="map" class="map"></div>
	</template>
	
	<script>
	import "ol/ol.css";
	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";
	import Map from "ol/Map";
	import Projection from "ol/proj/Projection";
	import Static from "ol/source/ImageStatic";
	import View from "ol/View";
	import { getCenter } from "ol/extent";
	
	let extent = [0, 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  rel="external nofollow" >xkcd</a>',
	              url: "http://localhost:8080/img/123.5cba1af6.jpg",
	              projection: projection,
	              imageExtent: extent
	            })
	          })
	        ],
	        target: "map",
	        view: new View({
	          projection: projection,
	          center: getCenter(extent),
	          zoom: 1,
	          maxZoom: 4,
	          minZoom: 1
	        })
	      });
	    }
	  }
	};
	</script>
	<style>
	.map {
	  width: 100%;
	  height: 400px;
	}
	</style>

到此這篇關(guān)于Vue + OpenLayers 快速入門學(xué)習(xí)教程的文章就介紹到這了,更多相關(guān)Vue OpenLayers入門內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: