我目前正在开发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);
};
答案 0 :(得分：2)
提供的小提琴中有几个错误。
每次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);
};