2

是否可以绘制一个只有多边形轮廓而没有材料覆盖多边形侧面的 CZML 多边形？

这是必需的，因为我的要求是能够单击完全浸入多边形中的对象，即内部多边形的任何一侧都不会与外部多边形的一侧重叠。所以我只想画一个多边形轮廓，让内部多边形监听点击事件。

4

2 回答 2

2

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

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像素以外的线宽。这意味着您的多边形在许多系统上总是有一个细的轮廓。

另一个缺点是渲染器可能仍会考虑然后丢弃多边形内部的所有透明片段，这可能会损害性能。

两者的解决方案是使用折线而不是多边形来绘制轮廓。Cesium 有一个定制系统，用于将折线绘制为屏幕空间多边形，避免了影响许多用户的 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);
于 2016-11-23T17:01:42.307 回答
1

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

但是实现空心多边形（只有轮廓的多边形）的更简单方法是在这里。将fillCZML 多边形的属性设置false为对我有用。

于 2016-12-13T07:52:06.933 回答