Search code examples
javascriptcesiumjs

Cesium.PolylineGeometry doesn't work. Cesium.SimplePolylineGeometry does


I create Cesium.Primitive in a such way:

    _createPrimitive: function (linesNumber) {
        var instances = [];
        for (var i = 0; i < linesNumber; i++) {
            var lon = _.random(-90, 90);
            var lat = _.random(-180, 180);
            var polyline = new Cesium.SimplePolylineGeometry({
                positions: Cesium.Cartesian3.fromDegreesArrayHeights([
                    lat, lon, 0,
                    lat, lon, 2000000])
            });
            var geometry = Cesium.SimplePolylineGeometry.createGeometry(polyline);
            instances.push(new Cesium.GeometryInstance({
                geometry: geometry,
                attributes: {
                    color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom({alpha: 1}))
                }
            }));
        }
        return new Cesium.Primitive({
            geometryInstances: instances,
            appearance: new Cesium.PerInstanceColorAppearance()
        });
    },

and add it to scene later:

scene.primitives.add(this._createPrimitive(20000));

It works as expected. I want to change polyline's width. I change Cesium.SimplePolylineGeometry to Cesium.PolylineGeometry and add width param to Cesium.PolylineGeometry constructor call:

    _createPrimitive: function (linesNumber) {
        var instances = [];
        for (var i = 0; i < linesNumber; i++) {
            var lon = _.random(-90, 90);
            var lat = _.random(-180, 180);
            var polyline = new Cesium.PolylineGeometry({
                positions: Cesium.Cartesian3.fromDegreesArrayHeights([
                    lat, lon, 0,
                    lat, lon, 2000000]),
                width: 4
            });
            var geometry = Cesium.PolylineGeometry.createGeometry(polyline);
            instances.push(new Cesium.GeometryInstance({
                geometry: geometry,
                attributes: {
                    color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom({alpha: 1}))
                }
            }));
        }
        return new Cesium.Primitive({
            geometryInstances: instances,
            appearance: new Cesium.PerInstanceColorAppearance()
        });
    },

and the globe is empty! What am I doing wrong?


Solution

  • The problem was I used inappropriate appearance: Cesium.PolylineColorAppearance for example works fine:

        return new Cesium.Primitive({
            geometryInstances: instances,
            appearance: new Cesium.PolylineColorAppearance()
        });