OpenLayers3的WMS空间查询的自定义格式

来源：互联网发布：孟非与女嘉宾有染知乎编辑：程序博客网时间：2024/05/22 15:27

直接贴主要代码

    var container = document.getElementById('popup');    var content = document.getElementById('popup-content');    var closer = document.getElementById('popup-closer');//加载WMS数据源var wmsSource=new ol.source.TileWMS({  url:'http://demo.opengeo.org/geoserver/wms',          params:{'LAYERS':'ne:ne'},          serverType:'geoserver'      });  var wmsLayer=new ol.layer.Tile({          source:wmsSource      });  var view=new ol.View({          center:[0, 0],          zoom:1      });var map=new ol.Map({          layers:[wmsLayer],          target:'map',          view:view      });      var overlay = new ol.Overlay(({        element: container,        autoPan: true,        autoPanAnimation: {          duration: 250        }      }));    overlay.setMap(map);     //关闭弹窗      closer.onclick = function() {        overlay.setPosition(undefined);        closer.blur();        return false;      };//点击地图通过wms数据地图getGetFeatureInfoUrl获取详情map.on('singleclick',function(e){ //点击后清空table里的数据$("#details").html(""); //开始显示弹窗                 var hdms = ol.coordinate.toStringHDMS(ol.proj.transform( e.coordinate, 'EPSG:3857', 'EPSG:4326'));                 content.innerHTML = '<p>查询详情:</p><code>坐标：' + hdms +                 '</code>';                                 overlay.setPosition(e.coordinate);        document.getElementById('info').innerHTML='';          var viewResolution=view.getResolution();          var url=wmsSource.getGetFeatureInfoUrl(              e.coordinate,viewResolution,'EPSG:3857',              //{'INFO_FORMAT':'text/html'}  //这个返回的是一个html页面            {                'INFO_FORMAT': 'application/json',//返回jsonp                'FEATURE_COUNT': 1   //查询能返回的数量上限            }        );       //回调函数接收查询结果,设置解析            var geojsonFormat=new ol.format.GeoJSON({defaultDataProjection:"EPSG:3857"});        if(url){          //console.log(url);        //    document.getElementById('info').innerHTML='<iframe   seamless src="'+url+'"></iframe>';           $.ajax({           type: 'get',           url : url,           success : function(res){           debugger                           var features=geojsonFormat.readFeatures(res);//获取所有的要素                if(features.length){//如果要素个数为0的话，则是海洋                for(var key in features[0].H){                if(key == 'geometry'){                continue;                }                $("#details").append(                "<tr><td style='width: 110px'>"+key+": </td><td style='width: 50%'>"+features[0].H[key]+"</td> </tr> "                );                }                                }else {                $("#details").html(                "<tr><td style='width: 200px'>点击到大海了</td></tr>"                )}                                           },           error : function(){           alert('执行失败');           }           })                                                          }                })

附上其他

    <style>      .ol-popup {        position: absolute;        background-color: white;        -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: 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: 2px;        right: 8px;      }      .ol-popup-closer:after {        content: "✖";      }      #teble-content{      height: 110px;      width:304px;      overflow:auto;      }      #details tr{      border:1px solid black;      }          </style></head><body ><div id="map" style="width: 100%;height: 700px"></div><div id="info" style="width: 100%;height: 100px; "></div><div id="popup" class="ol-popup"><a href="#" id="popup-closer" class="ol-popup-closer"></a><div id="popup-content"></div><div id="teble-content"><table id="details" ></table></div></div>

自定义格式很简单的,就是请求json

1 0