CZML полигон без цвета или материала

Question

Можно ли нарисовать многоугольник CZML только с контуром многоугольника и без материала для покрытия сторон многоугольника?

Это необходимо, поскольку мое требование - включить щелчок на объекте, полностью погруженном в многоугольник, то есть ни одна сторона внутреннего многоугольника не перекрывает сторону внешнего многоугольника. Поэтому я просто хочу нарисовать контур многоугольника, чтобы внутренний щелчок прослушивал событие щелчка.

Answer 1

Большое спасибо @emackey за ваш описательный ответ. Ваш ответ полезен тем, что я хочу увеличить ширину контура многоугольника.

Но более простой способ получить полый многоугольник (многоугольник только с контуром) здесь. настройка fill свойство многоугольника CZML для false работал на меня.

Answer 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 пиксели. Это означает, что ваш многоугольник всегда будет иметь тонкий контур во многих системах.

Другим недостатком является то, что средство рендеринга, вероятно, все еще рассмотрит и затем отбросит все эти прозрачные фрагменты изнутри многоугольника, что может ухудшить производительность.

Решение обоих - использовать Polyline вместо Polygon для рисования контура. У Caesium есть специально созданная система для рисования полилиний в виде полигонов на экране, что позволяет избежать ограничений на 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);