基于Vue的OpenLayers快速入门

若有ArcGIS API for js的二次开发经验，可以更好地理解OpenLayers里面的一些基本WebGIS通用概念。

使用Vue作为前端js框架，使用OpenLayers作为GIS API。

编辑器：VSCode

• 1.首先安装配置好node.js（下载官网），然后使用npm全局安装好所有需要用到的模块

  • webpack
  • cnpm（链接页面最底端）
  • vue
  • @vue/cli
  • yarn

• 2.使用Vue CLI创建一个项目

  获得下图的目录结构：

  

• 3.添加OpenLayers代码【了解如何在vue的框架中添加代码】

  1. 基础代码

  2. Vue+Webpack+OpenLayers6完成组件化的WebGIS开发

     （1）项目搭建

     （2）组件化开发WebGIS实例

• 4.实操来系统学习OpenLayers的基本概念【在Vue框架中加入ol的代码，而不是在.html中实操】

  • 中文教程OpenLayers 3 Primer 本教程是ol 3.x版本，现在2021年，ol出到6.x了，但基本的设计概念是相同的。