Vue|Vue + OpenLayers 快速入门学习教程
Openlayers 是一个模块化、高性能并且功能丰富的WebGIS客户端的JavaScript包，用于显示地图及空间数据，并与之进行交互，具有灵活的扩展机制。
简单来说，使用 Openlayers（后面简称ol） 可以很灵活自由的做出各种地图和空间数据的展示。而且这个框架是完全免费和开源的。
前言
本文记录 Vue 使用 OpenLayers 入门，使用 OpenLayers 创建地图组件，分别使用 OpenLayers 提供的地图和本地图片做为地图。
【Vue|Vue + 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 ol2. Vue 创建 OpenLayers 组件 效果图
文章图片
Code
.map {width: 100%; height: 400px; }
3. OpenLayers 使用本地图片作为地图 效果图：
Code
.map {width: 100%; height: 400px; }
到此这篇关于Vue + OpenLayers 快速入门学习教程的文章就介绍到这了,更多相关Vue OpenLayers入门内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- VueX--VUE核心插件
- vue组件中为何data必须是一个函数（）
- 用npm发布一个包的教程并编写一个vue的插件发布
- vuex|vuex 基础结构
- Vue源码分析—响应式原理(二)
- VueX（Vuex|VueX（Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)
- neo4j|neo4j cql语句 快速查询手册
- vue中的条件判断详解v-if|vue中的条件判断详解v-if v-else v-else-if v-show