vue使用openlayers创建地图

vue项目中使用openlayers创建地图，供大家参考，具体内容如下

前期准备

• 安装node环境
• 安装cnpm
• 安装vue-cli

以上步骤网上都有很多教程

搭建vue项目

vue create vue-ol

按照提示一步步搭建vue项目

cd vue-ol
npm run serve

浏览器打开 http://localhost:8080/ 就可以看到初始化的vue项目页面

vue项目安装openlayers

cnpm i ol --s

main.js中引入ol.css

import 'ol/ol.css';

创建地图组件MapContainer.vue

在home.vue中引入地图组件

页面截图如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。