【vue-openlayers】Hello Openlayers

微信订阅号：Rabbit_svip

Openlayers 是一个模块化、高性能并且功能丰富的WebGIS客户端的JavaScript包，用于显示地图及空间数据，并与之进行交互，具有灵活的扩展机制。

简单来说，使用 Openlayers（后面简称ol） 可以很灵活自由的做出各种地图和空间数据的展示。而且这个框架是完全免费和开源的。

通过CDN引入和通过vue-cli的使用方式是有所不同的。

萌新刚接触 ol 会被很多新概念吓到，跟着敲慢慢就会学得懂。

---

首先通过vue脚手架初始化项目

vue create vue-ol

安装 Openlayers

cd vue-ol

npm install ol --save

先看效果（这是OSM底图的效果，实际开发中千万不能使用OSM）

微信订阅号：Rabbit_svip

这个效果图里展示了一个地图，并且中心点是深圳市。

这里省略了所有样式，只解释逻辑部分。

HTML部分

需要有一个元素作为地图容器，通常习惯使用 div 元素。

并且该元素需要有一个id属性，通过id属性，js就能绑定这个元素。

JS 部分

JS 部分的使用其实不难，通过 Map 实例出一个地图，但这是还什么都没有。

通过 target 选中页面上的目标元素。

layers 是图层的意思。layers 是一个数组，其实和ps原理一样，可以通过多个图层来渲染出最终效果。这个例子里只有一个图层（即使只有一个图层也需要放在数组里），通过 Tile 拿到底图数据源 OSM。

之后通过view，把地图的投影坐标系、地图中心点、地图初始缩放级别、地图最小缩放级别都规定好。

所以在Map里，必须有target、layers、view这三项。一个基础的地图就出来里。

---

最后需要提醒：实际开发中千万不能使用OSM。

点击获取本例源码（可关注码云长期更新）