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

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

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

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

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

 

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

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

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

  vue init webpack openlayers-test

 上面的命令已过时,可用下面的命令创建项目:

  vue create openlayers-test

  如此,vue项目创建成功。

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

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

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

5.运行项目

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

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

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

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

  npm install ol -S

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

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

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

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

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

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

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

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

四、主要代码
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地图的一些常见问题(整理)

上一篇:css属性选择器


下一篇:(转)JSON数据格式和js操作json总结