ArcGIS API For JavaScript(3)之点击查询多个地图服务图层时实现infoWindow默认第一个展示最顶层服务数据的一种方法

场景还原:

客户的一个奇葩需求。

当多个服务数据在同位置上有重叠覆盖的情况时,希望第一个优先展示最顶层服务数据的属性信息。

当我们在地图上进行点选或者进行其他范围选择时,如果需要将当前地图上加载的所有地图服务都查询并使用InfoWindow进行展示时,infoWindow虽然可以通过数字显示总共查询到的要素个数,通过点击下一个可以切换,但由于查询的执行是异步的,默认是无法确保查询的第一个要素为最顶层服务的数据。

需要解决的问题:

可考虑在所有查询执行完毕后进行截获,重置InfoWindow中展示的第一个要素或者重置infoWindow中的所有查询要素。

本文只讲解重置InfoWindow中展示的第一个要素为最顶层要素。

这里有个问题是由于需要等待所有查询执行完毕后,才进行跳转,可能查询结果多时会出现延迟跳转。

以下通过infoWindow.deferreds来实现在展示前的预处理。

示例代码如下:

              	//判断当前是否有需要查询的图层
					var hasVisibleLayes=false;
					if(Object.keys(ConfigData.layers).length != 0){
						for(var item in ConfigData.layers){
							var layerInfos=ConfigData.layers[item].layerInfos;
							if (layerInfos != null && layerInfos.length > 0) {
                                let visibleLayers = ConfigData.layers[item].visibleLayers;
								if(visibleLayers.length>0){
									hasVisibleLayes=true;
									break;
								}
							}
						}
					}
				if(hasVisibleLayes){
						var features=[];
						//判断当前infoWindow是否有正在执行的查询    
          
         if(_layerControlObj._map.infoWindow&&_layerControlObj._map.infoWindow.deferreds){
								 //查找当前infowindow正在执行延迟查询的所有服务
								_layerControlObj._map.infoWindow.deferreds.forEach(s=>s.addCallbacks(function(response){
									//console.log(response);
									//features.push([...response]);

									if(response&&response.length>0){
										response.forEach(r=>features.push(r));
									}
						//如果所有查询执行完毕,进行数据合并	
		if(_layerControlObj._map.infoWindow.deferreds==null||_layerControlObj._map.infoWindow.deferreds.length==0){
										if(features.length>0){
                            //查询地图上加载的所有可见图层,用于确定最顶层图层是哪个?
											 let layers = _layerControlObj._map.getLayersVisibleAtScale(_layerControlObj._map.getScale());
											 var reverseLayers = [...layers];
											 reverseLayers.reverse();
											 var newFeatures = [];
											 if (reverseLayers && reverseLayers.length > 0) {
											 for (var i = 0; i < reverseLayers.length; i++) {
											 var list = features.filter(s => s._layer.id.indexOf(reverseLayers[i].id)>-1)
											 if (list && list.length > 0) {
											 newFeatures = [...list];
											 break;
											 }
											 }
											 }
											 if(newFeatures.length>0){
												 var index=features.findIndex(s=>s==newFeatures[0]);
												 _layerControlObj.isFirst=false;
												 //重新显示最顶层第一个要素
												 _layerControlObj._map.infoWindow.select(index);
											 }
											 else{
												 _layerControlObj.isFirst=false;
												 //重新显示第一个要素
												 _layerControlObj._map.infoWindow.select(0);
											 }
										
										}
										
									}
								}))
						}
						else{
							time = setInterval(lang.hitch(_layerControlObj, function () {
								 if(_layerControlObj._map.infoWindow&&_layerControlObj._map.infoWindow.deferreds){
									 clearTimeout(time);
									 //查找当前infowindow正在执行延迟查询的所有服务
								_layerControlObj._map.infoWindow.deferreds.forEach(s=>s.addCallbacks(function(response){
									//console.log(response);
									//features.push([...response]);
									if(response&&response.length>0){
										response.forEach(r=>features.push(r));
									}
									if(_layerControlObj._map.infoWindow.deferreds==null||_layerControlObj._map.infoWindow.deferreds.length==0){
										if(features.length>0){
											 let layers = _layerControlObj._map.getLayersVisibleAtScale(_layerControlObj._map.getScale());
											 var reverseLayers = [...layers];
											 reverseLayers.reverse();
											 var newFeatures = [];
											 if (reverseLayers && reverseLayers.length > 0) {
											 for (var i = 0; i < reverseLayers.length; i++) {
											 var list = features.filter(s => s._layer.id.indexOf(reverseLayers[i].id)>-1)
											 if (list && list.length > 0) {
											 newFeatures = [...list];
											 break;
											 }
											 }
											 }
											  if(newFeatures.length>0){
												 var index=features.findIndex(s=>s==newFeatures[0]);
												 _layerControlObj.isFirst=false;
												 //重新显示最顶层第一个要素
												 _layerControlObj._map.infoWindow.select(index);
											 }
											 else{
												 _layerControlObj.isFirst=false;
												 //重新显示第一个要素
												 _layerControlObj._map.infoWindow.select(0);
											 }
										
										}
										
									}
								}))
								
							}
						 }),10)
						}
						
		     }

以上示例只是一种方式,不一定完美,或许有其他方式。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xizhjxust_GIS

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值