Skip to content

Commit

Permalink
Fix highlighting and hiding function for multiple layers
Browse files Browse the repository at this point in the history
  • Loading branch information
@Son-HNguyen
Son-HNguyen committed Jul 17, 2019
1 parent 9837581 commit 4c7bcfd
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 82 deletions.
14 changes: 7 additions & 7 deletions 3dwebclient/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -447,14 +447,14 @@
</div>
</div>

<div class="citydb_long_container">
<select id = "citydb_highlightinglist" style="width: 100%;" class="cesium-button">
<option selected="selected" disabled="disabled">Choose highlighted Object</option>
</select>
<div class="citydb_long_container" onmouseover="listHighlightedObjects()">
<select id = "citydb_highlightinglist" style="width: 100%;" class="cesium-button" onchange="flyToClickedObject(this)">
<option selected="selected" disabled="disabled">Choose highlighted Object</option>
</select>
</div>
<div class="citydb_long_container">
<select id = "citydb_hiddenlist" style="width: 100%;" class="cesium-button">
<option selected="selected" disabled="disabled">Choose hidden Object</option>
<div class="citydb_long_container" onmouseover="listHiddenObjects()">
<select id = "citydb_hiddenlist" style="width: 100%;" class="cesium-button" onchange="flyToClickedObject(this)">
<option selected="selected" disabled="disabled">Choose hidden Object</option>
</select>
</div>
<div>
Expand Down
133 changes: 59 additions & 74 deletions 3dwebclient/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,9 @@ Cesium.knockout.applyBindings(addSplashWindowModel, document.getElementById('cit

intiClient();

// Store clicked entities
var clickedEntities = {};

var clockElementClicked = false;
function intiClient() {
// adjust cesium navigation help popup for splash window
Expand Down Expand Up @@ -177,9 +180,6 @@ function intiClient() {
// inspect the status of the showed and cached tiles
inspectTileStatus();

// bind view and model of the highlighted and hidden Objects...
observeObjectList();

// Zoom to desired camera position and load layers if encoded in the url...
zoomToDefaultCameraPosition().then(function (info) {
var layers = getLayersFromUrl();
Expand Down Expand Up @@ -370,84 +370,57 @@ function getLayersFromUrl() {
return nLayers;
}

function observeObjectList() {
var observable = Cesium.knockout.getObservable(webMap, '_activeLayer');
var highlightedObjectsSubscription = undefined;
var hiddenObjectsSubscription = undefined;

function listHighlightedObjects() {
var highlightingListElement = document.getElementById("citydb_highlightinglist");
highlightingListElement.onchange = function () {
zoomToObjectById(this.value);
highlightingListElement.selectedIndex = 0;
};

var hiddenListElement = document.getElementById("citydb_hiddenlist");
hiddenListElement.onchange = function () {
zoomToObjectById(this.value);
hiddenListElement.selectedIndex = 0;
};

observable.subscribe(function (deSelectedLayer) {
if (Cesium.defined(highlightedObjectsSubscription)) {
highlightedObjectsSubscription.dispose();
}
if (Cesium.defined(hiddenObjectsSubscription)) {
hiddenObjectsSubscription.dispose();
emptySelectBox(highlightingListElement, function() {
var highlightedObjects = webMap.getAllHightlightedObjects();
for (var i = 0; i < highlightedObjects.length; i++) {
var option = document.createElement("option");
option.text = highlightedObjects[i];
highlightingListElement.add(option);
highlightingListElement.selectedIndex = 0;
}
}, observable, "beforeChange");
});
}

observable.subscribe(function (selectedLayer) {
if (Cesium.defined(selectedLayer)) {
document.getElementById(selectedLayer.id).childNodes[0].checked = true;
function listHiddenObjects() {
var hidddenListElement = document.getElementById("citydb_hiddenlist");

highlightedObjectsSubscription = Cesium.knockout.getObservable(selectedLayer, '_highlightedObjects').subscribe(function (highlightedObjects) {
while (highlightingListElement.length > 1) {
highlightingListElement.remove(1);
}
for (var id in highlightedObjects) {
var option = document.createElement("option");
option.text = id;
highlightingListElement.add(option);
}
});
selectedLayer.highlightedObjects = selectedLayer.highlightedObjects;
emptySelectBox(hidddenListElement, function() {
var hiddenObjects = webMap.getAllHiddenObjects();
for (var i = 0; i < hiddenObjects.length; i++) {
var option = document.createElement("option");
option.text = hiddenObjects[i];
hidddenListElement.add(option);
hidddenListElement.selectedIndex = 0;
}
});
}

hiddenObjectsSubscription = Cesium.knockout.getObservable(selectedLayer, '_hiddenObjects').subscribe(function (hiddenObjects) {
while (hiddenListElement.length > 1) {
hiddenListElement.remove(1);
}
for (var k = 0; k < hiddenObjects.length; k++) {
var id = hiddenObjects[k];
var option = document.createElement("option");
option.text = id;
hiddenListElement.add(option);
}
});
selectedLayer.hiddenObjects = selectedLayer.hiddenObjects;
function emptySelectBox(selectElement, callback) {
for (var i = selectElement.length - 1; i >= 0; i--) {
selectElement.remove(1);
}

updateAddLayerViewModel(selectedLayer);
} else {
while (highlightingListElement.length > 1) {
highlightingListElement.remove(1);
}
while (hiddenListElement.length > 1) {
hiddenListElement.remove(1);
}
callback();
}

function flyToClickedObject(obj) {
// The web client stores clicked or ctrlclicked entities in a dictionary clickedEntities with {id, entity} as KVP.
// The function flyTo from Cesium Viewer will be first employed to fly to the selected entity.
// NOTE: This flyTo function will fail if the target entity has been unloaded (e.g. user has moved camera away).
// In this case, the function zoomToObjectById shall be used instead.
// NOTE: This zoomToObjectById function requires a JSON file containing the IDs and coordinates of objects.
cesiumViewer.flyTo(clickedEntities[obj.value]).then(function (result) {
if (!result) {
zoomToObjectById(obj.value);
}
}).otherwise(function (error) {
zoomToObjectById(obj.value);
});

function updateAddLayerViewModel(selectedLayer) {
addLayerViewModel.url = selectedLayer.url;
addLayerViewModel.name = selectedLayer.name;
addLayerViewModel.layerDataType = selectedLayer.layerDataType;
addLayerViewModel.gltfVersion = selectedLayer.gltfVersion;
addLayerViewModel.thematicDataUrl = selectedLayer.thematicDataUrl;
addLayerViewModel.cityobjectsJsonUrl = selectedLayer.cityobjectsJsonUrl;
addLayerViewModel.minLodPixels = selectedLayer.minLodPixels;
addLayerViewModel.maxLodPixels = selectedLayer.maxLodPixels;
addLayerViewModel.maxSizeOfCachedTiles = selectedLayer.maxSizeOfCachedTiles;
addLayerViewModel.maxCountOfVisibleTiles = selectedLayer.maxCountOfVisibleTiles;
}
obj.selectedIndex = 0;
}

function saveLayerSettings() {
Expand All @@ -471,7 +444,6 @@ function saveLayerSettings() {
if (layerOption.id == activeLayer.id) {
layerOption.childNodes[2].innerHTML = activeLayer.name;
}
;
}

document.getElementById('loadingIndicator').style.display = 'block';
Expand Down Expand Up @@ -576,7 +548,8 @@ function addLayerToList(layer) {
}

function addEventListeners(layer) {
layer.registerEventHandler("CLICK", function (object) {

function auxClickEventListener(object) {
var objectId;
var targetEntity;
if (layer instanceof CitydbKmlLayer) {
Expand All @@ -598,7 +571,19 @@ function addEventListeners(layer) {
cesiumViewer.selectedEntity = targetEntity;
}

createInfoTable(objectId, targetEntity, layer);
// Save this clicked object for later use (such as zooming using ID)
clickedEntities[objectId] = targetEntity;

return [objectId ,targetEntity];
}

layer.registerEventHandler("CLICK", function (object) {
var res = auxClickEventListener(object);
createInfoTable(res[0], res[1], layer);
});

layer.registerEventHandler("CTRLCLICK", function (object) {
auxClickEventListener(object);
});
}

Expand Down
36 changes: 35 additions & 1 deletion js/3dcitydb-web-map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@
this._eventHandler = new Cesium.ScreenSpaceEventHandler(cesiumViewer.scene.canvas);
this._cameraEventAggregator = new Cesium.CameraEventAggregator(cesiumViewer.scene.canvas);
this._activeLayer = undefined;
Cesium.knockout.track(this, ['_activeLayer']);
}

Object.defineProperties(WebMap3DCityDB.prototype, {
Expand Down Expand Up @@ -279,5 +278,40 @@
}
this._mouseMoveEvents = active;
};

/**
* get highlighted objects from all layers
* @returns {Array}
*/
WebMap3DCityDB.prototype.getAllHightlightedObjects = function () {
var results = [];
var count = 0;
var layers = this._layers;
for (var i = 0; i < layers.length; i++) {
var curLayer = this._layers[i];
for (var obj in curLayer._highlightedObjects) {
results[count++] = obj;
}
}
return results;
};

/**
* get hidden objects from all layers
* @returns {Array}
*/
WebMap3DCityDB.prototype.getAllHiddenObjects = function () {
var results = [];
var count = 0;
var layers = this._layers;
for (var i = 0; i < layers.length; i++) {
var curLayer = this._layers[i];
for (var j = 0; j < curLayer._hiddenObjects.length; j++) {
results[count++] = curLayer._hiddenObjects[j];
}
}
return results;
};

window.WebMap3DCityDB = WebMap3DCityDB;
})();

0 comments on commit 4c7bcfd

Please sign in to comment.