const highlighted = { feature: undefined, originalColor: new Cesium.Color(), }; // HTML overlay for showing feature name on mouseover const 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 = "#f0f6fb"; // nameOverlay.style.Color = "white!important"; // Information about the currently selected feature const selected = { feature: undefined, originalColor: new Cesium.Color(), }; // An entity object which will hold info about the currently selected feature for infobox display const selectedEntity = new Cesium.Entity(); // Get default left click handler for when a feature is not picked on left click const clickHandler = viewer.screenSpaceEventHandler.getInputAction( Cesium.ScreenSpaceEventType.LEFT_CLICK ); // 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 // const 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`; // let building_gml_id = pickedFeature.getProperty("gml_id"); // let building_gml_parent_id = pickedFeature.getProperty("gml_parent_id"); // nameOverlay.innerHTML = ` // 3D Building Model
// GML ID: ${building_gml_id}
// GML Parent ID: ${building_gml_parent_id} // `; // // 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.YELLOW; // } // }, // Cesium.ScreenSpaceEventType.MOUSE_MOVE); // Color a feature on selection and show metadata in the InfoBox. polygon_lorawan = [] 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; $("#attribute-table-area").html("") // refresh the attribute table area $("#chart_intro").hide() // hide chart title $("#chart_area").hide() // hide chart title $("#sensor-hint").show() } // Pick a new feature const pickedFeature = viewer.scene.pick(movement.position); earthPosition = viewer.scene.pickPosition(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; last_picked_3DTiles = pickedFeature; last_position = movement.position //check if it is [3D Tile building] else [Pipe]. if (!pickedFeature.id) { var all_selected_property_names = last_picked_3DTiles.getPropertyNames(); // 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.LIME; // Set feature infobox description const featureName = pickedFeature.getProperty("name"); last_picked_3DTiles_id = pickedFeature.getProperty("gml_id"); last_picked_3DTiles_function = pickedFeature.getProperty("Function_DE"); selectedEntity.name = featureName; attribute_text = `` for (let index = 0; index < all_selected_property_names.length; index++) { const property_name = all_selected_property_names[index]; if (pickedFeature.getProperty(property_name) !== null) { attribute_text += `${property_name}${pickedFeature.getProperty(property_name)}` } } table_attribute_html = `
Attribute Table
${attribute_text}
` $("#attribute-table-area").html(table_attribute_html) $(".lorawan_on_click").removeAttr('disabled'); } else { $(".lorawan_on_click").prop("disabled", true); // This case, if users click on the PIPE station // console.log("This is PIPE") // This case is true when the click feature is PIPE! var pipe_id = pickedFeature.id.name // var current_pipe_STA_URL = `http://193.196.138.56/iqg4icity_sensor/v1.1/MultiDatastreams(${pipe_sta_map[pipe_id]})/Observations?$orderby=phenomenonTime%20desc` var current_pipe_STA_URL = `https://covidsta.hft-stuttgart.de/iqg4icity_sensor/v1.1/MultiDatastreams(${pipe_sta_map[pipe_id]})/Observations?$orderby=phenomenonTime%20desc` $("#attribute-table-area").html(` PIPE: ${pipe_id}
STA Multistream ID: ${pipe_sta_map[pipe_id]}
STA URL: ${current_pipe_STA_URL} `) get_STA_Observation_Value(current_pipe_STA_URL, function (sta_result) { if (sta_result) { console.log("STA result return successfully...") console.log("Drawing Chart...") var sta_result_time_iso = [] var sta_result_observation_total_energy = [] var sta_result_observation_power = [] var sta_result_observation_vorlauf = [] var sta_result_observation_ruecklauf = [] for (let index = 0; index < sta_result.length; index++) { // example // [ // { // "@iot.id": 451441, // "phenomenonTime": "2022-07-21T14:30:00.000Z", // "result": [ // 129347, Total energy kWh // 4.6, Power kW // 73.3, Vorlauf - degree Celsius // 68.4 Ruecklauf - degree Celsius // ], // "resultTime": null, // "@iot.selfLink": "http://193.196.138.56/iqg4icity_sensor/v1.1/Observations(451441)", // "FeatureOfInterest@iot.navigationLink": "http://193.196.138.56/iqg4icity_sensor/v1.1/Observations(451441)/FeatureOfInterest", // "MultiDatastream@iot.navigationLink": "http://193.196.138.56/iqg4icity_sensor/v1.1/Observations(451441)/MultiDatastream", // "Datastream@iot.navigationLink": "http://193.196.138.56/iqg4icity_sensor/v1.1/Observations(451441)/Datastream" // }, // ... // ] try { const sta_result_value = sta_result[sta_result.length - index]; if (sta_result_value) { // only continue if the *sta_result_value* is defined. sta_result_time_iso.push(sta_result_value["phenomenonTime"]) sta_result_observation_total_energy.push(sta_result_value["result"][0]) sta_result_observation_power.push(sta_result_value["result"][1]) sta_result_observation_vorlauf.push(sta_result_value["result"][2]) sta_result_observation_ruecklauf.push(sta_result_value["result"][3]) // cleaning data to draw chart... if (index == sta_result.length - 1) { // last loop inputx = sta_result_time_iso inputy_vor_vs_rueck = [{ name: "Vorlauf [degree Celsius]", data: sta_result_observation_vorlauf }, { name: "Ruecklauf [degree Celsius]", data: sta_result_observation_ruecklauf } ] $("#chart_intro").show() $("#chart_area").show() $("#sensor-hint").hide() drawChart(inputx, inputy_vor_vs_rueck, "line", "#chart_area","","Temperature") } } } catch (error) { console.log(`this loop has STA result: ${sta_result[sta_result.length - index]}`) console.error(error) } } } else { console.log("No STA result...") } }); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); $(".lorawan_on_click").click(function () { drawPolygon = true $(".lorawan_on_click").prop("disabled", true); if (drawPolygon) { var distance = parseInt($("#distanceStepRange").val()) polygon_lorawan[last_picked_3DTiles_id] = viewer.entities.add({ position: earthPosition, name: "Green circle at height with outline", ellipse: { semiMinorAxis: distance, // e.g. 250 semiMajorAxis: distance, // e.g. 250 clampToGround: true, material: new Cesium.ColorMaterialProperty( // Cesium.Color.RED.withAlpha(0.7) Cesium.Color.fromCssColorString(`${$("#lorawanColor").val()}80`) ) }, label : { text : last_picked_3DTiles_id, font : '14pt monospace', style: Cesium.LabelStyle.FILL_AND_OUTLINE, outlineWidth : 2, verticalOrigin : Cesium.VerticalOrigin.BOTTOM, pixelOffset : new Cesium.Cartesian2(0, -9) } }); $("#lorawan_list").append(`
ID: ${last_picked_3DTiles_id}
Function: ${last_picked_3DTiles_function}
Coverage: ${distance} m.

`) $(".removeLorawn").click(function () { var this_id = this.id var tile_id = this_id.replace("rm_", "") console.log(`removing ${tile_id}`) viewer.entities.remove(polygon_lorawan[tile_id]); $(`#${tile_id}`).remove(); }); } }) // $("#distanceStepRange").change(function () { // $("#distanceStep").html($(this).val()) // }) $('#distanceStepRange').on('input', function() { $("#distanceStep").html($(this).val()) });