Cesium – How to show multiple polylines using czml ?

var czml = [
  {
    "id" : "document",
    "name" : "CZML Geometries: Polyline",
    "version" : "1.0"
  },
  {
    "id" : "redLine",
    "name" : "Red line on the surface",
    "polyline" : {
      "show": false,
      "positions" : {
        "cartographicDegrees" : [
          -75, 35, 0,
          -125, 35, 0
        ]
      },
      "material" : {
          "polylineOutline": {
              "color": {"rgba": [255, 0, 0, 255]},
              "outlineColor": {"rgba": [255, 255, 255, 255]},
              "outlineWidth": 2.0
          }
      },
      "width" : 5
    }
  },
  {
    "id" : "purpleLine",
    "name" : "Purple straight line at height",
    "polyline" : {
      "show": false,
      "positions" : {
        "cartographicDegrees" : [
          -125, 35, 0,
          -170, 35, 0
        ]
      },
      "material" : {
          "polylineOutline": {
              "color": {"rgba": [148, 0, 211, 255]},
              "outlineColor": {"rgba": [255, 255, 255, 255]},
              "outlineWidth": 2.0
          }
      },
      "width" : 5
    }
  }
];

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

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(
    function () { 
        dataSource.entities.getById('purpleLine').polyline.show = true;
        dataSource.entities.getById('redLine').polyline.show = true;

    },
    Cesium.ScreenSpaceEventType.LEFT_CLICK
);

By : https://github.com/AnalyticalGraphicsInc/cesium/issues/3598

Share

Leave a Reply

Your email address will not be published. Required fields are marked *