如何高效封装并使用基于Vue的OpenLayer进行地图开发？

本文共计2576个文字，预计阅读时间需要11分钟。

目录+前言+基本结构+创建视图+创建底图+创建地图+初始化地图事件+初始化地图控件+初始化地图点击事件+openlayer是当前我们GIS常用的开源软件，其反馈机制特别出色。

目录

• 前言
• 基本结构
• _createView
• _createBaselayer
• _createMap
• _initMapEvt
• _initMapControl
• _initMapClickEvent()
• _initPointMoveEvent

openlayer是目前我们gis常用的一款开源的，并且反馈都特别好的软件了，像之前的ol3, 风靡一时，地图实现也很简单，很实用，目前vue中使用地图也是非常多的，那么如果在vue中引入openlayer并且实现地图撒点效果，甚至是更深层的地图聚合效果呢，本文来分享下OpenLayer基于vue的封装使用，感兴趣的朋友一起看看吧！

前言

公司项目使用了openlayer作为2d平面地图来使用，之前没有接触过，开一篇文章记录一下。顺便捋一下代码里面封装的结构。

基本结构

openlayer使用的版本是"^6.4.3"，引入了mapbox的样式，"ol-mapbox-style": "^8.2.0"。地图的初始化专门封装了一个class类，用于初始化地图使用。