Openlayers 3 selection by polygon draw взаимодействие

Я пытаюсь изменить пример выбора окна Openlayers 3 here, поэтому я могу нарисовать многоугольник на карте, чтобы выбрать функции.Openlayers 3 selection by polygon draw взаимодействие

Ниже мой код. Я добавил источник вектора, который будет содержать многоугольник, изменил взаимодействие с «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

Вы не сказали, чего вы пытаетесь достичь. –

Я хочу выделить объекты, рисуя на карте многоугольник, который выбирает все объекты, которые пересекают этот многоугольник, тогда имена функций должны быть заполнены в div с помощью идентификатора «info». – Chris

это возможно дубликат. проверьте его here

Для такого действия вам необходимо использовать JSTS lib. Проверьте ссылку выше, у нее есть скрипка, чтобы увидеть ее в действии.

источник

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

Спасибо за ваш ответ Джонатас. К сожалению, похоже, что это не сработало - я верю, что получаю степень ok из своего полигона с source.getExtent(); поскольку координаты отображаются в консоли, кажется, что это проблема с forEachFeatureIntersectingExtent, поскольку она не может добавить имя в массив. – Chris

'source.getExtent()' не так, как вы ищите. Вы хотите проверить функции внутри полигона, не так ли? –

Ах да, это правильно - мое мышление, однако, состоит в том, что будет только одна функция, связанная с источником за раз, так что было бы нормально получить размер полигона? Хотя это просто вернет прямоугольную грань, т. Е. Ограничительная рамка для полигона не будет? Извините, просто пытаясь научиться и понять :) – Chris

Openlayers 3 selection by polygon draw взаимодействие

ответ

Смежные вопросы