Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
cesium_mouse_handling.js 10.3 KB
Newer Older
JOE XMG's avatar
update change  
JOE XMG committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80 
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 = `
//             <b>3D Building Model</b> <br>
//             GML ID: ${building_gml_id} <br>
//             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.
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
JOE XMG's avatar
update    
JOE XMG committed
81
82 
            $("#chart_area").hide() // hide chart title
            $("#sensor-hint").show()
JOE XMG's avatar
update change  
JOE XMG committed
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123 
        }
        // Pick a new feature
        const 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;
        last_picked_3DTiles = pickedFeature;

        //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");
            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 += `<tr><th>${property_name}</th><td>${pickedFeature.getProperty(property_name)}</td></tr>`
                }
            }
            table_attribute_html = `
JOE XMG's avatar
update    
JOE XMG committed
124 
                <h5> <i class="bi bi-card-list"></i> Attribute Table</h5>
JOE XMG's avatar
update change  
JOE XMG committed
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139 
                <table class="table">
                    <tbody>  
                    ${attribute_text}  
                    </tbody>
                </table>
            `
            $("#attribute-table-area").html(table_attribute_html)
        } else {

            // 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
JOE XMG's avatar
update    
JOE XMG committed
140
141
142 
            // 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`
JOE XMG's avatar
update change  
JOE XMG committed
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200 
            $("#attribute-table-area").html(`
                <b>PIPE</b>: ${pipe_id} <br>
                <b>STA Multistream ID</b>: ${pipe_sta_map[pipe_id]} <br>
                <b>STA URL</b>: ${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()
JOE XMG's avatar
update    
JOE XMG committed
201
202 
                                    $("#chart_area").show()
                                    $("#sensor-hint").hide()
JOE XMG's avatar
update    
JOE XMG committed
203 
                                    drawChart(inputx, inputy_vor_vs_rueck, "line", "#chart_area","","Temperature")
JOE XMG's avatar
update change  
JOE XMG committed
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224 
    
                                }
                            }
                            
                        } 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);

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal