Question

是否可以绘制仅具有多边形轮廓且没有材料覆盖多边形边的CZML多边形？

这是必需的，因为我的要求是能够点击完全浸没在多边形中的物体，即内部多边形的任何一侧都不与外部多边形的侧面重叠。所以我只想绘制一个多边形轮廓以使内部多边形监听点击事件。

Answer 1

如果我理解正确，是的，您可以将多边形的内部颜色设置为完全透明，这样只有轮廓可见或可点击。我将在下面解释这种方法的缺点，但首先，这是一个有效的例子：

var czml = [{
    "id" : "document",
    "name" : "CZML Geometries: Polygon",
    "version" : "1.0"
}, {
    "id" : "outlinedPolygon",
    "name" : "Outlined Polygon",
    "polygon" : {
        "positions" : {
            "cartographicDegrees" : [
                -108.0, 25.0, 0,
                -100.0, 25.0, 0,
                -100.0, 30.0, 0,
                -108.0, 30.0, 0
            ]
        },
        "material" : {
            "solidColor" : {
                "color" : {
                    "rgba" : [0, 0, 0, 0]
                }
            }
        },
        "extrudedHeight" : 0,
        "perPositionHeight" : true,
        "outline" : true,
        "outlineColor" : {
            "rgba" : [255, 255, 0, 255]
        }
    }
}];

var viewer = new Cesium.Viewer('cesiumContainer');
var dataSource = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSource);
viewer.zoomTo(dataSource);

现在问题是：许多基于Windows的系统和其他WebGL实现不允许除了1.0像素以外的线宽。这意味着您的多边形在许多系统上始终具有薄轮廓。

另一个缺点是渲染器可能仍会考虑并丢弃多边形内部的所有透明碎片，这可能会影响性能。

两者的解决方案是使用Polyline而不是Polygon来绘制轮廓。 Cesium有一个定制的系统，用于将折线绘制为屏幕空间多边形，避免影响许多用户的1像素WebGL线路限制。此外，Polylines不会尝试以任何方式填写封闭区域。

您必须重复第一个点作为使折线完全包围区域的最后一个点。这是一个例子：

var czml = [{
    "id" : "document",
    "name" : "CZML Geometries: Polyline",
    "version" : "1.0"
}, {
    "id" : "outlinedPolygon",
    "name" : "Outlined Polygon",
    "polyline" : {
        "positions" : {
            "cartographicDegrees" : [
                -108.0, 25.0, 0,
                -100.0, 25.0, 0,
                -100.0, 30.0, 0,
                -108.0, 30.0, 0,
                -108.0, 25.0, 0
            ]
        },
        "width": 5,
        "material" : {
            "solidColor" : {
                "color" : {
                    "rgba" : [255, 255, 0, 255]
                }
            }
        }
    }
}];

var viewer = new Cesium.Viewer('cesiumContainer');
var dataSource = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSource);
viewer.zoomTo(dataSource);

Answer 2

非常感谢@emackey的描述性答案。您的答案对于我想要增加多边形轮廓的宽度非常有用。

但实现空心多边形（仅有轮廓的多边形）的更简单方法是here。将CZML多边形的fill属性设置为false对我有用。

没有颜色或材质的CZML多边形

2 个答案: