安装openlayers

今天和大家一起学习一下openlayers地图，我也是才开始学习openlayers，也是一个人在网上找一些博客以及在官网慢慢摸索。有不全面的希望大家可以留言指正。我也把我平时练习的项目也开源，等会附上网址。

gitee仓库：https://gitee.com/liujianqiu1/openlayers

openlayers官网：https://openlayers.org/

openlayers中文网：http://linwei.xyz/ol3-primer/ch01/index.html（这个我个人感觉写的不全）

接下来进入整体，本人使用的是vue2版本开发，vue安装我就不介绍了，下面我直接介绍安装openlayers这个地图依赖：npm install ol    安装好就可以了。

接下里就是开始使用openlayers

第一，第一点的是我们需要在.vue页面中写一个div放置地图，这里必须要说的是，div必须要设置宽和高，不然不显示，亲身踩雷。

接下来就可以写js代码实现第一个地图实例。第一第一个我们先要引入各种依赖，网上找了好多文章基本上都是直接上代码部分截图，很少有告知我们改引入哪些依赖，我找了半天才把该需要引入的依赖引入，创作不易，麻烦给点个赞。

接下来直接上js正文

okk，我这里使用的是国内比较多的高德地图，没有使用openlayers默认的OSM地图，如果有兴趣可以使用OSM地图，但是加载的话会比较慢。接下里我们运行项目就可以看到如图所示：

最后，今天就和大家一起学习新建一个地图实例，关于openlayers我会每天都会更新一点，最新的代码也会及时推送到gitee里面，欢迎大家可以一起进行开发哦。