[转]OpenLayers基于Vue项目的搭建

主要内容
上次介绍了什么是OpenLayers以及其他的可以GIS工具，这次说说如何基于Vue搭建OpenLayers的项目，并且实现地图的加载。

一、vue项目搭建
1.全局安装vue-cil

　　npm install --global vue-cli
2.创建一个文件夹用于存放项目

 

3.进入项目文件夹，输入cmd回车，输入命令，创建一个基于 webpack 模板的项目，项目名称为：openlayers-test

　　vue init webpack openlayers-test

　上面的命令已过时，可用下面的命令创建项目：

　　vue create openlayers-test

　　如此，vue项目创建成功。

4.用VSCode打开刚刚创建的项目，打开文件夹openlayers-test：

5.运行项目

6.在浏览器打开http://localhost:8082，可以看到下面的页面，说明vue项目搭建成功。

二、配置OpenLayers
1.安装OpenLayers，打开vscode的cmd，输入以下命令：

　　npm install ol -S

这样就可以做OpenLayers基于Vue的开发了。

三、地图加载
1.新建一个vue组件，写上如下代码。

2.将vue项目的初始页面换成新建的组件MapView.vue，并且设置div容器铺满样式。

3.保存代码，刷新浏览器，地图就加载出来了~

四、主要代码
1.在components文件夹下新建文件MapVie.vue，编写如下代码：

<template>
  <div id="mapDiv"></div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
export default {
  mounted() {
    const map = new Map({
      target: "mapDiv",
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: [0, 0],
        zoom: 0
      })
    });
  }
};
</script>

<style scoped>
#mapDiv{
    width: 100%;
    height: 100%;
}
</style>

2.按照如下所示修改项目的App.vue文件中的代码：

<template>
  <div id="app">
    <MapView/>
  </div>
</template>

<script>
import MapView from './components/MapView'

export default {
  name: 'App',
  components: {
    MapView
  }
}
</script>

<style>
html,body{
  padding: 0;
  margin: 0;
  height: 100%;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  width: 100%;
  height: 100%;
}
</style>

————————————————
版权声明：本文为CSDN博主「GIS码农」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：OpenLayers基于Vue项目的搭建

其它参考文献：

1、vue项目中使用openlayers创建地图

2、OpenLayers Node环境安装运行构建-支持Vue集成OpenLayers

3、Openlayers + Vue实现GIS地图的一些常见问题（整理）