Vue+OpenLayers7入门到实战：OpenLayers7地图整合到Vue项目中的两种方式

返回《Vue+OpenLayers7》专栏目录：Vue+OpenLayers7入门到实战

本章讲解如何把OpenLayers7.x版本的地图整合到Vue项目中，Vue2.x和Vue3.x都适用。

一、前言

OpenLayers本身已经是支持模块化，所以引入vue项目很简单。
在vue中使用OpenLayers，最简单的是混合方式。直接在vue项目中和前端代码混在一起写，适合业务简单的项目。
另一种是与前端代码分离的方式，前端写前端的代码。GIS写GIS的代码，各写各的，互不影响。最后前端以模块化的方式使用地图功能代码，这样可以实现gis地图功能代码复用，引入其他地方也可以复用。

二、如何引入OpenLayers到Vue项目

如果对Vue不太熟悉的同学可以参考《Vue+OpenLayers7，快速搭建Vue+OpenLayers7地图脚手架项目。从零开始构建Vue项目并整合OpenLayers7.5.2》，方便快速上手vue项目搭建。