openlayer 鼠标点击获取一定范围内的要素信息

 

var yourlayer= new ol.layer.Image({
   source: new ol.source.ImageWMS({
   ratio: 1,

   url: 'http://192.168.0.164:5081/geoserver/pg/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
LAYERS: 'pg:power_line_750kv',
STYLES: '',
}
})
});
var yourlayer= new ol.layer.Tile({
visible: false,
source: new ol.source.TileWMS({
url: 'http://192.168.0.164:5081/geoserver/pg/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
tiled: true,
LAYERS: 'pg:power_line_750kv',
STYLES: '',
}
})
});



map.on('singleclick', function(evt) {
document.getElementById('nodelist').innerHTML = "Loading... please wait...";
var view = map.getView();
var viewResolution = view.getResolution();
var source = yourlayer.getSource() ;
var url = source.getGetFeatureInfoUrl(
evt.coordinate, viewResolution, view.getProjection(),
{'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 50});
if (url) {
$.ajax({
url: url,
success: function(data){
//console.info(data);
}
});

var coordinate = evt.coordinate;
var circleFeature = new ol.Feature({
geometry: new ol.geom.Circle(coordinate, 0.00005),
});
var polygon = new ol.geom.Polygon.fromCircle(new ol.geom.Circle(coordinate, 0.00005)); //圆转为多边形后才能进行分析
var offset = 10*viewResolution;
var polygon = new ol.geom.Polygon([[
[coordinate[0],coordinate[1]+offset],
[coordinate[0]+offset,coordinate[1]-offset],
[coordinate[0]-offset,coordinate[1]-offset],
[coordinate[0],coordinate[1]+offset]
]]);

getInfo(polygon);

var extent = polygon.getExtent(); // 拿到draw 框选的四至范围
var features1 = v.getSource().getFeaturesInExtent(extent); //先缩小feature的范围
if(features1.length>0){
console.info(features1);
console.info(features1[0].H);
}

var features = [];
vs.forEachFeatureIntersectingExtent (extent, feature => { // 用 ol 方法进行遍历
features.push(feature);
});
console.info(features);

document.getElementById('nodelist').innerHTML = '<iframe seamless src="' + url + '"></iframe>';
}
});

 

function getInfo(polygon){

var featureRequest = new ol.format.WFS().writeGetFeature({
srsName: 'EPSG:4326',//坐标系统
featureNS: 'pg',//命名空间 URI
featurePrefix: 'pg',//工作区名称
featureTypes: ['power_line_750kv'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
outputFormat: 'application/json',
//filter: ol.format.filter.intersects("geom",polygon.getGeometry())//前者是属性名，后者是对应值
filter: ol.format.filter.and(
ol.format.filter.equalTo('volt_lvl', '8'),
ol.format.filter.intersects("geom",polygon)
)
});

// url: 'http://192.168.0.164:5081/geoserver/pg/wms',
fetch('http://192.168.0.164:5081/geoserver/' + 'wfs', {//geoserver wfs地址如localhost:8080/geoserver/wfs，
method: 'POST',
body: new XMLSerializer().serializeToString(featureRequest)
}).then(function(response) {
console.info(response);
console.info(response.json);
return response.json();
}).then(function(json) {
console.info(json);
var features = new ol.format.GeoJSON().readFeatures(json); //查询到的要素
console.info(features);
var feature = json.features;
if(feature.length>0){
console.info(feature[0].properties);
}

})
}