多邊形選擇OpenLayers 3

Question

如何選擇具有多邊形繪製的特徵？可以根據示例選擇一個方框進行選擇。

我想知道是否有辦法在創建多邊形之後觸發事件，並檢查與它和其他功能的交集。在我的情況下，我試圖捕獲數據點。

var select = new ol.interaction.Select(); 
    map.addInteraction(select); 

    var selectedFeatures = select.getFeatures(); 

    // a DragBox interaction used to select features by drawing boxes 
    var dragBox = new ol.interaction.DragBox({ 
     condition: ol.events.condition.platformModifierKeyOnly 
    }); 

    map.addInteraction(dragBox); 

    var infoBox = document.getElementById('info'); 

    dragBox.on('boxend', function() { 
     // features that intersect the box are added to the collection of 
     // selected features, and their names are displayed in the "info" 
     // div 
     var info = []; 
     var extent = dragBox.getGeometry().getExtent(); 
     vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) { 
      selectedFeatures.push(feature); 
      info.push(feature.get('name')); 
     }); 
     if (info.length > 0) { 
      infoBox.innerHTML = info.join(', '); 
     } 
    }); 

    // clear selection when drawing a new box and when clicking on the map 
    dragBox.on('boxstart', function() { 
     selectedFeatures.clear(); 
     infoBox.innerHTML = ' '; 
    }); 
    map.on('click', function() { 
     selectedFeatures.clear(); 
     infoBox.innerHTML = ' '; 
    }); 

這是可能的開放層3？

Answer 1

對於此類操作，您需要使用JSTS拓撲庫或TURF.js庫。 以我個人的觀點來看，JSTS更加完整和elegand解決方案。獲取一些信息here。目前，作者正在做出改變，並即將發佈官方ol3兼容版本，以便隨時通知。

我會給你一個使用舊版JSTS的例子來完成這項工作。 （檢查提供的小提琴的外部來源以驗證您需要加載的JSTS庫文件）。如果您有時間檢查是否有最新JSTS​​版本的新鏈接，並告訴我們您是否有任何消息。

這裏是邏輯：

1. 創建3個矢量層。一個用於要查詢的圖層，一個用於放置自由手繪圖，另一個用於放置高光。

2. 創建繪畫交互並在其上附加「drawend」事件。

3. 使用JSTS查找與數字化幾何圖形相交的幾何圖形。

所以這裏是您的代碼和fiddle，讓您的生活更輕鬆。

var waterAreasVecSource = new ol.source.Vector({ 
    loader: function (extent) { 
     $.ajax('http://demo.opengeo.org/geoserver/wfs', { 
      type: 'GET', 
      data: { 
       service: 'WFS', 
       version: '1.1.0', 
       request: 'GetFeature', 
       typename: 'water_areas', 
       srsname: 'EPSG:3857', 
       bbox: extent.join(',') + ',EPSG:3857' 
      } 
     }).done(loadFeatures) 
      .fail(function() { 
     alert("fail loading layer!!!") 
     }); 
    }, 
    strategy: ol.loadingstrategy.bbox 
}); 

function loadFeatures(response) { 
    formatWFS = new ol.format.WFS(), 
    waterAreasVecSource.addFeatures(formatWFS.readFeatures(response)); 
} 

var waterAreasVector = new ol.layer.Vector({ 
    source: waterAreasVecSource, 
    style: new ol.style.Style({ 
     stroke: new ol.style.Stroke({ 
      color: 'rgba(0, 0, 255, 1.0)', 
      width: 2 
     }) 
    }) 
}); 
var raster = new ol.layer.Tile({ 
    source: new ol.source.OSM({}) 
}); 

var myDrawSource = new ol.source.Vector({wrapX: false}); 

var myDrawVector = new ol.layer.Vector({ 
    source: myDrawSource, 
    style: new ol.style.Style({ 
    fill: new ol.style.Fill({ 
     color: 'rgba(255, 255, 255, 0.5)' 
    }), 
    stroke: new ol.style.Stroke({ 
     color: '#ffcc33', 
     width: 2 
    }), 
    image: new ol.style.Circle({ 
     radius: 7, 
     fill: new ol.style.Fill({ 
     color: '#ffcc33' 
     }) 
    }) 
    }) 
}); 

var mySelectionsSource = new ol.source.Vector({wrapX: false}); 

var mySelectionsVector = new ol.layer.Vector({ 
    source: mySelectionsSource, 
    style: new ol.style.Style({ 
    fill: new ol.style.Fill({ 
     color: 'rgba(255, 0, 0, 0.5)' 
    }), 
    stroke: new ol.style.Stroke({ 
     color: 'rgba(255, 0, 0, 1)', 
     width: 2 
    }), 
    image: new ol.style.Circle({ 
     radius: 7, 
     fill: new ol.style.Fill({ 
     color: '#ffcc33' 
     }) 
    }) 
    }) 
}); 

var map = new ol.Map({ 
    layers: [raster, myDrawVector,waterAreasVector,mySelectionsVector], 
    target: 'map', 
    view: new ol.View({ 
    center: [-8908887.277395891, 5381918.072437216], 
    maxZoom: 19, 
    zoom: 12 
    }) 
}); 


var draw = new ol.interaction.Draw({ 
     source: myDrawSource, 
     type: "Polygon", 
    }); 

map.addInteraction(draw); 

draw.on('drawend',function(e){ 
myDrawSource.clear(); 
mySelectionsSource.clear(); 
var extent = e.feature.getGeometry().getExtent(); 
var geomA = e.feature.getGeometry(); 
waterAreasVecSource.forEachFeatureInExtent(extent,function(aa){ 
console.log("forEachFeatureInExtent",aa.getGeometry()); 
if (polyIntersectsPoly(geomA,aa.getGeometry()) === true){ 
mySelectionsSource.addFeature(aa); 
} 
}); 
}); 



/** 
* check whether the supplied polygons have any spatial interaction 
* @{ol.geometry.Polygon} polygeomA 
* @{ol.geometry.Polygon} polygeomB 
* @returns {Boolean} true||false 
*/ 
function polyIntersectsPoly(polygeomA, polygeomB) { 
var geomA = new jsts.io.GeoJSONReader().read(new ol.format.GeoJSON().writeFeatureObject(
     new ol.Feature({ 
      geometry: polygeomA 
     }) 
    ) 
    ).geometry; 
var geomB = new jsts.io.GeoJSONReader().read(new ol.format.GeoJSON().writeFeatureObject(
     new ol.Feature({ 
      geometry: polygeomB 
     }) 
    ) 
    ).geometry; 
return geomA.intersects(geomB); 
};