Vue + OpenLayers 快速入门学习教程
Openlayers 是一个模块化、高性能并且功能丰富的WebGIS客户端的JavaScript包,用于显示地图及空间数据,并与之进行交互,具有灵活的扩展机制。
简单来说,使用 Openlayers(后面简称ol) 可以很灵活自由的做出各种地图和空间数据的展示。而且这个框架是完全免费和开源的。
前言
本文记录 Vue 使用 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 JavaScript, released under the 2-clause BSD License (also known as the FreeBSD).
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 快速入门学习教程的文章就介绍到这了,更多相关Vue OpenLayers入门内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue+ElementUI实现从后台动态填充下拉框的示例代码
本文主要介绍了Vue+ElementUI实现从后台动态填充下拉框的示例代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2022-02-02vue使用el-table 添加行手动填写数据和删除行及提交保存功能
遇到这样的需求点击新增按钮实现下列弹窗的效果,点击添加行新增一行,点击删除进行删除行,点击提交将数据传递到后端进行保存,怎么实现的呢,下面通过实例代码给大家详细讲解,感兴趣的朋友一起看看吧2023-12-12
最新评论