【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。 点击获取本例源码（可关注码云长期更新）

本文章由javascript技术分享原创和收集