@[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>
    <div id="map" class="map"> 
    </div>
</template>

<script >
    import  ol from '../../static/ol.js';
    export default{
        name:'mShow',
        mounted(){
          var getMap=document.getElementById('map');
          console.log(getMap.id);
          var offlineMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            tileUrlFunction: function (coordinate) {
              console.log(coordinate[0],coordinate[1],coordinate[2]);
              var z = coordinate[0];
              var x = coordinate[1];
              var y = Math.pow(2,z)+coordinate[2];
              return "../../static/data/google/84/" + z + "/" + x + "/" + y + ".png";
        },
            maxZoom: 18,
            minZoom: 2,
            projection: 'EPSG:4326'
      })
    });
    var map = new ol.Map({
            layers:[offlineMapLayer],
            view: new ol.View({ 
                center: [114.34,30.54],
                projection: 'EPSG:4326',
                zoom: 14
              }),         
            target:getMap.id
          });
            console.log(map);
        }    
  }
</script> 

<style scoped> 
    .map
      {
        height: 100%;
        width: 100%;
      }
</style>

文件中有三个标签，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
离线地图即可加载，如下：