主要内容

上次介绍了什么是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项目创建成功

在这里插入图片描述
4.用VSCode打开刚刚创建的项目,打开文件夹openlayers-test:

在这里插入图片描述
5.运行项目

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

在这里插入图片描述

二、配置OpenLayers

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

npm install ol

在这里插入图片描述
这样就可以做OpenLayers基于Vue的开发了

三、地图加载

1.新建一个vue组件,写上如下代码。

在这里插入图片描述
2.将vue项目的初始页面换成新建的组件MapView.vue,并且设置div容器铺满样式。

在这里插入图片描述
3.保存代码,刷新浏览器,地图就加载出来了~

在这里插入图片描述

四、主要代码

1.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>

感兴趣的朋友们可以去试试了~~~噢咦~

Logo

前往低代码交流专区

更多推荐