当ol.source.Cluster遇到map.forEachFeatureAtPixel时

一、知识储备
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要素")   
    }
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值