首页/GIS/列表

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

来源:  2018-04-19 16:03:38    评论:0点击:

OpenLayers3的WMS空间查询的自定义格式
直接贴主要代码
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: 'https://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(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('执行失败');
            }
        })
 
    }
 
})

附上其他
    
.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;
}
 
    
<p id="map" style="width: 100%;height: 700px"></p>
<p id="info" style="width: 100%;height: 100px; "></p>
<p id="popup" class="ol-popup">
 <a href="#" id="popup-closer" class="ol-popup-closer"></a>
 <p id="popup-content"></p>
 <p id="teble-content">
  <table id="details">
  </table>
 </p>
</p>
为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权