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(); }