circData.js

$(function () {
  Cesium.Ion.defaultAccessToken =
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ODI4ZTYyZS1mMTg2LTQ5NGEtYjdiOS02ODg2NzVhNjc0MTAiLCJpZCI6MjkwNCwiaWF0IjoxNTM1MTA5OTAzfQ.kyDX_0ScvJBkYnvXI0DW5NfZbiaRL5ezwtAUhxYnk1Y";

  var imageryViewModels = [];
  imageryViewModels.push(
    new Cesium.ProviderViewModel({
      name: "Sentinel-2",
      iconUrl: Cesium.buildModuleUrl(
        "Widgets/Images/ImageryProviders/sentinel-2.png"
      ),
      tooltip: "Sentinel-2 cloudless.",
      creationFunction: function () {
        return new Cesium.IonImageryProvider({ assetId: 3954 });
      },
    })
  );

  imageryViewModels.push(
    new Cesium.ProviderViewModel({
      name: "Blue Marble",
      iconUrl: Cesium.buildModuleUrl(
        "Widgets/Images/ImageryProviders/blueMarble.png"
      ),
      tooltip: "Blue Marble Next Generation July, 2004 imagery from NASA.",
      creationFunction: function () {
        return new Cesium.IonImageryProvider({ assetId: 3845 });
      },
    })
  );

  var viewer = new Cesium.Viewer("cesiumContainer", {
    imageryProvider: new Cesium.IonImageryProvider({ assetId: 3954 }),

    terrainProvider: new Cesium.CesiumTerrainProvider({
      url: Cesium.IonResource.fromAssetId(1),
    }),
    scene3DOnly: false,
    shouldAnimate: true,
    animation: true,
    infoBox: true,
    baseLayerPicker: true,
    fullscreenButton: false,
    timeline: false,
    navigationHelpButton: true,
    navigationInstructionsInitiallyVisible: false,
    homeButton: false,
    selectionIndicator: true,
    geocoder: true,
    // imageryProviderViewModels: imageryViewModels
  });

  var layer = viewer.imageryLayers.addImageryProvider(
    new Cesium.IonImageryProvider({ assetId: 2 })
  );

  // var imageryLayer = viewer.imageryLayers.addImageryProvider(
  // 	new Cesium.IonImageryProvider({ assetId: 3954 })
  //   );

  var canvas = viewer.canvas;
  canvas.setAttribute("tabindex", "0"); // needed to put focus on the canvas
  canvas.addEventListener("click", function () {
    canvas.focus();
  });
  canvas.focus();
  var scene = viewer.scene;





//   viewer.scene.globe.depthTestAgainstTerrain = false;

//   var osmBuildings = Cesium.createOsmBuildings();
//   osmBuildings.readyPromise
//     .then(function (osmBuildings) {
//       viewer.scene.primitives.add(osmBuildings);
//     })
//     .otherwise(function (error) {
//       console.log(error);
//     });

//   osmBuildings.readyPromise.then(function (osmBuildings) {
//     var height = 60;
//     var cartographic = Cesium.Cartographic.fromCartesian(
//       osmBuildings.boundingSphere.center
//     );
//     var surface = Cesium.Cartesian3.fromRadians(
//       cartographic.longitude,
//       cartographic.latitude,
//       0.0
//     );
//     var offset = Cesium.Cartesian3.fromRadians(
//       cartographic.longitude,
//       cartographic.latitude,
//       height
//     );
//     var translation = Cesium.Cartesian3.subtract(
//       offset,
//       surface,
//       new Cesium.Cartesian3()
//     );

//     osmBuildings.modelMatrix = Cesium.Matrix4.fromTranslation(translation);

//   });

  // 	viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
  // 		url: Cesium.IonResource.fromAssetId(1)
  // })

  const buildingHeightOffset = 60; //53

 


//   --------------------------------------------------------------------
var relativeHeight = 0.0;
var scale = 1.5

function getEastNorthUpTransform(tileset, relativeHeight) {
    var origin = tileset.boundingSphere.center;
    var cartographic = Cesium.Cartographic.fromCartesian(origin);
    cartographic.height = relativeHeight;
    origin = Cesium.Cartographic.toCartesian(cartographic);
    var enu = Cesium.Transforms.eastNorthUpToFixedFrame(origin);
    return enu;
}

function getScaleTransform(tileset, scale, relativeHeight) {
    var toGlobal = getEastNorthUpTransform(tileset, relativeHeight);
    var toLocal = Cesium.Matrix4.inverse(toGlobal, new Cesium.Matrix4());
    var localScale = new Cesium.Cartesian3(scale, scale, scale);
    var localScaleMatrix = Cesium.Matrix4.fromScale(localScale);
    var transform = Cesium.Matrix4.multiply(toGlobal, Cesium.Matrix4.multiply(localScaleMatrix, toLocal, new Cesium.Matrix4()), new Cesium.Matrix4());
    return transform;
}


 
//////////////////////////////////////////////////////////////////////



  ///////////////////////////// Target  //////////////////////////

  var target_tileset = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
      url: "buildingTiles/circularTiles/target_black/tileset.json",
      show: true,
    })
  );

  target_tileset.readyPromise.then(function (target_tileset) {
  
    var height = buildingHeightOffset;
    var cartographic = Cesium.Cartographic.fromCartesian(
      target_tileset.boundingSphere.center
    );
    var surface = Cesium.Cartesian3.fromRadians(
      cartographic.longitude,
      cartographic.latitude,
      0.0
    );
    var offset = Cesium.Cartesian3.fromRadians(
      cartographic.longitude,
      cartographic.latitude,
      height
    );
    var translation = Cesium.Cartesian3.subtract(
      offset,
      surface,
      new Cesium.Cartesian3()
    );


    target_tileset.modelMatrix = Cesium.Matrix4.fromTranslation(
      translation
    );

  
  });

  target_tileset.readyPromise.then(function (target_tileset) {
    target_tileset.style = new Cesium.Cesium3DTileStyle({
      color: "color('black',0.5)",
    });
  });

