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. POJ 2112 Optimal Milking (二分+最短路+最大流)

    <题目链接> 题目大意: 有K台挤奶机和C头奶牛,都被视为物体,这K+C个物体之间存在路径.给出一个 (K+C)x(K+C) 的矩阵A,A[i][j]表示物体i和物体j之间的距离,有些物体 ...

  2. PHP foreach 循环

    foreach (array_expression as $value)    statementforeach (array_expression as $key => $value)    ...

  3. Java并发编程（七）-- ThreadLocal

    提到ThreadLocal,有些Android或者Java程序员可能有所陌生,可能会提出种种问题,它是做什么的,是不是和线程有关,怎么使用呢?等等问题,本文将总结一下我对ThreadLocal的理解和 ...

  4. Java基础巩固——《Java核心技术基础·卷一：基础知识》

    阅读记录追踪:前言部分 阅读前先看:简介.目录和勘误! Java编程语言是一种多用途.并发的.基于类的.面向对象的编程语言:编译时通常包括将持续转化成机器无关的字节码表示.运行时活动包括加载和链接执行 ...

  5. Vue.js的初步使用

    1.声明式渲染 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  6. BZOJ3736 : [Pa2013]Karty

    显然只需要考虑与障碍点相邻的格子,通过旋转坐标系,可以只考虑障碍点在格子上方的情况. 悬线法求出每个点往上的最长延伸距离$x$,以及往左往右的延伸距离$y$. 那么当$r\geq x$时,$c$至多为 ...

  7. CDATA（不应由XML解析器进行解析的文本数据）、CDATA的使用场景

    1.1. CDATA: CDATA(Unparsed Character Data)指的是不应由XML解析器进行解析的文本数据. 因为XML解析器会将“<”(新元素的开始)和“&”(字符 ...

  8. 函数(二)：input、raw_input、lambda、repr、map、filter、reduce、eval、exec、range、xrange

    一.input()和raw_input(): input()支持用户输入数字或表达式,按类型存或存表达式的计算结果 raw_input():输入所有内容当成字符串存 二.lambda函数:匿名函数 l ...

  9. tfs2015 生成与发布 配置

    先来看一张微软官方的自动生成与发布架构图,以便了解很多概念间的关系 1.安装好TFS2015(可以参考TFS2010的安装过程,尤其是账号权限相关),我自己是从TFS2010一路升级上来的(TFS20 ...

  10. SharePoint 前端开发常用的对象之_spPageContextInfo

    前言 _spPageContextInfo对象,是SharePoint开发一个非常常用的对象,尤其是前端开发,可以非常方便的获取到一些和站点有关的信息. 完整对象如下图,需要什么属性,可以自己获取,然 ...