webgl之岛洞数据查询

一、问题描述

在日常的地图中，常常出现如下图的岛洞多边形的面数据，而当我们使用webgl对面数据进行查询的时候，会发现，完整的面数据可以进行查询以及绘制，

图1-完整面对象

但是当选择的面对象是岛洞多边形时，则会出现以下情况

图2-岛洞面对象

出现上面问题的主要原因是supermap-iserver的数据服务中查询到的点数据中除了面对象的边界节点数据还有岛洞的节点数据

二、解决方案

       经过查询发现，在对iserver的数据服务进行查询的过程中所获得的结果数据中有如下对象：

图3-面对象查询结果

 

    除了我们需要的points点数据外，还有两个参数：partTopo和parts；经过在iserver文档的查询（http://support.supermap.com.cn/DataWarehouse/WebDocHelp/iServer/index.htm)得到以下结果：

图4-查询结果参数说明

     从图中可见，partTopo表示的是part的拓扑结构，1代表岛，-1代表洞；所对应的part即相应的子对象所包含的节点个数。那么通过以上参数，我们可以通过partTopo识别岛洞之后，在使用part参数对节点数据points进行分组，如：以图3为例，通过partTopo和part参数，可确定points中前108点对象是岛的节点，108至108+6为一个洞对象的节点，（108+6）至（（108+6）+23）对象为另一个洞对象的节点；得到以上结论后，即可在webgl中构建实体来对选中对象做一个选中显示。具体实现代码如下：

                    let feature = originResult.features[0];
					
                    let point3ds = [];//岛数据节点
					let pointholes = [];//洞数据节点
					var partTopoInfor = [];//part和partTopo的链接信息
					var partTopo = feature.geometry.partTopo;
					var parts = feature.geometry.parts
					console.log(feature.geometry);
					if(partTopo.length>1){
						for(var i=0;i<partTopo.length;i++){
							partTopoInfor.push({partTopoValue:partTopo[i],partsValue:parts[i]});//链接part和partTopo
						}
					}
					var j = 0;
//将points中的对象进行岛和洞的分类
					for(let i = 0;i<partTopoInfor.length;i++){
						
						console.log("partTopoValue",partTopoInfor[i].partTopoValue)
						if(partTopoInfor[i].partTopoValue === 1){
							for(j;j<partTopoInfor[i].partsValue;j++){
								point3ds.push(feature.geometry.points[j].x,feature.geometry.points[j].y);
							}
						}else{
							// console.log("j",j)
							var holes = j;
							var pointholesi = [];
							for(j ; j < holes + partTopoInfor[i].partsValue ; j++){
								pointholesi.push(feature.geometry.points[j].x,feature.geometry.points[j].y);
							}
							pointholes.push(pointholesi);
						}
					}
                    console.log(`point3ds`, point3ds);
//在对points分类后进行显示绘制
					if(partTopo.length>1){

						viewer.entities.add({
						    polygon: {
						        hierarchy: {positions: Cesium.Cartesian3.fromDegreesArray(point3ds),
								holes:[{positions: Cesium.Cartesian3.fromDegreesArray(pointholes[0])},{positions: Cesium.Cartesian3.fromDegreesArray(pointholes[1])}],
								},
								material: new Cesium.Color(255 / 255, 0 / 255, 255 / 255, 0.6)
						    },
						    clampToGround: true
						});
						console.log("partTopo>1");
					}else{
						viewer.entities.add({
						    polygon: {
						        hierarchy: {positions: Cesium.Cartesian3.fromDegreesArray(point3ds)},
						        material: new Cesium.Color(255 / 255, 0 / 255, 255 / 255, 0.6)
						    },
						    clampToGround: true
						});
					}
                   
					layermap.show = false;

                }, failedResult => {
                    console.error("查询失败", failedResult);
                });
            });

        }

最终运行结果如下：

 

 

完整代码获取：链接：https://pan.baidu.com/s/1e62D5GTILE1AK745WHoDdQ 
提取码：c71n