vue脚手架加载离线地图的一种方法

@[TOC](

vue脚手架加载离线地图的一种方法

)
vue脚手架加载中加载离线地图并不难，有以下几个步骤：
1、首先是搭建好vue脚手架，创建自己的项目工程，这个读者可以在网上找教程，推荐这篇文章https://baijiahao.baidu.com/s?id=1574157320322315&wfr=spider&for=pc
2、推荐用sublime或者VsCode打开自己的项目工程，本人用的是VsCode，创建的是名为radar的项目工程。

如上图所示，目前所涉及到的文件主要在radar项目文件夹的src文件夹和static文件夹。其中static文件夹存放的是项目所需要的资源文件，离线地图资源文件也就应该存放在static文件夹下（如果将离线地图资源文件存放到其他路径，则离校地图加载不出来）。src文件夹下的components文件夹存放的是自定义组件，这里的mShow.vue文件就是加载离线地图的组件。router文件夹下的index.js文件由于控制自定义组件的路由，其中，组件的路由按下图方式设置：
3、由于有关于“地图”的操作，这里需要到openlayers官网下载相关的js库，文件名为ol.js。将ol.js文件放在static文件夹下，方便后面引用
4、开始自定义组件的编写。加载离线地图组件mShow.vue文件的代码如下：

文件中有三个标签，template标签用于控制组件的结构，style标签控制组件的样式，script标签控制组件的行为。script标签中，import ol from '../../static/ol.js'; 用于引入操作地图的相关js库。mounted方法定义组件加载之后的相关操作，mounted方法中的相关代码的含义可以去openlayer官网学习，入门并不难，网址链接：https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html
5、在控制台输入： npm run dev
在浏览器中输入网址：http://localhost:8080/#/mShow
离线地图即可加载，如下：