Openlayers 3通過多邊形繪製交互選擇

我想修改Openlayers 3框選擇示例here，這樣我就可以在地圖上繪製一個多邊形來選擇要素。Openlayers 3通過多邊形繪製交互選擇

下面是我的代碼 - 我添加了一個將包含多邊形的矢量源，將交互從'DragBox'更改爲'繪製'，並更改了框方法以繪製方法。

我沒有在js控制檯中發現任何錯誤，所以我不太確定哪裏可能會出錯？這應該產生一個結果嗎？

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Box Selection</title> 
    <link rel="stylesheet" href="http://openlayers.org/en/v3.14.1/css/ol.css" type="text/css"> 
    <script src="http://openlayers.org/en/v3.14.1/build/ol.js"></script> 
    <style> 
     .ol-dragbox { 
     background-color: rgba(255,255,255,0.4); 
     border-color: rgba(100,150,0,1); 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map" class="map"></div> 
    <div id="info">No countries selected</div> 
    <script> 
     var vectorSource = new ol.source.Vector({ 
     url: 'countries.geojson', 
     format: new ol.format.GeoJSON() 
     }); 

     var source = new ol.source.Vector(); 

     var map = new ol.Map({ 
     layers: [ 
      new ol.layer.Tile({ 
      source: new ol.source.OSM() 
      }), 
      new ol.layer.Vector({ 
      source: vectorSource 
      }) 
     ], 
     renderer: 'canvas', 
     target: 'map', 
     view: new ol.View({ 
      center: [0, 0], 
      zoom: 2 
     }) 
     }); 

     // a normal select interaction to handle click 
     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.Draw({ 
     source: source, 
     type: 'Polygon' 
     }); 

     map.addInteraction(dragBox); 

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

     dragBox.on('drawend', 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 = source.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('drawstart', function() { 
     selectedFeatures.clear(); 
     infoBox.innerHTML = '&nbsp;'; 
     }); 
     map.on('click', function() { 
     selectedFeatures.clear(); 
     infoBox.innerHTML = '&nbsp;'; 
     }); 
    </script> 
    </body> 
</html>

來源

2016-03-02 Chris

你沒有說你想達到什麼。 –

我想通過在選擇與多邊形相交的所有要素的地圖上繪製多邊形來選擇要素，然後使用「信息」ID在要素中填充要素的名稱。 – Chris

這是可能的重複。檢查它here

對於這樣的行動，你需要使用JSTS庫。檢查上面的鏈接，它也有一個小提琴，看看它在行動

來源

2016-03-02 16:24:42 pavlos

謝謝你pavlos – Chris

UPDATE：

注ol.source.Vector#forEachFeatureInExtent和ol.source.Vector#forEachFeatureIntersectingExtent之間的差異。

http://jsfiddle.net/jonataswalker/sum62szv/

首先，獲得繪製多邊形的程度，然後用ol.source.Vector#forEachFeatureIntersectingExtent像檢查：

draw.on('drawend', function(evt){ 
    var polygon_extent = evt.feature.getGeometry().getExtent(); 
    vectorSource.forEachFeatureIntersectingExtent(polygon_extent, function(feature) { 
    selectedFeatures.push(feature); 
    info.push(feature.get('name')); 
    }); 

});

來源

2016-03-02 14:09:31

感謝您的回覆Jonatas。不幸的是，似乎沒有工作 - 我相信我正在檢索從我的多邊形與source.getExtent（）;當座標顯示在控制檯中時，看起來它必須是forEachFeatureIntersectingExtent的問題，因爲它無法將名稱添加到數組中。 – Chris

'source.getExtent（）'不是你正在尋找的範圍。你想檢查多邊形範圍內的特徵，不是嗎？ –

啊，是的，這是正確的 - 我的想法是，一次只有一個與源相關的特性，所以可以確定多邊形範圍？雖然這隻會返回矩形範圍，即多邊形的邊界框會不會？對不起，只是想學習和理解:) – Chris

Openlayers 3通過多邊形繪製交互選擇

回答

相關問題