WebGL之构建导洞多边形

nannan

岛洞多边形是一种复杂几何对象类型。SuperMap iDesktop中的定义是:在可编辑状态下,将两个或两个以上具有包含关系的面对象在重合区域进行处理(删除或者保留,面对象为偶数则重合部分将删除,为奇数则保留),最终形成一个岛洞多边形。如一个区域内有湖泊时,就会得到一个岛洞多边形。

WebGL之构建导洞多边形WebGL之构建导洞多边形
在SuperMap iDesktop中构建岛洞是在“对象操作”选项卡的“对象编辑”组的 Gallery 控件中,单击“岛洞多边形”按钮进行构建。那在WebGL里怎样构建导洞多边形呢?
废话不多说先看代码:

            var a = viewer.entities.add({
					description: '导洞多边形',
					name: '导洞多边形',
					polygon: {
						hierarchy: {
							positions: Cesium.Cartesian3.fromDegreesArray(
								[116.4525002702803, 39.91763593039303, 116.4524277756575, 39.91749472800861, 116.4526350747873, 39.91730490220515, 116.4528973931777, 39.91749703349371, 116.4525002702803, 39.91763593039303]
							),
							holes: [{
								positions: Cesium.Cartesian3.fromDegreesArray([116.4525625904002, 39.91752870087121, 116.4524818665896, 39.91748674886103, 116.4526511495461, 39.91742162253564, 116.4526801595935, 39.91746953411165, 116.4525625904002, 39.91752870087121]),
							}],
						},
						material: Cesium.Color.BLUE.withAlpha(0.5)
					}
				});
			viewer.flyTo(a);

由以上代码可知WebGL里构建岛洞多边形用entity对象里的polygon,与平常多边形构建不同的是多了holes参数,以上代码结果如下图所示:
WebGL之构建导洞多边形
如果构建多重岛洞,就在每个holes里叠加holes即可,代码如下:

				var bluePolygon = viewer.entities.add({
					name: 'Yellow polygon with holes',
					polygon: {
						hierarchy: {
							positions: Cesium.Cartesian3.fromDegreesArray([-99.0, 30.0, -85.0, 30.0, -85.0, 40.0, -99.0, 40.0]),
							holes: [{
								positions: Cesium.Cartesian3.fromDegreesArray([-97.0, 31.0, -97.0, 39.0, -87.0, 39.0, -87.0, 31.0]),
								holes: [{
									positions: Cesium.Cartesian3.fromDegreesArray([-95.0, 33.0, -89.0, 33.0, -89.0, 37.0, -95.0, 37.0]),
									holes: [{
										positions: Cesium.Cartesian3.fromDegreesArray([-93.0, 34.0, -91.0, 34.0, -91.0, 36.0, -93.0, 36.0])
									}]
								}]
							}]
						},
						material: Cesium.Color.YELLOW.withAlpha(1),
						height: 0,
						outline: true 
					}
				});

结果如图所示:
WebGL之构建导洞多边形

WebGL之构建导洞多边形WebGL之构建导洞多边形 supermapsupport 发布了712 篇原创文章 · 获赞 355 · 访问量 198万+ 他的留言板 关注
上一篇:WebGL与Threejs入门知识


下一篇:webgl入门