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. Scala-Unit7-Scala并发编程模型AKKA

    一.Akka简介 Akka时spark的底层通信框架,Hadoop的底层通信框架时rpc. 并发的程序编写很难,但是Akka解决了spark的这个问题. Akka构建在JVM平台上,是一种高并发.分布 ...

  2. ZOJ 1610 Count the Colors 【线段树】

    <题目链接> 题目大意: 在[0,8000]这个区间内,不断进行一些操作,将其中的一些区间染成特定颜色,如果区间重复的话,后面染的色块会覆盖前面染的色块,问最终[0,8000]这个区间内每 ...

  3. Spring AOP 源码分析 - 拦截器链的执行过程

    1.简介 本篇文章是 AOP 源码分析系列文章的最后一篇文章,在前面的两篇文章中,我分别介绍了 Spring AOP 是如何为目标 bean 筛选合适的通知器,以及如何创建代理对象的过程.现在我们的得 ...

  4. 大数据小白系列——HDFS(1)

    [注1:结尾有大福利!] [注2:想写一个大数据小白系列,介绍大数据生态系统中的主要成员,理解其原理,明白其用途,万一有用呢,对不对.] 大数据是什么?抛开那些高大上但笼统的说法,其实大数据说的是两件 ...

  5. XML相关的安全漏洞-XXE,XPATH小结

    0x00前言: 本文主要小结以下php下的xpath查询xml结构的漏洞利用和XXE漏洞利用 xml是可扩展标记语言,它被设计出来是为了存储传输数据的. 它的结构是树形结构,并且标签要成对出现比如下面 ...

  6. 数字进度条组件NumberProgressBar

     数字进度条组件NumberProgressBar NumberProgressBar是一款数字进度条组件.它不仅可以通过进度条的变化展现进度,还可以通过跟随文字精确表示进度值.开发者可以对进度条进行 ...

  7. vue注册和简单使用

      组件的出现就是为了解决页面布局等等一些列的问题. vue中的组件分为两种,全局组件和局部组件. 一  . 注册全局组件 通过Vue.component()创建一个全局组件之后,我们可以在一个通过  ...

  8. CactiEZ安装与配置-监控网卡流量

    1.1. 环境 本例CactiEZ-10.1-x86_64.iso下载地址 https://pan.baidu.com/s/1vivDJqpgtoBXRLm2D-bBTQ 密码:u12l 测试环境 服 ...

  9. Ue4管线中的灯光信息

    http://www.tomlooman.com/disneyfaciliershadow/ 看了这篇Blog我有了一个惊喜的发现: float4 GetPerPixelLightAttenuatio ...

  10. Scrapy基础(十)———同步机制将Item中的数据写在Mysql

      前面讲解到将Item中的所有字段都已经填写完成,那么接下来就是将他们存储到mysql数据库中,那就用到了pipeline项目管道了:  对项目管道的理解:做一个比喻,爬取好比是开采石油,Item装 ...