Vue+Webpack+OpenLayers6完成组件化的WebGIS开发（一、项目搭建）

一、Vue环境构建

1、安装Vue-cli脚手架

因为需要使用 npm 安装 Vue cli，而 npm 是集成在 Node.js 中的，所以第一步我们需要安装 Node.js，访问官网 https://nodejs.org/en/  下载即可。下载完成以后打开cmd查看node和npm是否已经安装好：

如上图所示表示已经安装好了node和npm。

之后可以选择安装 cnpm，即 npm 的国内镜像。使用 cnmp 的好处是在日后下载内容时会比较快，但是下载的包可能不是最新的。

安装 cnpm 的命令为 ：

npm install -g cnpm --registry=https://registry.npm.taobao.org

完成后就可以使用 cnpm 替代 npm 了，但是要注意一点，cnpm 不要与 npm 混合使用，一个项目用 cnpm 就从头用到底，不要中途敲错命令，否则就会出现混乱。不过万一遇到这种情况也不用慌，把项目的 node_modules 文件夹删了重新执行 npm/cnpm install 就行了，只是比较浪费时间。

然后再安装vue-cli脚手架即可，命令如下：

npm install -g vue-cli

2、使用vue-cli构建前端项目

首先在cmd命令界面进入项目文件夹如下：

然后执行命令 vue init webpack vuemap，这里 webpack 是以 webpack 为模板指生成项目， vuemap是我们的项目名称，大家也可以起别的名字。

这里询问我项目名称是不是 vuemap，直接回车确认就行。接下来请大家按照我截图中的方式构建：

然后等待webpack给我们自动构建项目即可。

显示上面界面的时候说明我们构建完成了，下面输入npm run dev命令启动即可，在这儿要注意一下，启动的时候要去vuemap的文件夹下启动，使用cd命令进入vuemap文件夹下：

然后输入npm run dev启动即可。

然后打开一个空白网页输入：http://localhost:8080

这样我们就完成了前端项目的搭建。

二、使用openlayers

我们首先使用VSCode打开我们上面新建的项目，主体结构如下图：

下面我们来分析一下vue-cli构建的项目的各个内容：

 

其中我们最常修改的部分就是 components 文件夹了，几乎所有需要手动编写的代码都在其中。这也是vue的核心之一。

我们再看一下如何在vscode中运行我们的项目，首先使用ctrl+~打开控制台如下：

然后在控制台输入npm run dev启动项目如下图：

然后输入localhost:8080就可以启动程序如下图：

下面我们来引入openlayers的依赖包！

首先引入ol，这里我用的cnpm下载的比较快一点，下面我也会用cnpm统一操作，不能一会npm一会cnpm容易使程序崩溃。

其中--save是指无论在开发环境中还是线上环境都添加这个依赖包。

再看一下我们是否加进来了这个依赖包，打开package.json文件：

我们的openlayers6.2.1最新版本已经添加进来了！

下面我们再来初始化一下这个项目：

index.js中关于路由routes的根路径/系统自动对应的是HelloWorld组件，我们要改变一下，当访问根目录时使其对应我们的实际创建的Home.vue组件！

先把原来引入的HelloWorld组件去掉，然后我们新建一个Home子组件。这里我们把原来的compontents文件夹删除，在src下面新建一个pages文件夹用来放置所有的网页集合。在pages下新建一个home文件夹用来放置根路径组件，在home文件夹下新建一个Home.vue组件如下图所示：

然后我们来稍微写一下根目录Home组件的内容如下：

<template>
      <div>这是我们的首页</div>
</template>

<script>
export default {
     name: 'Home'
}
</script>

<style scoped>

</style>

然后我们把这个组件引入到index.js的路由之中，如下图所示：

最后在App.vue中加上路由如下图：

最后启动程序，界面如下所示：

这样我们就完成了根目录的设置。后面我们还可以再设置别的路由界面，这里暂时不做介绍。下面我们要写地图组件了。一般的webgis项目地图都是在首页就要展示出来的，所以我们的地图组件写在home文件夹下，由于后面还要涉及别的组件，所以我们在home文件夹下新建一个compontents文件夹，把后面home页面的所有组件都放在这个文件夹中如下图所示：

下面我们来编写地图组件Map。

<template>
    <div>这是地图页面</div>
</template>

<script>
export default {
  name: 'HomeMap'
}
</script>

<style scoped>
</style>

然后在Home父组件中使用HomeMap子组件如下所示：

<template>
  <!-- 这里我们就可以用引入的HomeMap组件了,大小写用破折号 -->
    <home-map></home-map>
</template>

<script>
// 首先引入局部组件
import HomeMap from './components/Map'
export default {
  name: 'Home',
  // 需要声明局部组件
  components: {
    HomeMap: HomeMap
  }
}
</script>

<style scoped>
</style>

 代码里面已经做了解释，这里不再解释，我们再打开程序界面看一下：

果然，内容已经变成了HomeMap组件里面的内容，也就是说，我们在这个组件里面把地图加载出来即可！这样也就完成了我们所说的组件化开发WebGIS的模式。下面我们就来完善HomeMap组件，使得可以加载出来地图。

为了方便调整前端css样式，我们在程序中引入stylus，命令如下：

cnpm install stylus--save

cnpm install stylus-loader --save

安装好以后打开package.json文件如下：

这里已经帮我们添加了stylus的相关依赖。

最后我们以加载OSM底图和ArcGIS Server发布的服务为例进行展示，HomeMap组件的代码如下：

<template>
      <div>
            <div id="map"></div>
      </div>
</template>
<script>
import 'ol/ol.css'
import View from 'ol/View'
import Map from 'ol/Map'
import TileLayer from 'ol/layer/Tile'
import {OSM, TileArcGISRest} from 'ol/source';
export default {
    name:'OlMap',
    mounted() {   
      //渲染地图
      var layers=[
            new TileLayer({
                  source: new OSM()
            }),
            new TileLayer({
                   extent: [-13884991, 2870341, -7455066, 6338219],
                   source: new TileArcGISRest({
                         url: 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer'
                   })
            })
      ]

      var map=new Map({
            layers: layers,
            target: 'map',
            view: new View({
                  center: [-10997148, 4569099],
                  zoom: 4
            })
      })
    }
      

}
</script>
<style lang="stylus" scoped>
      #map
            height: 600px
            width : 100%

</style>

然后再运行我们的程序，界面如下：

 这样我们就在根目录实现了地图的加载！

这一章关于Vue+Webpack+OpenLayers6实现组件化开发WebGIS的基础项目就算搭建好了，下一张我们将通过不同的组件实现不同的地图功能模块开发！比如地图定位、图层加载、地图操作等功能，我将通过一个个小的实例来进行讲解，大家加油！