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多重继承顺序---C3算法
什么是多重继承C3算法 MRO即 method resolution order (方法解释顺序),主要用于在多继承时判断属性的路径(来自于哪个类). 在python2.2版本中,算法基本思想是根据每 ...
- 真正“搞”懂http协议01—背景故事
去年读了<图解HTTP>.<图解TCP/IP>以及<图解网络硬件>但是读了之后并没有什么深刻的印象,只是有了一层模糊的脉络,刚好最近又接触了一些有关http的相关内 ...
- AspectJ 切面注解中五种通知注解:@Before、@After、@AfterRunning、@AfterThrowing、@Around
https://blog.csdn.net/u010502101/article/details/78823056
- SpringBoot拦截器
在实际开发中,总存在着这样的场景,比如拦截请求的ip地址,或者在所有的请求都返回相同的数据,如果每一个方法都写出相同数据固然可以实现,但是随着项目的变大,重复的代码会越来越多,所以在这种情况我们可以用 ...
- react那些事儿
一.参考链接https://reactjs.org/http://react-china.org/https://doc.react-china.org/https://hulufei.gitbook ...
- BZOJ.3170.[TJOI2013]松鼠聚会(切比雪夫距离转曼哈顿距离)
题目链接 将原坐标系每个点的坐标\((x,y)\)变为\((x+y,x-y)\),则原坐标系中的曼哈顿距离等于新坐标系中的切比雪夫距离. 反过来,将原坐标系每个点的坐标\((x,y)\)变为\((\f ...
- Codeforces.662C.Binary Table(状压 FWT)
题目链接 \(Description\) 给定一个\(n\times m\)的\(01\)矩阵,你可以选择一些行和一些列并将其中所有的\(01\)反转.求操作后最少剩下多少个\(1\). \(n\le ...
- Java笔记(十二) 文件基础技术
文件基础技术 一.文件概述 一)基本概念 1.文件的分类: 1)文本文件:文件中每个二进制字节都是某个可打印字符的一部分.如.java文件 2)二进制文件:文件中每个二进制字节不一定用来表示字符,也可 ...
- Linux安装Redis和Redis基本操作命令
01Redis简介 REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统. Redis是一个开源的使用ANSI ...
- React性能优化记录(不定期更新)
React性能优化记录(不定期更新) 1. 使用PureComponent代替Component 在新建组件的时候需要继承Component会用到以下代码 import React,{Componen ...