OpenLayers 3根據屬性選擇並高亮feature


OpenLayers 3 版本:OpenLayers v4.3.2

想通過屬性查詢feature,但是在ol3中並沒有發現類似ol2中的getFeatureByAttribute()....

自己寫函數實現,實現方法如下:

var layer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features:ol.Feature,
            url: './resources/data/test.geojson',
            format: new ol.format.GeoJSON()
        }),
        style:polygonStyle
    });
    map.addLayer(layer);
function selectByAttribute(){
    var features = layer.getSource().getFeatures();
    //console.log(features);
    var value = '115街坊';
    var property = 'name';
var selectedByAttriFeature;//實際應用中設置成全局變量
for (var i = 0, ii = features.length; i < ii; i++) { if (features[i].get(property) === value) { selectedByAttriFeature = features[i]; break; } } selectedByAttriFeature.setStyle(featureSelectStyle);//高亮查詢到的feature //console.log(selectedByAttriFeature.getGeometry().A);//后台輸出發現,geometry屬性中有一個屬性A其實是中心點坐標,但是沒有提供獲取中心點的方法,.getGeometry().A也可獲得中心點 //console.log(getCenterOfExtent(selectedByAttriFeature.getGeometry().getExtent()));//結果同上 var my_view = new ol.View({ center: getCenterOfExtent(selectedByAttriFeature.getGeometry().getExtent()), zoom: 14 }); map.setView(my_view); }

獲得feature的中心點坐標:【偶然發現ol3有方法獲得中心點坐標:ol.extent.getCenter(selectedFeature.getGeometry().getExtent())

function getCenterOfExtent(Extent){
    var X = Extent[0] + (Extent[2]-Extent[0])/2;
    var Y = Extent[1] + (Extent[3]-Extent[1])/2;
    return [X, Y];
}

清除已經選擇的高亮feature:

function clearSelectByAttribute(){
    if(selectedByAttriFeature != null){
        selectedByAttriFeature.setStyle(null);
        selectedByAttriFeature = null;
    }
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM