Vue如何创建OpenLayers组件

这篇文章给大家分享的是有关Vue如何创建OpenLayers组件的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

1. 安装 OpenLayers 库

cnpm install ol

2. Vue 创建 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: '&copy; <a href="http://xkcd.com/license.html" 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>

感谢各位的阅读！关于“Vue如何创建OpenLayers组件”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！