没有颜色或 material 的 CZML 多边形

Question

是否可以绘制仅具有多边形轮廓而没有 material 覆盖多边形边的 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 而不是多边形来绘制轮廓。 Cesium 有一个定制的系统，用于将多段线绘制为 screen-space 多边形，避免了影响许多用户的 1 像素 WebGL 线限制。此外，折线不会尝试以任何方式填充封闭区域。

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

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 对我有用。

没有颜色或 material 的 CZML 多边形

CZML polygon without color or material

javascript

cesium

czml