NodeJS 环境安装包下载：https://nodejs.org/zh-cn/download/

安装vue-cli3.0.1: https://cli.vuejs.org/guide/installation.html

Vue + Openlayers学习：https://www.jianshu.com/p/fd399ad4b7d8(文后有源码链接)

OpenLayers开源代码：https://github.com/openlayers/openlayers

安装环境

下载Openlayers发布版本

https://github.com/openlayers/openlayers/releases

我这里下载的是4.6.5，之后解压。

安装ol包

npm install ol

注意：此包可能会冲突，可以在外面安装好了拷贝到node_modules里面，如果是其他项目安装ol一般不会冲突。

运行Openlayers

 npm run

运行此命令会得到运行建议

这里我们运行开发模式serve-examples:

浏览器查看：

构建

使用命令之后会在build目录生成响应的输出，如需要对ol重新打包运行

npm run build-package

 Vue 集成OpenLayers

百度云盘：https://pan.baidu.com/s/1sLRUJrN8iRuuroL-b2u0Kg

地图效果:

OpenLayers Node环境安装运行构建-支持Vue集成OpenLayers的更多相关文章

  1. grunt-mac上安装运行构建工具的总结（一）

    安装node.js brew install node.js 安装grunt npm install -g grunt-cli 1.新建package.json,配置 { "name&quo ...

  2. node环境安装(mac版和windows版)

    WINDOWS版本安装 nvm 是 Mac 下的 node 管理工具,有点类似管理 Ruby 的 rvm,如果是需要管理 Windows 下的 node,官方推荐是使用 nvmw 或 nvm-wind ...

  3. Windows环境安装运行：Angular.js

    一.下载 Node.js https://nodejs.org/en/download/ 检测版本: cmd: node -v 二.安装typescript和typings 使用 Node.js 包管 ...

  4. 初学node.js-nodejs安装运行（1）

    1.Node.js中文官网http://nodejs.cn/download/下载node.js 学习node.js需要有javascript基础,没有基础的可以在http://www.w3schoo ...

  5. node 环境安装

    记录一下, 方便自己需要时用, 免得到处找 1. 官网下载安装node(选择LTS长期支持版本), 一路点击next即可(傻瓜式安装) 2. 验证是否正确安装, 打开命令窗口, 执行 node -v ...

  6. Windows node.js安装运行npm显示类似"ENOENT, stat 'C:\Users\XXXX\AppData\Roaming\npm'错误

    这个错误是在玩一个小的博客的时候,使用到node.js,正好使用的是windows系统就安装了一个windows32的node.js版本 结果一运行npm就出现如上的错误,后来发现,只要在上面提到的目 ...

  7. 与你相遇好幸运，服务器node环境安装

    >服务器更改root密码 sudo passwd root >服务器ubuntu安装ssh apt-get install openssh-server >服务器开启root用户密码 ...

  8. Linux 环境安装运行Sqlmap

    1.官网下载 .tar.gz 文件   官网地址:http://sqlmap.org/ 2.登录访问linux环境,将压缩包放入/usr/local 路径. 3.在该路径下通过 tar -xzvf f ...

  9. Vue集成openlayers

    1.安装ol库 使用cnpm i ol -s命令安装 2.建一个olMap.vue文件夹 <template> <div class='olMap'> <h2>{{ ...

随机推荐

  1. Java集合—Set集和Map集

    一.Set集合 1.概述 Set集合无序的.不可重复的元素(无序是指索引) Set集合不按照特定的方法进行排序,只是将元素放在集合中. 下面介绍一下Set集合的HashSet和TreeSet两个实现类 ...

  2. Django 学习第九天——请求与响应

    一.HttpRequest 对象: 服务器接收到http协议的请求后,会根据报文创建 HttpRequest 对象视图函数的第一个参数是HttpRequest 对象再django.http 模块中定义 ...

  3. web前端知识大纲：系列二 css篇

    web前端庞大而复杂的知识体系的组成:html.css和 javascript 二.css 1.CSS选择器 CSS选择器即通过某种规则来匹配相应的标签,并为其设置CSS样式,常用的有类选择器.标签选 ...

  4. AGC 007D.Shik and Game(DP)

    题目链接 \(Description\) 数轴上有一个人,从\(0\)出发到\(E\),速度为\(1\).数轴上还有\(n\)只熊,每只熊会在经过后的\(T\)时刻后产生一个金币.给定\(E,T\)以 ...

  5. [蓝点ZigBee] Zstack 之按键驱动以及控制LED灯 ZigBee/CC2530 视频资料

    这一节主要演示如何在Zstack 下根据板子的不同修改按键驱动,实际演示的时候代码跳动比较多,建议大家除了看视频资料以外,还需要在网上找一下相关资料进一步学习. 视频总览:http://bphero. ...

  6. js 函数与类的区别

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. js数组去除重复

    1. let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4]; let result = arr.sort().reduce((init, current)=>{ if(in ...

  8. 解决 Excel2013打开提示 文件格式和扩展名不匹配。文件可能已损坏或不安全

    有的时候打开xls文档时,会提示“文件格式和扩展名不匹配.文件可能已损坏或不安全.除非您信任其来源,否则请勿打开.是否仍要打开它?” 遇到这种情况,我们需要 1.win键+R键,打开“运行“,输入re ...

  9. python网络编程（二）

    UDP介绍 UDP --- 用户数据报协议,是一个无连接的简单的面向数据报的运输层协议.UDP不提供可靠性,它只是把应用程序传给IP层的数据报发送出去,但是并不能保证它们能到达目的地.由于UDP在传输 ...

  10. shell脚本使用技巧3--函数调用

    定义函数 function fname() { statements; } 或者 fname() { statements; } 传递参数给函数: fname arg1 arg2; ex: 函数参数定 ...