安装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必须要设置宽和高，不然不显示，亲身踩雷。

这个就是div盒子实例，切记要设置宽高

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

这个就是我们创建第一个地图实例所需要用到的一些实例

接下来直接上js正文

图中的注释部分已经很详细了，如果想了解更多可以去官网查看api了解更多的属性

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

图中的黑点和线，是我下一遍文章要说的添加点和绘制一条直线

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