OpenLayers Node环境安装运行构建-支持Vue集成OpenLayers
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的更多相关文章
- grunt-mac上安装运行构建工具的总结(一)
安装node.js brew install node.js 安装grunt npm install -g grunt-cli 1.新建package.json,配置 { "name&quo ...
- node环境安装(mac版和windows版)
WINDOWS版本安装 nvm 是 Mac 下的 node 管理工具,有点类似管理 Ruby 的 rvm,如果是需要管理 Windows 下的 node,官方推荐是使用 nvmw 或 nvm-wind ...
- Windows环境安装运行:Angular.js
一.下载 Node.js https://nodejs.org/en/download/ 检测版本: cmd: node -v 二.安装typescript和typings 使用 Node.js 包管 ...
- 初学node.js-nodejs安装运行(1)
1.Node.js中文官网http://nodejs.cn/download/下载node.js 学习node.js需要有javascript基础,没有基础的可以在http://www.w3schoo ...
- node 环境安装
记录一下, 方便自己需要时用, 免得到处找 1. 官网下载安装node(选择LTS长期支持版本), 一路点击next即可(傻瓜式安装) 2. 验证是否正确安装, 打开命令窗口, 执行 node -v ...
- Windows node.js安装运行npm显示类似"ENOENT, stat 'C:\Users\XXXX\AppData\Roaming\npm'错误
这个错误是在玩一个小的博客的时候,使用到node.js,正好使用的是windows系统就安装了一个windows32的node.js版本 结果一运行npm就出现如上的错误,后来发现,只要在上面提到的目 ...
- 与你相遇好幸运,服务器node环境安装
>服务器更改root密码 sudo passwd root >服务器ubuntu安装ssh apt-get install openssh-server >服务器开启root用户密码 ...
- Linux 环境安装运行Sqlmap
1.官网下载 .tar.gz 文件 官网地址:http://sqlmap.org/ 2.登录访问linux环境,将压缩包放入/usr/local 路径. 3.在该路径下通过 tar -xzvf f ...
- Vue集成openlayers
1.安装ol库 使用cnpm i ol -s命令安装 2.建一个olMap.vue文件夹 <template> <div class='olMap'> <h2>{{ ...
随机推荐
- python数据结构之希尔排序
def shell_sort(alist): n=len(alist) gap= int(n / 2) #步长 while gap>0: for i in range(gap,n): j=i w ...
- vim编辑
vim 重点在于光标的移动,模式的切换,删除,查找,替换,复制,黏贴,撤销命令的使用 vim的三种模式:命令模式(打开文件默认进入此模式)编辑模式(输入模式)末行模式(按:键进入,只能从命令模式下按键 ...
- UVA 1592 DataBase
思路: 知识补充: ①make_pair和pair: /*pair是将2个数据组合成一个数据,当需要这样的需求时就可以使用pair,如stl中的map就是将key和value放在一起来保存.另一个应用 ...
- 51nod 算法马拉松30
题目链接 附一个代码地址 A,这个容斥一下就好了 C,rxd大爷给讲的,首先如果分三种情况(成环,正在比配环,未访问)讨论复杂度是\(3^n * n ^ 2\)的,但是对于每一个环,都可以直接枚举环的 ...
- Spring cloud Eureka错误锦集(二)
最近学习spring cloud,在测试Eureka作为服务注册中心的时候碰到了问题,错误提示如下: "D:\Program\Java\JDK1.8\bin\java" -XX:T ...
- Android 如何判断指定服务是否在运行中 “Service”
如何判断一个服务是否正在运行中: /** * 判断某个服务是否正在运行的方法 * * @param mContext * @param serviceName 是包名+服务的类名 * @return ...
- VirtWire 向客服发ticket
1 首先需要登录自己的账户 2 点击网页的Open Ticket 3 选择要发送何种类型的ticket 4 写自己的问题,包括一个合适的主题,选择你发ticket是针对哪个vps(一个账户下可以ord ...
- 潭州课堂25班:Ph201805201 django 项目 第三十八课 后台 文章发布,FastDFS安装 配置(课堂笔记)
, .安装FastDFS # 从docker hub中拉取fastdfs镜像docker pull youkou1/fastdfs # 查看镜像是否拉取成功docker images # 安装trac ...
- Vue常用模块
1.npm install Vue-Awesome-Swiper@v2.6.7 --save 实现轮播图 2.npm install axios 发送请求get,post
- No mapping found for HTTP request with URI [/webapp/] in DispatcherServlet with name 'SpringMVC'
可能有如下几个原因: 1.是否设置了web目录,在IDEA中,web目录是这样的 如果没有设置,按照下面的方法设置: 选中要设置的模块,点击file.project structure,设置web.x ...