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. CodeForces 1117C Magic Ship (循环节+二分答案)

    <题目链接> 题目大意: 给定起点和终点,某艘船想从起点走到终点,但是海面上会周期性的刮风,船在任何时候都能够向四个方向走,或者选择不走,船的真正行走路线是船的行走和风的走向叠加的,求船从 ...

  2. python查看对象用法

    python查看类用法: dir(object_name)

  3. asp.net core 上使用redis探索(3)--redis示例demo

    由于是基于.net-core平台,所以,我们最好是基于IDistributedCache接口来实现.ASP.NET-CORE下的官方redis客户端实现是基于StackExchange的.但是官方提供 ...

  4. 【C#】用委托(Delegate)的BeginInvoke和EndInvoke方法操作线程

    让我们首先了解下什么时候用到C#异步调用: .NET Framework 允许您C#异步调用任何方法.定义与您需要调用的方法具有相同签名的委托:公共语言运行库将自动为该委托定义具有适当签名的Begin ...

  5. SpringBoot集成阿里巴巴Druid监控

    druid是阿里巴巴开源的数据库连接池,提供了优秀的对数据库操作的监控功能,本文要讲解一下springboot项目怎么集成druid. 本文在基于jpa的项目下开发,首先在pom文件中额外加入drui ...

  6. Xamarin Essentials教程使用加速度传感器Accelerometer

    Xamarin Essentials教程使用加速度传感器Accelerometer   加速度传感器是一种能够测量加速度的传感器,用于检测设备状态的改变.在Xamarin中,如果开发者想要使用加速度传 ...

  7. VMware5.5-添加数据中心,集群及主机

    首先介绍下硬盘的三种设置格式,这个要搞清楚 虚机硬盘的三种格式 厚置备延迟置零 厚置备,分配10g空间,虚拟机没开机时就分配了: 延迟置零,没开机之前只分配空间,里面的数据不抹零,当开机写入数据时再抹 ...

  8. BZOJ.3811.玛里苟斯(线性基)

    BZOJ UOJ 感觉网上大部分题解对我这种数学基础差的人来说十分不友好...(虽然理解后也觉得没有那么难) 结合两篇写的比较好的详细写一写.如果有错要指出啊QAQ https://blog.csdn ...

  9. VS2013配置OPENCV2.4.9

    转载自->这里 设置opencv SDK解压目录,点击Extract后解压 我是习惯于解压到这个位置的. 解压过程如上图. 2.         文件目录介绍 解压后会在目录下生成opencv的 ...

  10. BZOJ3655 : 神经错乱数

    注意到前3个操作都不会影响每列的情况,而第4个操作必然会将行列交换,故只要每行的和相同即可满足条件. 考虑数位DP,设$f[i][j][k][t]$表示考虑最高的$i$位,第一行的和是$j$,当前行的 ...