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. 富文本编辑器Django-ckeditor

    富文本编辑器Django-ckeditor 前言 刚开始学习django的时候,在后台编辑数据的时候,总是在想,功能是否太简陋了点,只能做简单的文本编辑,所以在这里记录一个富文本编辑器Django-c ...

  2. Django之认证系统

    Django之认证系统 cookie和session 1.cookie不属于http协议范围,由于http协议无法保持状态,但实际情况,我们却又需要“保持状态”,因此cookie就是在这样一个场景下诞 ...

  3. metasploit支持利用的CVE

    因为需要添加许多漏洞的流量检测,所以需要模拟很多漏洞的利用过程,简单来说,就是抓漏洞利用过程的流量. 一个脚本对metasploit中的module中包含的cve字段进行提取,而后去重,得出metas ...

  4. 从小白到区块链工程师:第一阶段:Go语言的控制台输入和输出(3)

    六,Print系列的函数输出 1:Println 打印换行.Print控制台打印,lnline 一行,打印数据后自动换一行显示.下面显示在控制台打印出不同的类型. 打印输出结果后,会自动换一行.打印结 ...

  5. shiro学习总结(一)----初识shiro

    本系列内容大多总结自官网和张开涛的<跟我学Shiro> 一.shiro简介 1.1.shiro有什么用? shiro是一个功能强大使用简单的java安全框架,主要提供了五大功能: 1.认证 ...

  6. C++多态实现原理详解

    C++的多态性用一句话概括就是:在基类的函数前加上virtual关键字,在派生类中重写该函数,运行时将会根据对象的实际类型来调用相应的函数.如果对象类型是派生类,就调用派生类的函数:如果对象类型是基类 ...

  7. BZOJ.3551.[ONTAK2010]Peaks加强版(Kruskal重构树 主席树)

    题目链接 \(Description\) 有n个座山,其高度为hi.有m条带权双向边连接某些山.多次询问,每次询问从v出发 只经过边权<=x的边 所能到达的山中,第K高的是多少. 强制在线. \ ...

  8. python基础一 ------如何对元组各个元素进行命名

    对元组各个元素进行命名 1,通过对元组索引值的命名 2,通过标准库中的collections.nametuple替代内置touple 通过对元组索引值的命名 好比在c中的defined详细见代码 na ...

  9. java反射机制基础

    java反射机制: JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意方法和 属性:这种动态获取信息以及动态调用对象方法的功能称为j ...

  10. nodejs koa2 框架中,mongoose update一条数据

    没有去看update和findOneAndUpdate的区别了,困扰了一晚上的问题,查了下官网,改成这样就好了 await model.user.findOneAndUpdate({ openIds: ...