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
'; viewer.selectedEntity = selectedEntity; selectedEntity.description = ''; //CityGML-Standard if (pickedFeature.getProperty("gml_id") !== undefined && pickedFeature.getProperty("gml_id") !== null) { selectedEntity.description += ""; } if (pickedFeature.getProperty("gml_parent_id") !== undefined && pickedFeature.getProperty("gml_parent_id") !== null) { selectedEntity.description += ""; } if (pickedFeature.getProperty("gebaeudetext") !== undefined && pickedFeature.getProperty("gebaeudetext") !== null) { selectedEntity.description += ""; } if (pickedFeature.getProperty("alkisId") !== undefined && pickedFeature.getProperty("alkisId") !== null) { selectedEntity.description += ""; } if (pickedFeature.getProperty("grundflaeche") !== undefined && pickedFeature.getProperty("grundflaeche") !== null) { selectedEntity.description += ""; } if (pickedFeature.getProperty("geschossflaeche") !== undefined && pickedFeature.getProperty("geschossflaeche") !== null) { selectedEntity.description += ""; } if (pickedFeature.getProperty("hoeheEFH") !== undefined && pickedFeature.getProperty("hoeheEFH") !== null) { selectedEntity.description += ""; } if (pickedFeature.getProperty("hoeheFirst") !== undefined && pickedFeature.getProperty("hoeheFirst") !== null) { selectedEntity.description += ""; } if (pickedFeature.getProperty("hoeheTrauf") !== undefined && pickedFeature.getProperty("hoeheTrauf") !== null) { selectedEntity.description += ""; } if (pickedFeature.getProperty("citygml_measured_height") !== undefined && pickedFeature.getProperty("citygml_measured_height") !== null) { selectedEntity.description += ""; } if (pickedFeature.getProperty("citygml_storeys_above_ground") !== undefined && pickedFeature.getProperty("citygml_storeys_above_ground") !== null) { selectedEntity.description += ""; } if (pickedFeature.getProperty("citygml_storeys_below_ground") !== undefined && pickedFeature.getProperty("citygml_storeys_below_ground") !== null) { selectedEntity.description += ""; } if (pickedFeature.getProperty("citygml_year_of_construction") !== undefined && pickedFeature.getProperty("citygml_year_of_construction") !== null) { selectedEntity.description += ""; } //Faechergeometrie if (pickedFeature.getProperty("natural") !== undefined) { selectedEntity.description += ""; } if (pickedFeature.getProperty("HOEHE") !== undefined) { selectedEntity.description += ""; } selectedEntity.description += "
GML-ID" + pickedFeature.getProperty("gml_id") + "
GML-PARENT-ID" + pickedFeature.getProperty("gml_parent_id") + "
Bezeichnung" + pickedFeature.getProperty("gebaeudetext") + "
ALKIS-ID" + pickedFeature.getProperty("alkisId") + "
Grundfläche [m²]" + pickedFeature.getProperty("grundflaeche") + "
Geschossfläche [m²]" + pickedFeature.getProperty("geschossflaeche") + "
EFH [m. ü. NHN]" + pickedFeature.getProperty("hoeheEFH") + "
Firsthöhe [m. ü. NHN]" + pickedFeature.getProperty("hoeheFirst") + "
Traufhöhe [m. ü. NHN]" + pickedFeature.getProperty("hoeheTrauf") + "
GML-Measured-Height [m]" + pickedFeature.getProperty("citygml_measured_height") + "
Oberirdische Geschosse" + pickedFeature.getProperty("citygml_storeys_above_ground") + "
Unterirdische Geschosse" + pickedFeature.getProperty("citygml_storeys_below_ground") + "
Baujahr" + pickedFeature.getProperty("citygml_year_of_construction") + "
Typ" + pickedFeature.getProperty("natural") + "
Höhe [m]" + pickedFeature.getProperty("HOEHE") + "
"; }, 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(); }