需求

从头开始，，通过Vue-cli4搭载Vue2+Sass的环境，并配置ol6包，最后实现最简单的加载OSM底图的需求

技术框架

脚手架版本：Vue-cli4

Vue版本：vue2

CSS预处理器：Sass

openlayer版本：6

环境搭载

1、先查看自己Vue脚手架的版本

在cmd中输入vue-V就可以看到当前脚手架的版本

无脚手架的同学，可百度如何全局配置Vue脚手架（由于网上教程很多，此处不再赘述）

2、创建项目

cd到你要创建项目的位置，然后输入命令vue create xxxx(你的项目名称) 然后选择Manually select features ，之后如下图所示，选择你要配置好的环境，像如果我们要安装好Css的预处理器，此时只要选择CSS的部分，然后按下空格即可。

PS：回车是完成，空格才是选择

选择好相应的预处理器后，回车即可完成项目的创建

3、安装openlayer

创建好项目后，进入项目的终端，输入npm install ol -s 即可安装ol的环境

4、加载OSM底图

在components文件夹中创建Map组件，具体逻辑为

1、引入ol的配置包

2、创建ol中Map的类（Map类中必填有如下几项）

• target（存放的div）
• layers（加载的图层）
• view（视图）
  • 类似（arcgis for js api中的MapView）
  • 必填：投影、中心点、缩放层级

Map组件代码如下

其他注意事项

在创建文件后很多人都不知道项目代码文件的逻辑，所以我简单梳理一下

主要留意src文件夹

• src
  • assets
    • 存放静态文件
  • components
    • 存放组件
  • router
    • 存放路由
  • store
    • VueX
  • style
    • 存放CSS预处理器的样式，方便直接引用
  • views
    • 存放路由跳转的模块