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 += `