openlayer 数据集查询

searchRestMap(){
            this.clickEvent = this.map.on("singleclick", evt => {
               let otherArr = ["SmID", "SmUserID", "SmArea", "SmPerimeter","SmGeometry"]
               for(let key in _layerDataset){
                    let datasetNames = [`ylh_新三线（20200727）:${_layerDataset[key]}`];
                    let geoParam = new SuperMap.GetFeaturesByGeometryParameters({
                        toIndex: -1,
                        dataSourceName: 'ylh_新三线（20200727）',
                        spatialQueryMode: SuperMap.SpatialQueryMode.INTERSECT,
                        datasetNames: datasetNames,
                        geometry: new ol.geom.Point(evt.coordinate)
                    });
                    new ol.supermap.FeatureService("http://220.165.249.18:8090/iserver/services/data-ylh/rest/data").getFeaturesByGeometry(geoParam, res => {
                        if(res.result && res.result.featureCount > 0){
                            let container = document.getElementById('popup');
                            let content = document.getElementById('popup-content');
                            let overlay = new ol.Overlay(({
                                element: container,
                                autoPan: true,
                                autoPanAnimation: {
                                    duration: 250
                                }
                            }));
                            let feature = res.result.features.features;
                            let innerHTML = '';
                            // let otherArr = ["SmID", "SmUserID", "SmArea", "SmPerimeter","SmGeometry"]
                            for(let i=0; i<feature.length; i++) {
                                let prop = feature[i].properties;
                                for(let j in prop) {
                                    if(!otherArr.includes(this.dataFieldName[j]))
                                    innerHTML += `${this.dataFieldName[j]}：${prop[j]}<br>`;
                                }
                            }
                            content.innerHTML = innerHTML;
                            overlay.setPosition([evt.coordinate[0], evt.coordinate[1]]);
                            this.map.addOverlay(overlay);
                            this.showOverlay = true;
                        }
                    });
               }

            })
            
            this.moveEvent =  this.map.on("pointermove", e => {
                let pixel = this.map.getEventPixel(e.originalEvent);
                let feature = this.map.forEachFeatureAtPixel(pixel, feature => {
                    return feature;
                }); //判断当前单击处是否有要素，捕获到要素时弹出popup

                if (feature) {
                   this.map.getTargetElement().style.cursor = "pointer";
                } else if(this.clickSearch) {
                   this.map.getTargetElement().style.cursor = "crosshair";
                } else {
                   this.map.getTargetElement().style.cursor = "default";
                }
            });
        },

        
        getName(){
            this.layerDataset = _layerDataset
            for(let item in this.layerDataset) {
                    let url = "http://220.165.249.18:8090/iserver/services/data-ylh/rest/data/datasources/ylh_新三线（20200727）/datasets/" + this.layerDataset[item] + "/fields.json?returnAll=true";
                    webserviceGet(url).then(res => {
                        if (res.length > 0) {
                            for (let j = 0; j < res.length; j++) {
                            this.dataFieldName[res[j].name.toUpperCase()] = res[j].caption;
                            
                            }
                        }
                    });
            }
        },

 <div v-show="showOverlay" id="popup" class="ol-popup">
            <el-button class="func-btn" icon="el-icon-close" @click="showOverlay = false"></el-button>
            <div id="popup-content"></div>
        </div>

 

// 弹窗
    .ol-popup {
        position: absolute;
        background-color: rgba(2,20,72,0.85);
        -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;
        color: #fff;
        bottom: 12px;
        left: -50px;
        min-width: 3rem;
        font-size: .14rem;
        z-index: 1000;
        .func-btn {
            @include top-btn-right;
        }
        .func-btn:hover {
            background-color: #e9f3fc;
            color: $--theme-color;
            transform: rotate(180deg) scale(1);
        }
    }

    .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: rgba(2,20,72,0.85);
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
    }

    .ol-popup:before {
        border-top-color: rgba(2,20,72,0.85);
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
    }