在Openlayers中根据属性搜索wms图层,如果找到则放大它

时间:2015-08-13 02:32:26

标签: javascript jquery openlayers geoserver wms

我正在使用Openlayers 2.14并使用WMS从GeoServer,我可以在点击getfeatureinfo事件并使用new OpenLayers.Control.WMSGetFeatureInfo时从图层中提取信息。有点像这样: enter image description here

function activateControls(layerName) {
     //get wms feature info start
     infoControls ={
         click: new OpenLayers.Control.WMSGetFeatureInfo({
             url: geoserver_url,
             title: 'Identify features by clicking',
             layers: [layerName],
             queryVisible: true,
             infoFormat:'application/vnd.ogc.gml',
             eventListeners: {
                 getfeatureinfo: function(event) {
                     //console.log(event);
                     //var obj = jQuery.parseJSON(event.text);
                     //console.log(event.text);
                     //remove pop-ups when selecting others
                     var pops = map.popups;
                     for (var a = 0; a < pops.length; a++) {
                         if (pops.length == 1) {
                             map.removePopup(map.popups[0]);
                         }
                     };
                     map.addPopup(new OpenLayers.Popup.FramedCloud(
                        "chicken",
                        map.getLonLatFromPixel(event.xy),
                        null,
                        GenPopText(event),
                        null,
                        true
                     ));
                 }
             }
         })
     };
    for (var i in infoControls) {
        infoControls[i].events.register("getfeatureinfo", this, showInfo);
        map.addControl(infoControls[i]);
    }
    infoControls.click.activate();
 }//end of get wms feature info

function showInfo(evt) {
    if (evt.features && evt.features.length) {
         highlightLayer.destroyFeatures();
         highlightLayer.addFeatures(evt.features);
         highlightLayer.redraw();
         //console.log(GenPopText(evt));
    } else {
        console.log(evt.text);
    }
}

function GenPopText(evt){
     var temstr= "<b><i>" + evt.features[0].gml.featureType + "</i></b><br/>";
     for(var key in evt.features[0].attributes){
        temstr += "<b><span class='text-capitalize'>" + key + "</span></b>:" + evt.features[0].attributes[key] + "<br/>";
     }
     return temstr
}

我为它创建了一个函数,因为我有几个WMS图层。

现在,正如问题所暗示的那样。我希望根据建筑物名称等属性搜索图层,并在找到时显示弹出窗口并放大。

这就是我想要实现它的方式:

 $("#table_brgy").on("click", "tbody tr", function (e) {
     e.preventDefault();
     var building_name = $(this).find("td").first().text();
     ....
     activateControls(layerName,building_name)
 });

像这样: enter image description here

单击表格行时,将在弹出窗口中显示匹配的建筑物信息。

我完成了我的研究,但似乎无法使其发挥作用: LINK 1

1 个答案:

答案 0 :(得分:1)

OGC WMS标准不支持基于属性的查询,它仅基于点(可能的操作here)支持它们。您需要的是WFS Service及其 GetFeature 操作。

示例代码:http://dev.openlayers.org/examples/wfs-states.html