您现在的位置是:首页 > 前端会客厅 > 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

很赞哦! ()

上一篇:返回列表

下一篇:标签页

文章评论