Vue+OpenLayers的第一个项目

允许部分艺术家先富起来1

已于 2022-03-24 23:48:43 修改

阅读量700

点赞数 3

文章标签： vue.js npm 前端

于 2022-01-23 15:01:32 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44220795/article/details/122651700

版权

本文详细介绍了如何使用Vue结合OpenLayers构建地图应用的过程，包括环境搭建、项目创建及首个地图项目的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-itLppPVh-1642921236935)(C:\Users\12497\AppData\Roaming\Typora\typora-user-images\image-20220123133340617.png)]$

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

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

npm install -g @vue/cli

安装webpack打包工具

npm install webpack -g

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

用手脚架创建项目

vue init webpack openlayerstest

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-180Lc9Ft-1642921236936)(C:\Users\12497\AppData\Roaming\Typora\typora-user-images\image-20220123133900312.png)]$

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

创建完毕

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sjtVY5R6-1642921236937)(C:\Users\12497\AppData\Roaming\Typora\typora-user-images\image-20220123134147014.png)]$

运行
npm run start
并进入localhost:8080

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gOjnz88n-1642921236938)(C:\Users\12497\AppData\Roaming\Typora\typora-user-images\image-20220123134234241.png)]$

Step3 安装openLayers

openLayers官网：OpenLayers - Welcome

运行命令

npm install ol -D

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eo4EXH0I-1642921236938)(C:\Users\12497\AppData\Roaming\Typora\typora-user-images\image-20220123140118817.png)]$

Step4 运行第一个OpenLayers项目

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

导包

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';

CSS代码和 Html代码

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

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

在mounted里面写代码

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

运行后即可出现效果

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-88lrN7Vj-1642921236939)(C:\Users\12497\AppData\Roaming\Typora\typora-user-images\image-20220123141639123.png)]$

全部代码

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