您现在的位置是:首页 > 前端会客厅 > GIS知识GIS知识
openlayers关于pupop弹框
YU到边2021-01-20【GIS知识】人已围观
简介openlayers在vue框架中点击wfs弹框(pupop),判断图层是否聚合
直接上代码(vue组件):
<template>
<!--pupop弹框-->
<div class="ol-popup" id="popup">
<!--关闭弹框-->
<a class="ol-popup-closer" href="#" id="popup-closer"></a>
<div class="popup-header">数据表名称</div>
<div id="popup-content" v-for="(init, index) in list" v-if="index === indexs">
<div class="content-list" v-for="(item, index) in init.values_" v-if="index != 'geometry'">
<div class="liet-title">{{index}}</div>
<div class="list-const">{{item}}</div>
</div>
</div>
<!--页脚-->
<div class="popup-footer">
<div @click="locations" class="clickfooter">缩放至图层</div>
<div class="paging">
<!--后退-->
<div @click="reduce" class="paging-left"></div>
<div class="paging-cont">{{indexs + 1}}/{{text}}</div>
<!--前进-->
<div @click="plus" class="paging-right"></div>
</div>
</div>
</div>
</template>
<script>
import store from "@/store"
import Overlay from 'ol/Overlay';
import {Select} from 'ol/interaction';
import {Stroke, Style, Fill, Circle} from 'ol/style';
export default {
name: "popup",
data() {
return {
map: null,
text: 0,
list: [],
indexs: 0,
overlay: null,
closer: null
}
},
mounted() {
let _this = this;
setTimeout(() => {
/*store.state.cloudmap.EasyMap.map (map放到vuex中)*/
_this.map = store.state.cloudmap.EasyMap.map;
_this.auto();
}, 50)
},
methods: {
// 前进
plus() {
this.indexs++;
if (this.indexs + 1 > this.text) {
this.indexs = this.text - 1;
}
},
// 后退
reduce() {
this.indexs--;
if (this.indexs < 0) {
this.indexs = 0;
}
},
/*缩放至图层*/
locations() {
let _this = this;
/*获取图层数据的区域坐标*/
let bbox = this.list[this.indexs].geometryChangeKey_.target.extent_;
/*跳转到制定区域*/
store.state.cloudmap.EasyMap.view.fit(bbox);
/*关闭弹框*/
_this.closer.onclick = function () {
_this.overlay.setPosition(undefined);
_this.closer.blur();
return false;
};
},
auto() {
let _this = this;
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
_this.closer = document.getElementById('popup-closer');
/*关闭弹框*/
_this.closer.onclick = function () {
_this.overlay.setPosition(undefined);
_this.closer.blur();
return false;
};
_this.overlay = new Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250,
},
});
_this.map.addOverlay(_this.overlay);
_this.map.on('click', function (evt) {
var coordinate = evt.coordinate;
/*判断当前单击处是否有要素,捕获到要素时弹出popup*/
var feature = _this.map.forEachFeatureAtPixel(evt.pixel, function (feature, layerVetor) {
return feature;
});
//捕捉到要素
if (feature) {
_this.indexs = 0;
//聚合情况下
if (feature.getProperties().features) {
_this.list = feature.getProperties().features;
_this.text = feature.getProperties().features.length;
_this.overlay.setPosition(coordinate);
} else {
// 非聚合
_this.init(coordinate);
}
} else {
console.log('无数据!')
}
})
// 鼠标滑过变成小手
_this.map.on('pointermove', function (e) {
var pixel = _this.map.getEventPixel(e.originalEvent);
var hit = _this.map.hasFeatureAtPixel(pixel);
_this.map.getTargetElement().style.cursor = hit ? 'pointer' : '';
})
},
// 不聚合重叠
init(coordinate) {
let _this = this;
_this.overlay.setPosition(coordinate);
this.select = new Select({
multi: true,
style: new Style({
image: new Circle({
radius: 5,
stroke: new Stroke({
color: '#00FF00',
width: 3,
}),
fill: new Fill({
color: '#00FF00',
}),
})
})
});
_this.map.addInteraction(this.select);
this.select.on('select', function (feature) {
_this.list = feature.selected;
_this.text = feature.selected.length;
})
},
}
}
</script>
<style lang="less" scoped>
.ol-popup {
position: absolute;
background-color: white;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 260px;
}
.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: white;
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: 10px;
right: 15px;
}
a {
color: #fff;
}
.ol-popup-closer:after {
content: "✖";
}
#popup-content {
width: 100%;
height: 2.51rem;
background-color: #fff;
overflow-y: auto;
padding: 15px;
.content-list {
margin-top: 10px;
.liet-title {
color: #262E3B;
font-size: .16rem;
}
.list-const {
margin-top: 5px;
font-size: .12rem;
color: #576273;
}
}
}
.content-list:nth-child(1) {
margin-top: 0 !important;
}
.popup-header {
width: 100%;
height: .44rem;
line-height: .44rem;
background-color: #262E3B;
color: #fff;
text-indent: .18rem;
}
.popup-footer {
width: 100%;
height: .3rem;
.clickfooter {
width: .9rem;
height: .2rem;
font-size: .13rem;
cursor: pointer;
border-radius: 3px;
text-align: center;
line-height: .2rem;
float: left;
margin-top: .05rem;
}
.paging {
width: .8rem;
height: .2rem;
float: right;
margin-top: .05rem;
line-height: .2rem;
justify-content: space-between;
display: flex;
align-items: center;
.paging-left {
width: .15rem;
height: 100%;
cursor: pointer;
background: url("../../assets/iconfont/左.png");
background-size: 100% 100%;
}
.paging-cont {
width: .4rem;
height: 100%;
text-align: center;
}
.paging-right {
width: .15rem;
height: 100%;
cursor: pointer;
background: url("../../assets/iconfont/右.png");
background-size: 100% 100%;
}
}
}
</style>
Tags:openlayers vue pupop
很赞哦! ()