//   target_tileset.root.transform = getScaleTransform(target_tileset, scale, relativeHeight);

  ///////////////////////////// Layer one //////////////////////////

  var L1 = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
      url: "buildingTiles/circularTiles/L1_yellow/tileset.json",
      show: true,
    })
  );

  L1.readyPromise.then(function (L1) {
    return zoomAll(L1);
  });

  L1.readyPromise.then(function (L1) {
    var R = 0; // roll
    var P = 0; // pitch
    var Yaw = 0; // yaw
    var height = buildingHeightOffset;
    var cartographic = Cesium.Cartographic.fromCartesian(
      L1.boundingSphere.center
    );
    var surface = Cesium.Cartesian3.fromRadians(
      cartographic.longitude,
      cartographic.latitude,
      0.0
    );
    var offset = Cesium.Cartesian3.fromRadians(
      cartographic.longitude,
      cartographic.latitude,
      height
    );
    var translation = Cesium.Cartesian3.subtract(
      offset,
      surface,
      new Cesium.Cartesian3()
    );

    //var rotMat = new Cesium.Matrix3();
    var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(
      new Cesium.HeadingPitchRoll(Yaw, P, R)
    );

    L1.modelMatrix = Cesium.Matrix4.fromRotationTranslation(
      rotation,
      translation
    );

    return zoomAll(L1);
  });

  L1.readyPromise.then(function (L1) {
    L1.style = new Cesium.Cesium3DTileStyle({
      color: "color('yellow',1)",
    });
  });

  ///////////////////////////// Layer 2 //////////////////////////

  var L2 = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
      url: "buildingTiles/circularTiles/L2_red/tileset.json",
      show: true,
    })
  );

  L2.readyPromise.then(function (L2) {
    return zoomAll(L2);
  });

  L2.readyPromise.then(function (L2) {
    var R = 0; // roll
    var P = 0; // pitch
    var Yaw = 0; // yaw
    var height = buildingHeightOffset;
    var cartographic = Cesium.Cartographic.fromCartesian(
      L2.boundingSphere.center
    );
    var surface = Cesium.Cartesian3.fromRadians(
      cartographic.longitude,
      cartographic.latitude,
      0.0
    );
    var offset = Cesium.Cartesian3.fromRadians(
      cartographic.longitude,
      cartographic.latitude,
      height
    );
    var translation = Cesium.Cartesian3.subtract(
      offset,
      surface,
      new Cesium.Cartesian3()
    );

    //var rotMat = new Cesium.Matrix3();
    var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(
      new Cesium.HeadingPitchRoll(Yaw, P, R)
    );

    L2.modelMatrix = Cesium.Matrix4.fromRotationTranslation(
      rotation,
      translation
    );

    return zoomAll(L2);
  });

  L2.readyPromise.then(function (L2) {
    L2.style = new Cesium.Cesium3DTileStyle({
      color: "color('red',1)",
    });
  });

  ///////////////////////////// Layer 3 //////////////////////////

  var L3 = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
      url: "buildingTiles/circularTiles/L3_green/tileset.json",
      show: true,
    })
  );

  L3.readyPromise.then(function (L3) {
    return zoomAll(L3);
  });

  L3.readyPromise.then(function (L3) {
    var R = 0; // roll
    var P = 0; // pitch
    var Yaw = 0; // yaw
    var height = buildingHeightOffset;
    var cartographic = Cesium.Cartographic.fromCartesian(
      L3.boundingSphere.center
    );
    var surface = Cesium.Cartesian3.fromRadians(
      cartographic.longitude,
      cartographic.latitude,
      0.0
    );
    var offset = Cesium.Cartesian3.fromRadians(
      cartographic.longitude,
      cartographic.latitude,
      height
    );
    var translation = Cesium.Cartesian3.subtract(
      offset,
      surface,
      new Cesium.Cartesian3()
    );

    //var rotMat = new Cesium.Matrix3();
    var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(
      new Cesium.HeadingPitchRoll(Yaw, P, R)
    );

    L3.modelMatrix = Cesium.Matrix4.fromRotationTranslation(
      rotation,
      translation
    );

    return zoomAll(L3);
  });

  L3.readyPromise.then(function (L3) {
    L3.style = new Cesium.Cesium3DTileStyle({
      color: "color('green',1)",
    });
  });

  ///////////////////////////// Layer 3 //////////////////////////

  var L4 = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
      url: "buildingTiles/circularTiles/L4_brown/tileset.json",
      show: true,
    })
  );

  L4.readyPromise.then(function (L4) {
    return zoomAll(L4);
  });

  L4.readyPromise.then(function (L4) {
    var R = 0; // roll
    var P = 0; // pitch
    var Yaw = 0; // yaw
    var height = buildingHeightOffset;
    var cartographic = Cesium.Cartographic.fromCartesian(
      L4.boundingSphere.center
    );
    var surface = Cesium.Cartesian3.fromRadians(
      cartographic.longitude,
      cartographic.latitude,
      0.0
    );
    var offset = Cesium.Cartesian3.fromRadians(
      cartographic.longitude,
      cartographic.latitude,
      height
    );
    var translation = Cesium.Cartesian3.subtract(
      offset,
      surface,
      new Cesium.Cartesian3()
    );

    //var rotMat = new Cesium.Matrix3();
    var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(
      new Cesium.HeadingPitchRoll(Yaw, P, R)
    );

    L4.modelMatrix = Cesium.Matrix4.fromRotationTranslation(
      rotation,
      translation
    );

    return zoomAll(L4);
  });

  L4.readyPromise.then(function (L4) {
    L4.style = new Cesium.Cesium3DTileStyle({
      color: "color('CORAL',1)",
    });
  });

  var camera = viewer.camera;
  var controller = scene.screenSpaceCameraController;
  var r = 0;
  var center = new Cesium.Cartesian3();

  var hpRoll = new Cesium.HeadingPitchRoll();
  var hpRange = new Cesium.HeadingPitchRange();
  var speed = 0.1;
  var deltaRadians = Cesium.Math.toRadians(3.0);

  var position = Cesium.Cartesian3.fromDegrees(9.190471, 48.786782, 0.0);
  var speedVector = new Cesium.Cartesian3();
  var fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator(
    "north",
    "west"
  );

  viewer.scene.globe.enableLighting = true; // set lighting to true

  var zoomAll = function (tileset) {
    return new Promise(function (resolve, reject) {
      if (!tileset) {
        reject("Tileset is undifined");
      }
      viewer.camera.viewBoundingSphere(
        tileset.boundingSphere,
        new Cesium.HeadingPitchRange(0, -0.5, 1500)
      );
      viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
      resolve();
    });
  };

   ///////////////// STOECKACH LOD 1

   var stoeckach = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
	url: 'buildingTiles/StoeckachLOD1/tileset.json',
	show: true
}));

