Выбор полигонов OpenLayers 3

Question

Как вы можете выбрать объекты с помощью многоугольной ничьей? Это можно сделать с помощью квадратного квадрата, выбранного в соответствии с примерами.

Мне интересно, есть ли способ инициировать событие после создания многоугольника, чтобы пойти и проверить пересечения с ним и другими функциями. В моем случае я пытаюсь захватить данные.

Возможно ли это в открытых слоях 3?

Answer 1

Для таких действий вам необходимо использовать либо библиотеку топологии JSTS, либо TURF.js lib. По моему личному мнению JSTS - это гораздо более полное и элегантное решение. Получите информацию here. На данный момент автор вносит изменения и собирается опубликовать официальную версию, совместимую с ol3, поэтому сообщайте об этом.

Я приведу пример, используя старую версию JSTS, которая выполняет эту работу. (проверьте внешние источники предоставленной скрипты, чтобы проверить файлы JSTS lib, которые необходимо загрузить). Если у вас есть время, проверьте, есть ли новые ссылки для последней версии 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); 
};