vue集成openlayers加载geojson并实现点击弹窗教程

本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程，供大家参考，具体内容如下

第一步：安装vue-cli

cnpm install -g @vue/cli

第二步：新建一个项目

1.新建项目 （vue-openlayers为项目名）,并选择default模版

vue create vue-openlayers

2.安装openlayers

cnpm i -S ol

第三步：写业务代码

1.删除掉HelloWorld.vue 新建 olmap.vue组件

components/olmap.vue代码：

#map{height:100%;}

.ol-attribution,.ol-zoom { display: none;}


.ol-popup {
 position: absolute;
 background-color: #fff;
 -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
 filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
 padding: 15px;
 border-radius: 10px;
 border: 1px solid #cccccc;
 bottom: 12px;
 left: -50px;
 min-width: 280px;
}
.ol-popup:after,
.ol-popup:before {
 top: 100%;
 border: solid transparent;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
}
.ol-popup:after {
 border-top-color: #fff;
 border-width: 10px;
 left: 48px;
 margin-left: -10px;
}
.ol-popup:before {
 border-top-color: #cccccc;
 border-width: 11px;
 left: 48px;
 margin-left: -11px;
}
.ol-popup-closer {
 text-decoration: none;
 position: absolute;
 top: 2px;
 right: 8px;
}
.ol-popup-closer:after {
 content: "✖";
}

App.vue代码：

*{padding:0; margin:0;}
html,body{
 height: 100%;
}
#app {
 height: 100%;
}

2.运行

npm run serve

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