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);
}

})
}