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: '© <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组件”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!