一、知识储备
1、vector layer的添加,请参考openlayers的vector-layer.html,
http://openlayers.org/en/latest/examples/vector-layer.html?q=vector
2、map.forEachFeatureAtPixel方法
3、cluster Feature,请参考openlayers的cluster.html,
http://openlayers.org/en/latest/examples/cluster.html?q=vector
二、问题:
不在聚合的图层下,捕捉地图上的要素
map.on("click", function(e) {
var pixel = map.getEventPixel(e.originalEvent);
var feature = map.forEachFeatureAtPixel(pixel,
function(feature, layer) {
return feature;
});
if(feature){
//捕捉到要素后,进行后续操作,如弹出要素信息
alert("该处有XX要素")
}
}
但是,在聚合的图层下,捕捉地图上的要素可能有多个,导致无法对单个要素进行后续操作
三、分析原因:
设置断点,对比两种情况下,feature的值
发现feature的结构不一样,主要在feature的属性values中多了features属性
因此,我们在聚合情况下,要获取feature.values.features的值,
在API中查找ol.Feature类,在v4.6.5版本中提供了getProperties()方法,
if(feature){
//捕捉到要素
if(feature.getProperties().features){
//聚合情况下
if(feature.getProperties().features.length==1){
//只有一个要素
var f=feature.getProperties().features[0]; //获取该要素
alert("该处有XX要素")
//后续操作,对单个要素操作
}else{
alert("该处有有多个要素");
//后续操作,对多个要素操作,如弹出列表等
}
}else{
//非聚合情况下
//捕捉到要素后,进行后续操作,如弹出要素信息
alert("该处有XX要素")
}
}