Опция выбора многоугольника в Openlayers 3

Question

В настоящее время я работаю над инструментом выбора полигонов в Openlayers 3 и разрабатываю код, размещенный here.

В приведенном выше примере показан слой с возможностью поиска (в данном случае WFS) с момента загрузки приложения, но поскольку мой слой WFS содержит 80 000+ функций, которые мне нужно выполнить, я пытаюсь адаптировать их так, чтобы WFS слой отображается только после того, как пользователь завершит поиск многоугольника поиска, чтобы уменьшить время загрузки, и показаны только функции в ограничивающей рамке рисованного многоугольника.

Библиотека JSTS затем используется для пространственного пересечения между рисованным многоугольником пользователя и функциями WFS, добавленными к карте.

Код ниже работает нормально, так как он правильно отображает функции WFS в вытянутой области многоугольника, но не возвращает атрибуты (-и) функции в консоли.

Я пытаюсь работать, если это потому, что слой полностью не загружен, прежде чем мы попытаемся вернуть атрибуты функции? Нужно ли включать что-то, чтобы дождаться загрузки слоя до выполнения метода forEachFeatureInExtent?

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,mySelectionsVector], 
    target: 'map', 
    view: new ol.View({ 
    projection: bng, 
     resolutions: resolutions, 
     center: [501776, 167214], 
     zoom: 5 
    }) 
}); 

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

map.addInteraction(draw); 

draw.on('drawend',function(e){ 
myDrawSource.clear(); 
mySelectionsSource.clear(); 
var waterAreasVecSource = new ol.source.Vector({ 
     format: new ol.format.GeoJSON(), 
     url: function() { 
      var featuresExtent = e.feature.getGeometry().getExtent(); 
      return '../../geoserver/wfs?service=WFS&' + 
       'version=1.1.0&request=GetFeature&typename=waterfeature&' + 
       'outputFormat=application/json&srsname=EPSG:27700&' + 
       'bbox=' + featuresExtent.join(',') + ',EPSG:27700'; 
     }, 
     strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({ 
      maxZoom: 13 
     })) 
     }); 

var waterAreasVector = new ol.layer.Vector({ 
    source: waterAreasVecSource 
}); 

map.addLayer(waterAreasVector); 
var extent = e.feature.getGeometry().getExtent(); 
var geomA = e.feature.getGeometry(); 
waterAreasVecSource.forEachFeatureInExtent(extent,function(aa){ 
console.log("forEachFeatureInExtent",aa.get('name')); 
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); 
}; 

Answer 1

В представленной скрипке есть несколько ошибок. Добавление еще одного слоя каждый раз drawend Событие уволено неправильно. Вместо этого добавьте слой vactor при запуске, а затем добавьте/удалите на нем функции. вот рабочий код. и fiddle Проверьте консоль, чтобы просмотреть регистрацию атрибутов объектов.

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,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); 

//just clear featutes and add back those falling within drawn polygon 
//you need an ajax request and new ol.format.WFS to parse the feats 
draw.on('drawend',function(e){ 
var extent = e.feature.getGeometry().getExtent(); 
var geomA = e.feature.getGeometry(); 

myDrawSource.clear(); 
mySelectionsSource.clear(); 
$.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(function(resp){ 
     var formatWFS = new ol.format.WFS(); 
     var featuresInExtent = formatWFS.readFeatures(resp); 
     var featuresOnDrawPoly = new Array(); 
     for (var i=0;i<featuresInExtent.length;i++){  
     var geomB = featuresInExtent[i].getGeometry(); 
      if (polyIntersectsPoly(geomA,geomB)===true){ 
      featuresOnDrawPoly.push(featuresInExtent[i]) 
      } 
     } 
     mySelectionsSource.addFeatures(featuresOnDrawPoly); 
     //here you may iterate and get the attributes of those falling within the draw polygon 
     for (var z=0;z<featuresOnDrawPoly.length;z++){ 
     console.log("feature landuse is ======", featuresOnDrawPoly[z].get('landuse')); 
     } 
     }).fail(function() { 
     alert("fail loading layer!!!") 
     }); 

}) 





/** 
* 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); 
};