Vue+OpenLayers的第一个项目

Vue+OpenLayers的第一个项目

本章节主要演示如何用Vue来运行OpenLayers，主要包括以下几步。

Step1 配置Node.js Npm Vue

配置node.js

去官网下载https://nodejs.org/en/download/，

在CMD中输入
node -v 
查看版本

配置npm

配置npm镜像，因为国内比较慢，所以需要配置好镜像。

npm install -g cnpm --registry=https://registry.npmmirror.com

创建两个文件夹node_global和node_cache，主要防止执行其他安装命令时候将东西安装在C盘里面，希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中。

打开CMD运行如下两命令

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

接下来设置环境变量，关闭cmd窗口，“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”，系统变量下新建NODE_PATH，填写好对应的路径

修改默认的用户变量D:\Program Files\nodejs\node_global

参考于(35条消息) nodejs安装与配置+初学实例详解_赏樱看雪撸代码-CSDN博客_nodejs配置

安装Vue脚手架，具体也可以参考 Vue官方网站

npm install -g @vue/cli

安装webpack打包工具

npm install webpack -g

Step2 创建一个Vue项目（用Vue脚手架）

用手脚架创建项目

vue init webpack openlayerstest

等待下载结束，按照自己需求选择某些额外配置。

创建完毕

运行
npm run start
并进入localhost:8080

Step3 安装openLayers

openLayers官网：OpenLayers - Welcome

运行命令

npm install ol -D

Step4 运行第一个OpenLayers项目

官网代码：Accessible Map (openlayers.org)

1. 导包

import 'ol/ol.css';
import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';

2. CSS代码 和 Html代码

<div id="map" class="map"></div>

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

3. 在mounted里面写代码

const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

运行后即可出现效果

全部代码

<template>
  <div id="map" class="map"></div>
</template>

<script>
  import 'ol/ol.css';
  import Map from 'ol/Map.js';
  import OSM from 'ol/source/OSM';
  import TileLayer from 'ol/layer/Tile';
  import View from 'ol/View';

  export default {
    name: "openLayers",
    mounted() {
      const map = new Map({
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        target: 'map',
        view: new View({
          center: [0, 0],
          zoom: 2,
        }),
      });
    },
  }
</script>

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