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. JAVA首次课堂测试总结

    暑期生活已经结束,新的学期也已经开始,而暑期放假之前约定的JAVA首次课堂测试也如期的到来,本次测试真的可以学到和多东西,也有很多感想. 首先体会最深的就是系主任所说的软件工程不是那么好学的,真的需要 ...

  2. Codeforces 862D. Mahmoud and Ehab and the binary string 【二分】(交互)

    <题目链接> 题目大意: 有一个长度为n(n<1000)的01串,该串中至少有一个0和一个1,现在由你构造出一些01串,进行询问,然后系统会给出你构造的串与原串的   Hamming ...

  3. 从小白到区块链工程师:第一阶段:Go语言的HelloWorld初始(2)

    四.写下第一段Go语言代码“Hello World” 小建议:就是文件夹路径或者文件名称不要出现中文,可能会导致一些不必要的麻烦(编译失败) 在sublime中,我们在src文件夹上面,单击右键“Ne ...

  4. 浅谈云计算SPI(SaaS、PaaS、IaaS)

    The other day, I arrived at the SAP LABS CHINA for interview with my pleasure. That gave me a chance ...

  5. switch反汇编

    以下总结为debug模式

  6. visual studio 加入zen-codding

    大家都知道zen codding的强大之处大家都知道了,那如何让visual studio也支持呢,直接下载插件安装即可: 插件下载地址:zen-codding for visual studio下载 ...

  7. 有关python 函数参数

    # def foo(x):# print(x)### foo(1)# foo('a')# foo({'a':2}) #形参与实参:# def foo(x,y): #x=1,y=2# return x+ ...

  8. 潭州课堂25班:Ph201805201 django框架 第二课 url,,include,kwargs,name的使用 (课堂笔记)

    url 路由配置 这里的 name 由用户输入,得到参数 /<>/是获取用户输入值 这里的 name 默认接收的是 str 如果要接收 int 时: 当输入参数非数字时提示错误 最常用是 ...

  9. [CF961E] Tufurama

    Description: 有一天Polycarp决定重看他最喜爱的电视剧<Tufurama>.当他搜索"在线全高清免费观看Tufurama第3季第7集"却只得到第7季第 ...

  10. PhotoshopCC 2017安装破解 + cuterman

    之前安装了PhotoshopCC 2017版本的软件,但是绿色版的(安装简介.使用方便).但是在随着Adobe公司对设计的不断追求和工具的不断更新,更加强大.更加优秀的设计插件和工具不断出新,最近朋友 ...