stoeckach.readyPromise.then(function (stoeckach) {

		
	var height = buildingHeightOffset-1;
	var cartographic = Cesium.Cartographic.fromCartesian(stoeckach.boundingSphere.center);
	var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
	var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height);
	var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());

	stoeckach.modelMatrix = Cesium.Matrix4.fromTranslation(translation);

});

stoeckach.readyPromise.then(function(stoeckach){
	stoeckach.style = new Cesium.Cesium3DTileStyle({
		color: "color('white',1)",
	})
});

  // load streamline data from text file and parse it to polyline with multiple colors.

  var pos = [];
  var cols = [];
  var streamID = [];

  // d3.dsv(",", "results/polylines_circularData.csv").then(function(text) {
  d3.dsv(",", "results/Kirchturm1.csv").then(function (text) {
    //	console.log(text); // Hello, world!
    // var temp = text.split(',');

    var temp = text;
    for (var i = 0; i < temp.length; i++) {
      // use i+=7 when parsed as d3.text(...)
      pos.push([
        parseFloat(text[i].x),
        parseFloat(text[i].y),
        parseFloat(text[i].z),
      ]);
      cols.push([
        parseInt(text[i].R),
        parseInt(text[i].G),
        parseInt(text[i].B),
      ]);
      streamID.push(parseInt(text[i].ID));
      // use these lines if parsed as text. i.e. using d3.text(...)
      //pos.push([parseFloat(temp[i+0]), parseFloat(temp[i+1]), parseFloat(temp[i+2])]);
      //colors.push([parseFloat(temp[i+3]),parseFloat(temp[i+4]),parseFloat(temp[i+5])])
      //streamID.push([parseFloat(temp[i+6])]);
    }

    // const maxID = streamID.reduce(function(a, b) {
    // 	return Math.max(a, b);
    // });
    const maxID = text[text.length - 2].ID;
    const StreamHeightOffset = 70; //120;

    //find out the unique ids within the streamID array
    const uniqueStreamID = [...new Set(streamID)];

    //get index of each unique id, first element of those
    let sIDidx = [];
    for (var i = 0; i <= maxID; i++) {
      var tmpIdx = streamID.indexOf(i);
      if (tmpIdx !== -1) sIDidx.push(tmpIdx);
    }

    for (var line = 1; line < uniqueStreamID.length; line++) {
      // Create and draw a polyline with per vertex colors
      positions = [];
      colors = [];
      for (i = sIDidx[line - 1]; i < sIDidx[line] - 1; ++i) {
        positions.push(
          Cesium.Cartesian3.fromDegrees(
            pos[i][0],
            pos[i][1],
            pos[i][2] + StreamHeightOffset
          )
        );
        colors.push(
          Cesium.Color.fromBytes(cols[i][0], cols[i][1], cols[i][2], 200)
        );
      }
      // For per segment coloring, supply the colors option with
      // an array of colors for each vertex.  Also set the
      // colorsPerVertex option to true.
      viewer.scene.primitives.add(
        new Cesium.Primitive({
          geometryInstances: new Cesium.GeometryInstance({
            geometry: new Cesium.PolylineGeometry({
              positions: positions,
              width: 10.0,
              vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
              colors: colors,
              colorsPerVertex: true,
            }),
          }),
          appearance: new Cesium.PolylineColorAppearance(),
        })
      );
    }
  });

  // HTML overlay for showing feature name on mouseover
  var nameOverlay = document.createElement("div");
  viewer.container.appendChild(nameOverlay);
  nameOverlay.className = "backdrop";
  nameOverlay.style.display = "none";
  nameOverlay.style.position = "absolute";
  nameOverlay.style.bottom = "0";
  nameOverlay.style.left = "0";
  nameOverlay.style["pointer-events"] = "none";
  nameOverlay.style.padding = "4px";
  nameOverlay.style.backgroundColor = "green";

  // Information about the currently selected feature
  var selected = {
    feature: undefined,
    originalColor: new Cesium.Color(),
  };

  // Information about the currently highlighted feature
  var highlighted = {
    feature: undefined,
    originalColor: new Cesium.Color(),
  };

  var selectedEntity = new Cesium.Entity();

  // Color a feature yellow on hover.
  viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
    // If a feature was previously highlighted, undo the highlight
    if (Cesium.defined(highlighted.feature)) {
      highlighted.feature.color = highlighted.originalColor;
      highlighted.feature = undefined;
    }

    // Pick a new feature
    var pickedFeature = viewer.scene.pick(movement.endPosition);
    if (!Cesium.defined(pickedFeature)) {
      nameOverlay.style.display = "none";
      return;
    }

    // A feature was picked, so show it's overlay content
    nameOverlay.style.display = "block";
    nameOverlay.style.bottom =
      viewer.canvas.clientHeight - movement.endPosition.y + "px";
    nameOverlay.style.left = movement.endPosition.x + "px";
    var name = pickedFeature.getProperty("name");
    if (!Cesium.defined(name)) {
      name = pickedFeature.getProperty("id");
    }
    nameOverlay.textContent = name;

    // Highlight the feature if it's not already selected.
    if (pickedFeature !== selected.feature) {
      highlighted.feature = pickedFeature;
      Cesium.Color.clone(pickedFeature.color, highlighted.originalColor);
      pickedFeature.color = Cesium.Color.AQUA;
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

  // Color a feature on selection and show metadata in the InfoBox.
  var clickHandler = viewer.screenSpaceEventHandler.getInputAction(
    Cesium.ScreenSpaceEventType.LEFT_CLICK
  );
  viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
    // If a feature was previously selected, undo the highlight
    if (Cesium.defined(selected.feature)) {
      selected.feature.color = selected.originalColor;
      selected.feature = undefined;
    }

    // Pick a new feature
    var pickedFeature = viewer.scene.pick(movement.position);
    if (!Cesium.defined(pickedFeature)) {
      clickHandler(movement);
      return;
    }

    // Select the feature if it's not already selected
    if (selected.feature === pickedFeature) {
      return;
    }
    selected.feature = pickedFeature;

    // Save the selected feature's original color
    if (pickedFeature === highlighted.feature) {
      Cesium.Color.clone(highlighted.originalColor, selected.originalColor);
      highlighted.feature = undefined;
    } else {
      Cesium.Color.clone(pickedFeature.color, selected.originalColor);
    }

    // Highlight newly selected feature
    pickedFeature.color = Cesium.Color.WHITE;

    // Set feature infobox description
    var featureName = pickedFeature.getProperty("name");
    selectedEntity.name = featureName;
    selectedEntity.description =
      'Loading <div class="cesium-infoBox-loading"></div>';
    viewer.selectedEntity = selectedEntity;
    selectedEntity.description =
      '<table class="cesium-infoBox-defaultTable"><tbody>' +
      "<tr><th>Bld function</th><td>" +
      pickedFeature.getProperty("Function") +
      "</td></tr>" +
      "<tr><th>gmlID</th><td>" +
      pickedFeature.getProperty("gmlIDStr") +
      "</td></tr>" +
      "<tr><th>Dachgeschossausbau</th><td>" +
      pickedFeature.getProperty("dachgeschossausbau") +
      "</td></tr>" +
      "<tr><th>Lon</th><td>" +
      pickedFeature.getProperty("Longitude") +
      "</td></tr>" +
      "<tr><th>Lat</th><td>" +
      pickedFeature.getProperty("Latitude") +
      "</td></tr>" +
      "<tr><th>Geschossflaeche (sqm)</th><td>" +
      pickedFeature.getProperty("geschossflaeche") +
      "</td></tr>" +
      "<tr><th>YearOfConstruction</th><td>" +
      pickedFeature.getProperty("YearOfConstruction") +
      "</td></tr>" +
      "<tr><th>MeasuredHeight (m):</th><td>" +
      pickedFeature.getProperty("MeasuredHeight") +
      "</td></tr>" +
      "<tr><th>HoeheFirst (m)</th><td>" +
      pickedFeature.getProperty("hoeheFirst") +
      "</td></tr>" +
      "<tr><th>HoeheTrauf (m)</th><td>" +
      pickedFeature.getProperty("hoeheTrauf") +
      "</td></tr>" +
      "<tr><th>Grundflaeche (sqm)</th><td>" +
      pickedFeature.getProperty("grundflaeche") +
      "</td></tr>" +
      "<tr><th>StoreysAboveGround: </th><td>" +
      pickedFeature.getProperty("StoreysAboveGround") +
      "</td></tr>" +
      "<tr><th>StoreysBelowGround: </th><td>" +
      pickedFeature.getProperty("StoreysBelowGround") +
      "</td></tr>" +
      "<tr><th>Durchfahrtsstr.: </th><td>" +
      pickedFeature.getProperty("ThoroughfareName") +
      "</td></tr>" +
      "<tr><th>Hausnummer.: </th><td>" +
      pickedFeature.getProperty("ThoroughfareNumber") +
      "</td></tr>" +
      "</tbody></table>";
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

  var scene = viewer.scene;
  var longitude;
  var latitude;
  var fid;
  var featuretype;
  var gmlid;
  var selID = new Array();
  var cnt = 0;
  var lastPickedObject;

  var viewModel = {
    rightClickAction: "properties",
    middleClickAction: "hide",
  };

  Cesium.knockout.track(viewModel);

  var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

  handler.setInputAction(function (movement) {
    // makes camera go to a certain position given by the coordinates below

    var feature = viewer.scene.pick(movement.position);
    if (!Cesium.defined(feature)) {
      console.log("no feature defined");
      return;
    }
    var propertyNames = feature.getPropertyNames();
    var lat = feature.getProperty("Latitude");
    var lon = feature.getProperty("Longitude");
    var tmp = feature.getProperty("YearOfConstruction");

    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(lon, lat, 900),
      maximumHeight: 1500.0,
      orientation: {
        heading: Cesium.Math.toRadians(0.0),
        pitch: Cesium.Math.toRadians(-90.0),
        roll: Cesium.Math.toRadians(45.0),
      },
      duration: 2,
    });
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

  handler.setInputAction(function (movement) {
    var feature = viewer.scene.pick(movement.position);
    if (!Cesium.defined(feature)) {
      return;
    }
    var action = viewModel.rightClickAction;
    action === "properties";
    printProperties(movement, feature);
  }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

  function printProperties(movement, feature) {
    console.log("Properties:");
    var propertyNames = feature.getPropertyNames();
    var length = propertyNames.length;
    for (var i = 0; i < length; ++i) {
      var propertyName = propertyNames[i];
      if (
        propertyName == "gmlIdALKISLageBezeichnung_1" ||
        propertyName == "gmlIdALKISLageBezeichnung_2" ||
        propertyName == "gmlIdALKISLageBezeichnung_3" ||
        propertyName == "gmlIdALKISLageBezeichnung_4" ||
        propertyName == "gmlIdALKISLageBezeichnung_5" ||
        propertyName == "gmlIdALKISLageBezeichnung_6"
      )
        console.log("  " + propertyName + ": " + "zensiert");
      else
        console.log(
          "  " + propertyName + ": " + feature.getProperty(propertyName)
        );
    }

    // Evaluate feature description
    //console.log('Description : ' + tileset.style.meta.description.evaluate(scene.frameState, feature));
  }

  handler.setInputAction(function (movement) {
    var feature = viewer.scene.pick(movement.position);
    if (!Cesium.defined(feature)) {
      return;
    }

    var action = viewModel.middleClickAction;
    if (action === "hide") {
      feature.show = false;
    }
  }, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);

  /*
	return Cesium.when(tileset.readyPromise).then(function (tileset) {
		tileset.style = new Cesium.Cesium3DTileStyle({

			color: {

				conditions: [
					

					["${Latitude} >= 48.8170", "color('purple', 0.5)"],

					["${Latitude} >= 48.7950", "color('red')"],

					["${Latitude} >= 48.7830", "color('orange')"],

					["${Latitude} >= 48.7710", "color('yellow')"],

					["${Latitude} >= 48.7690", "color('lime')"],

					["${Latitude} >= 48.7570", "color('cyan')"],

					["${Latitude} >= 48.7470", "color('CORNFLOWERBLUE')"],

					["${Latitude} >= 48.7370", "color('DARKMAGENTA')"],

					["true", "color('lightblue')"]

				]

			}

		});
	});
*/

  function showLegend() {
    $("#legend").css("display", "block");
  }
  function hideLegend() {
    $("#legend").css("display", "none");
  }

  // Legend - Colour Table
  function emptyColourTable() {
    $(".inner").empty();
  }

  /*
function setHeightTable() {
    $(".inner").append( "<table>" +
        "<tr><td class='outlined' bgcolor='red'>&nbsp;&nbsp;&nbsp;&nbsp;</td><td> 113007 </td></tr>" +
        "<tr><td class='outlined' bgcolor='#ff6b21'></td><td> 113001 </td></tr>" +
        "<tr><td class='outlined' bgcolor='#ffb400'></td><td> 112996 </td></tr>" +
		"<tr><td class='outlined' bgcolor='yellow'></td><td> 112991</td></tr>" +
        "<tr><td class='outlined' bgcolor='#00ff00'></td><td> 112986 </td></tr>" +                
       	"<tr><td class='outlined' bgcolor='cyan'></td><td> 112981 </td></tr>" +
        "<tr><td class='outlined' bgcolor='blue'></td><td> 112976 </td></tr>" +
    "</table>" );
}
*/

  /*
function setHeightTable() {
    $(".inner").append( "<table>" +
        "<tr><td class='outlined' bgcolor='red'>&nbsp;&nbsp;&nbsp;&nbsp;</td><td> x </td></tr>" +        
        "<tr><td class='outlined' bgcolor='green'></td><td> y </td></tr>" +
        "<tr><td class='outlined' bgcolor='blue'></td><td> z </td></tr>" +
    "</table>" );
}
*/

  function setHeightTable() {
    $(".inner").append(
      "<table>" +
        "<tr><td class='outlined' bgcolor='red'>&nbsp;&nbsp;&nbsp;&nbsp;</td><td> >30 </td></tr>" +
        "<tr><td class='outlined' bgcolor='#ff6b21'></td><td> 24 </td></tr>" +
        "<tr><td class='outlined' bgcolor='#FFB300'></td><td> 18</td></tr>" +
        "<tr><td class='outlined' bgcolor='#BFBF00'></td><td> 12 </td></tr>" +
        "<tr><td class='outlined' bgcolor='#0080FF',0)'></td><td> 6 </td></tr>" +
        "<tr><td class='outlined' bgcolor='#0000FF',0)'></td><td> 0 </td></tr>" +
        "</table>"
    );
  }

  // return Cesium.when(target_tileset.readyPromise).then(function (target_tileset) {
  // 	target_tileset.style = new Cesium.Cesium3DTileStyle({

  // 		color: "color('black',1)",

  // 		/*color: {

  // 			conditions: [

  // 				['Number(${MeasuredHeight}) >= 40', 'rgb(255,0,0)'],

  // 				['Number(${MeasuredHeight}) >= 30.', 'rgb(255, 93 , 0)'],

  // 				['Number(${MeasuredHeight}) >= 25', 'rgb(255, 180, 0)'],

  // 				['Number(${MeasuredHeight}) >= 20', 'rgb(255,255,0)'],

  // 				['Number(${MeasuredHeight}) >= 15', 'rgb(0,255,0)'],

  // 				['Number(${MeasuredHeight}) >= 10', 'rgb(0,0,255)'],

  // 				['Number(${MeasuredHeight}) >= 7.5', 'rgb(75, 0, 130)'],

  // 				['Number(${MeasuredHeight}) >= 4', 'rgb(248, 100, 221)'],

  // 				['Number(${MeasuredHeight}) >= 0.1', 'rgb(248, 100, 221)'],

  // 				['true', 'color("lightblue")']

  // 			]

  // 		}
  // 		*/

  // 	});
  // 	showLegend();
  // 	setHeightTable();
  // });

  /*
	return Cesium.when(tileset.readyPromise).then(function (tileset) {
		tileset.style = new Cesium.Cesium3DTileStyle({

			color: {

				conditions: [
				
					['Number(${YearOfConstruction}) >= 2015', 'rgb(127,201,127)'],

					['Number(${YearOfConstruction}) >= 2005', 'rgb(190,174,212)'],

					['Number(${YearOfConstruction}) >= 1990', 'rgb(253,192,134)'],

					['Number(${YearOfConstruction}) >= 1975', 'rgb(255,255,153)'],

					['Number(${YearOfConstruction}) >= 1950', 'rgb(56,108,176)'],

					['Number(${YearOfConstruction}) >= 1920', 'rgb(240,2,127)'],

					['Number(${YearOfConstruction}) >= 1900', 'rgb(191,91,23)'],

					['Number(${YearOfConstruction}) >= 1800', 'rgb(102,102,102)'],

					['true', 'color("lightblue")']

				]

			}

		});
	});	*/
});