selection.js

var removeSilhouette;

function selectData() {
 // HTML overlay for showing feature name on mouseover
 var nameOverlay = document.createElement("div");
 viewer.container.appendChild(nameOverlay);
 nameOverlay.setAttribute("id", "selectfunc");
 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 = "black";
 nameOverlay.style.color = "white";
 nameOverlay.style.font = "italic 12px sans-serif";
 // Information about the currently selected feature
 var selected = {
  feature: undefined,
  originalColor: new Cesium.Color()
 };
 // An entity object which will hold info about the currently selected feature for infobox display
 var selectedEntity = new Cesium.Entity();
 // Get default left click handler for when a feature is not picked on left click
 var clickHandler = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
 // Silhouettes are supported
 var silhouetteBlue = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
 silhouetteBlue.uniforms.color = Cesium.Color.BLUE;
 silhouetteBlue.uniforms.length = .01;
 silhouetteBlue.selected = [];
 var silhouetteGreen = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
 silhouetteGreen.uniforms.color = Cesium.Color.LIME;
 silhouetteGreen.uniforms.length = .01;
 silhouetteGreen.selected = [];
 removeSilhouette = viewer.scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createSilhouetteStage([ silhouetteBlue, silhouetteGreen ]));
 // Silhouette a feature blue on hover.
 viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
  // If a feature was previously highlighted, undo the highlight
  silhouetteBlue.selected = [];
  // 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("gml_id");
  nameOverlay.textContent = name;
  // Highlight the feature if it's not already selected.
  if (pickedFeature !== selected.feature) {
   silhouetteBlue.selected = [ pickedFeature ];
  }
 }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
 // Silhouette a feature on selection and show metadata in the InfoBox.
 viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
  // If a feature was previously selected, undo the highlight
  silhouetteGreen.selected = [];
  // 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 (silhouetteGreen.selected[0] === pickedFeature) {
   return;
  }
  // Save the selected feature's original color
  var highlightedFeature = silhouetteBlue.selected[0];
  if (pickedFeature === highlightedFeature) {
   silhouetteBlue.selected = [];
  }
  // Highlight newly selected feature
  silhouetteGreen.selected = [ pickedFeature ];
  // Set feature infobox description
  var featureName = pickedFeature.getProperty("name");
  selectedEntity.name = "Ergebnis Objektabfrage";
  selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';
  viewer.selectedEntity = selectedEntity;
  selectedEntity.description = '<table class="cesium-infoBox-defaultTable"><tbody>';
  //CityGML-Standard
  if (pickedFeature.getProperty("gml_id") !== undefined && pickedFeature.getProperty("gml_id") !== null) {
   selectedEntity.description += "<tr><th>GML-ID</th><td>" + pickedFeature.getProperty("gml_id") + "</td></tr>";
  }
  if (pickedFeature.getProperty("gml_parent_id") !== undefined && pickedFeature.getProperty("gml_parent_id") !== null) {
   selectedEntity.description += "<tr><th>GML-PARENT-ID</th><td>" + pickedFeature.getProperty("gml_parent_id") + "</td></tr>";
  }
  if (pickedFeature.getProperty("gebaeudetext") !== undefined && pickedFeature.getProperty("gebaeudetext") !== null) {
   selectedEntity.description += "<tr><th>Bezeichnung</th><td>" + pickedFeature.getProperty("gebaeudetext") + "</td></tr>";
  }
  if (pickedFeature.getProperty("alkisId") !== undefined && pickedFeature.getProperty("alkisId") !== null) {
   selectedEntity.description += "<tr><th>ALKIS-ID</th><td>" + pickedFeature.getProperty("alkisId") + "</td></tr>";
  }
  if (pickedFeature.getProperty("grundflaeche") !== undefined && pickedFeature.getProperty("grundflaeche") !== null) {
   selectedEntity.description += "<tr><th>Grundfläche [m²]</th><td>" + pickedFeature.getProperty("grundflaeche") + "</td></tr>";
  }
  if (pickedFeature.getProperty("geschossflaeche") !== undefined && pickedFeature.getProperty("geschossflaeche") !== null) {
   selectedEntity.description += "<tr><th>Geschossfläche [m²]</th><td>" + pickedFeature.getProperty("geschossflaeche") + "</td></tr>";
  }
  if (pickedFeature.getProperty("hoeheEFH") !== undefined && pickedFeature.getProperty("hoeheEFH") !== null) {
   selectedEntity.description += "<tr><th>EFH [m. ü. NHN]</th><td>" + pickedFeature.getProperty("hoeheEFH") + "</td></tr>";
  }
  if (pickedFeature.getProperty("hoeheFirst") !== undefined && pickedFeature.getProperty("hoeheFirst") !== null) {
   selectedEntity.description += "<tr><th>Firsthöhe [m. ü. NHN]</th><td>" + pickedFeature.getProperty("hoeheFirst") + "</td></tr>";
  }
  if (pickedFeature.getProperty("hoeheTrauf") !== undefined && pickedFeature.getProperty("hoeheTrauf") !== null) {
   selectedEntity.description += "<tr><th>Traufhöhe [m. ü. NHN]</th><td>" + pickedFeature.getProperty("hoeheTrauf") + "</td></tr>";
  }
  if (pickedFeature.getProperty("citygml_measured_height") !== undefined && pickedFeature.getProperty("citygml_measured_height") !== null) {
   selectedEntity.description += "<tr><th>GML-Measured-Height [m]</th><td>" + pickedFeature.getProperty("citygml_measured_height") + "</td></tr>";
  }
  if (pickedFeature.getProperty("citygml_storeys_above_ground") !== undefined && pickedFeature.getProperty("citygml_storeys_above_ground") !== null) {
   selectedEntity.description += "<tr><th>Oberirdische Geschosse</th><td>" + pickedFeature.getProperty("citygml_storeys_above_ground") + "</td></tr>";
  }
  if (pickedFeature.getProperty("citygml_storeys_below_ground") !== undefined && pickedFeature.getProperty("citygml_storeys_below_ground") !== null) {
   selectedEntity.description += "<tr><th>Unterirdische Geschosse</th><td>" + pickedFeature.getProperty("citygml_storeys_below_ground") + "</td></tr>";
  }
  if (pickedFeature.getProperty("citygml_year_of_construction") !== undefined && pickedFeature.getProperty("citygml_year_of_construction") !== null) {
   selectedEntity.description += "<tr><th>Baujahr</th><td>" + pickedFeature.getProperty("citygml_year_of_construction") + "</td></tr>";
  }
  //Faechergeometrie
  if (pickedFeature.getProperty("natural") !== undefined) {
   selectedEntity.description += "<tr><th>Typ</th><td>" + pickedFeature.getProperty("natural") + "</td></tr>";
  }
  if (pickedFeature.getProperty("HOEHE") !== undefined) {
   selectedEntity.description += "<tr><th>Höhe [m]</th><td>" + pickedFeature.getProperty("HOEHE") + "</td></tr>";
  }
  selectedEntity.description += "</tbody></table>";
 }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}

//Deactivate Function
function deactivateSelectData() {
 viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
 viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
 viewer.scene.postProcessStages.remove(removeSilhouette);
 $("#selectfunc").remove();
}