Skip to content

Commit 994f565

Browse files
Son-HNguyenSon-HNguyen
authored
Merge pull request #47 from 3dcitydb/integration-mashup-data-source-service
PR Integration mashup data source service
2 parents 60a36aa + 774563f commit 994f565

15 files changed

+1027
-109
lines changed

‎3dwebclient/index.html

Lines changed: 130 additions & 82 deletions
Large diffs are not rendered by default.

‎3dwebclient/script.js

Lines changed: 141 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,11 @@ var addLayerViewModel = {
8080
layerDataType: "",
8181
gltfVersion: "",
8282
thematicDataUrl: "",
83+
thematicDataSource: "",
84+
tableType: "",
85+
// googleSheetsApiKey: "",
86+
// googleSheetsRanges: "",
87+
// googleSheetsClientId: "",
8388
cityobjectsJsonUrl: "",
8489
minLodPixels: "",
8590
maxLodPixels: "",
@@ -167,7 +172,7 @@ function intiClient() {
167172
if (callGeocodingService != true) {
168173
var gmlId = cesiumViewer.geocoder.viewModel.searchText;
169174
info.cancel = true;
170-
cesiumViewer.geocoder.viewModel.searchText = "Searching now......."
175+
cesiumViewer.geocoder.viewModel.searchText = "Searching now.......";
171176
zoomToObjectById(gmlId, function () {
172177
cesiumViewer.geocoder.viewModel.searchText = gmlId;
173178
}, function () {
@@ -279,6 +284,11 @@ function observeActiveLayer() {
279284
addLayerViewModel.layerDataType = selectedLayer.layerDataType;
280285
addLayerViewModel.gltfVersion = selectedLayer.gltfVersion;
281286
addLayerViewModel.thematicDataUrl = selectedLayer.thematicDataUrl;
287+
addLayerViewModel.thematicDataSource = selectedLayer.thematicDataSource;
288+
addLayerViewModel.tableType = selectedLayer.tableType;
289+
// addLayerViewModel.googleSheetsApiKey = selectedLayer.googleSheetsApiKey;
290+
// addLayerViewModel.googleSheetsRanges = selectedLayer.googleSheetsRanges;
291+
// addLayerViewModel.googleSheetsClientId = selectedLayer.googleSheetsClientId;
282292
addLayerViewModel.cityobjectsJsonUrl = selectedLayer.cityobjectsJsonUrl;
283293
addLayerViewModel.minLodPixels = selectedLayer.minLodPixels;
284294
addLayerViewModel.maxLodPixels = selectedLayer.maxLodPixels;
@@ -378,6 +388,11 @@ function getLayersFromUrl() {
378388
layerDataType: Cesium.defaultValue(layerConfig.layerDataType, "COLLADA/KML/glTF"),
379389
gltfVersion: Cesium.defaultValue(layerConfig.gltfVersion, "2.0"),
380390
thematicDataUrl: Cesium.defaultValue(layerConfig.spreadsheetUrl, ""),
391+
thematicDataSource: Cesium.defaultValue(layerConfig.thematicDataSource, "GoogleSheets"),
392+
tableType: Cesium.defaultValue(layerConfig.tableType, "Horizontal"),
393+
// googleSheetsApiKey: Cesium.defaultValue(layerConfig.googleSheetsApiKey, ""),
394+
// googleSheetsRanges: Cesium.defaultValue(layerConfig.googleSheetsRanges, ""),
395+
// googleSheetsClientId: Cesium.defaultValue(layerConfig.googleSheetsClientId, ""),
381396
cityobjectsJsonUrl: Cesium.defaultValue(layerConfig.cityobjectsJsonUrl, ""),
382397
active: (layerConfig.active == "true"),
383398
minLodPixels: Cesium.defaultValue(layerConfig.minLodPixels, 140),
@@ -458,13 +473,21 @@ function saveLayerSettings() {
458473
applySaving('layerDataType', activeLayer);
459474
applySaving('gltfVersion', activeLayer);
460475
applySaving('thematicDataUrl', activeLayer);
476+
applySaving('thematicDataSource', activeLayer);
477+
applySaving('tableType', activeLayer);
478+
// applySaving('googleSheetsApiKey', activeLayer);
479+
// applySaving('googleSheetsRanges', activeLayer);
480+
// applySaving('googleSheetsClientId', activeLayer);
461481
applySaving('cityobjectsJsonUrl', activeLayer);
462482
applySaving('minLodPixels', activeLayer);
463483
applySaving('maxLodPixels', activeLayer);
464484
applySaving('maxSizeOfCachedTiles', activeLayer);
465485
applySaving('maxCountOfVisibleTiles', activeLayer);
466486
console.log(activeLayer);
467487

488+
// Update Data Source
489+
thematicDataSourceAndTableTypeDropdownOnchange();
490+
468491
// update GUI:
469492
var nodes = document.getElementById('citydb_layerlistpanel').childNodes;
470493
for (var i = 0; i < nodes.length; i += 3) {
@@ -518,6 +541,8 @@ function loadLayerGroup(_layers) {
518541

519542
// show/hide glTF version based on the value of Layer Data Type
520543
layerDataTypeDropdownOnchange();
544+
545+
thematicDataSourceAndTableTypeDropdownOnchange();
521546
}
522547
}).otherwise(function (error) {
523548
CitydbUtil.showAlertWindow("OK", "Error", error.message);
@@ -792,6 +817,11 @@ function layersToQuery() {
792817
gltfVersion: layer.gltfVersion,
793818
active: layer.active,
794819
spreadsheetUrl: layer.thematicDataUrl,
820+
thematicDataSource: layer.thematicDataSource,
821+
tableType: layer.tableType,
822+
// googleSheetsApiKey: layer.googleSheetsApiKey,
823+
// googleSheetsRanges: layer.googleSheetsRanges,
824+
// googleSheetsClientId: layer.googleSheetsClientId,
795825
cityobjectsJsonUrl: layer.cityobjectsJsonUrl,
796826
minLodPixels: layer.minLodPixels,
797827
maxLodPixels: layer.maxLodPixels == -1 ? Number.MAX_VALUE : layer.maxLodPixels,
@@ -881,31 +911,58 @@ function zoomToObjectById(gmlId, callBackFunc, errorCallbackFunc) {
881911
var activeLayer = webMap._activeLayer;
882912
if (Cesium.defined(activeLayer)) {
883913
var cityobjectsJsonData = activeLayer.cityobjectsJsonData;
884-
var obj = cityobjectsJsonData[gmlId];
914+
if (!cityobjectsJsonData) {
915+
if (Cesium.defined(errorCallbackFunc)) {
916+
errorCallbackFunc.call(this);
917+
}
918+
} else {
919+
var obj = cityobjectsJsonData[gmlId];
920+
}
885921
if (obj) {
886922
var lon = (obj.envelope[0] + obj.envelope[2]) / 2.0;
887923
var lat = (obj.envelope[1] + obj.envelope[3]) / 2.0;
888924
flyToMapLocation(lat, lon, callBackFunc);
889925
} else {
926+
// TODO
890927
var thematicDataUrl = webMap.activeLayer.thematicDataUrl;
891-
var promise = fetchDataFromGoogleFusionTable(gmlId, thematicDataUrl);
892-
Cesium.when(promise, function (result) {
893-
var centroid = result["CENTROID"];
894-
if (centroid) {
895-
var res = centroid.match(/\(([^)]+)\)/)[1].split(",");
896-
var lon = parseFloat(res[0]);
897-
var lat = parseFloat(res[1]);
898-
flyToMapLocation(lat, lon, callBackFunc);
899-
} else {
928+
dataSourceController.fetchData(gmlId, function (result) {
929+
if (!result) {
900930
if (Cesium.defined(errorCallbackFunc)) {
901931
errorCallbackFunc.call(this);
902932
}
933+
} else {
934+
var centroid = result["CENTROID"];
935+
if (centroid) {
936+
var res = centroid.match(/\(([^)]+)\)/)[1].split(",");
937+
var lon = parseFloat(res[0]);
938+
var lat = parseFloat(res[1]);
939+
flyToMapLocation(lat, lon, callBackFunc);
940+
} else {
941+
if (Cesium.defined(errorCallbackFunc)) {
942+
errorCallbackFunc.call(this);
943+
}
944+
}
903945
}
904-
}, function () {
905-
if (Cesium.defined(errorCallbackFunc)) {
906-
errorCallbackFunc.call(this);
907-
}
908-
});
946+
}, 1000);
947+
948+
// var promise = fetchDataFromGoogleFusionTable(gmlId, thematicDataUrl);
949+
// Cesium.when(promise, function (result) {
950+
// var centroid = result["CENTROID"];
951+
// if (centroid) {
952+
// var res = centroid.match(/\(([^)]+)\)/)[1].split(",");
953+
// var lon = parseFloat(res[0]);
954+
// var lat = parseFloat(res[1]);
955+
// flyToMapLocation(lat, lon, callBackFunc);
956+
// } else {
957+
// if (Cesium.defined(errorCallbackFunc)) {
958+
// errorCallbackFunc.call(this);
959+
// }
960+
// }
961+
// }, function () {
962+
// if (Cesium.defined(errorCallbackFunc)) {
963+
// errorCallbackFunc.call(this);
964+
// }
965+
// });
909966
}
910967
} else {
911968
if (Cesium.defined(errorCallbackFunc)) {
@@ -949,6 +1006,11 @@ function addNewLayer() {
9491006
layerDataType: addLayerViewModel.layerDataType.trim(),
9501007
gltfVersion: addLayerViewModel.gltfVersion.trim(),
9511008
thematicDataUrl: addLayerViewModel.thematicDataUrl.trim(),
1009+
thematicDataSource: addLayerViewModel.thematicDataSource.trim(),
1010+
tableType: addLayerViewModel.tableType.trim(),
1011+
// googleSheetsApiKey: addLayerViewModel.googleSheetsApiKey.trim(),
1012+
// googleSheetsRanges: addLayerViewModel.googleSheetsRanges.trim(),
1013+
// googleSheetsClientId: addLayerViewModel.googleSheetsClientId.trim(),
9521014
cityobjectsJsonUrl: addLayerViewModel.cityobjectsJsonUrl.trim(),
9531015
minLodPixels: addLayerViewModel.minLodPixels,
9541016
maxLodPixels: addLayerViewModel.maxLodPixels == -1 ? Number.MAX_VALUE : addLayerViewModel.maxLodPixels,
@@ -1108,18 +1170,33 @@ function createInfoTable(gmlid, cesiumEntity, citydbLayer) {
11081170
var thematicDataUrl = citydbLayer.thematicDataUrl;
11091171
cesiumEntity.description = "Loading feature information...";
11101172

1111-
fetchDataFromGoogleFusionTable(gmlid, thematicDataUrl).then(function (kvp) {
1112-
console.log(kvp);
1113-
var html = '<table class="cesium-infoBox-defaultTable" style="font-size:10.5pt"><tbody>';
1114-
for (var key in kvp) {
1115-
html += '<tr><td>' + key + '</td><td>' + kvp[key] + '</td></tr>';
1116-
}
1117-
html += '</tbody></table>';
1173+
dataSourceController.fetchData(gmlid, function (kvp) {
1174+
if (!kvp) {
1175+
cesiumEntity.description = 'No feature information found';
1176+
} else {
1177+
console.log(kvp);
1178+
var html = '<table class="cesium-infoBox-defaultTable" style="font-size:10.5pt"><tbody>';
1179+
for (var key in kvp) {
1180+
html += '<tr><td>' + key + '</td><td>' + kvp[key] + '</td></tr>';
1181+
}
1182+
html += '</tbody></table>';
11181183

1119-
cesiumEntity.description = html;
1120-
}).otherwise(function (error) {
1121-
cesiumEntity.description = 'No feature information found';
1122-
});
1184+
cesiumEntity.description = html;
1185+
}
1186+
}, 1000);
1187+
1188+
// fetchDataFromGoogleFusionTable(gmlid, thematicDataUrl).then(function (kvp) {
1189+
// console.log(kvp);
1190+
// var html = '<table class="cesium-infoBox-defaultTable" style="font-size:10.5pt"><tbody>';
1191+
// for (var key in kvp) {
1192+
// html += '<tr><td>' + key + '</td><td>' + kvp[key] + '</td></tr>';
1193+
// }
1194+
// html += '</tbody></table>';
1195+
//
1196+
// cesiumEntity.description = html;
1197+
// }).otherwise(function (error) {
1198+
// cesiumEntity.description = 'No feature information found';
1199+
// });
11231200
}
11241201

11251202
function fetchDataFromGoogleSpreadsheet(gmlid, thematicDataUrl) {
@@ -1237,7 +1314,44 @@ function layerDataTypeDropdownOnchange() {
12371314
} else {
12381315
document.getElementById("gltfVersionDropdownRow").style.display = "";
12391316
}
1317+
addLayerViewModel["layerDataType"] = layerDataTypeDropdown.options[layerDataTypeDropdown.selectedIndex].value;
1318+
}
1319+
1320+
function thematicDataSourceAndTableTypeDropdownOnchange() {
1321+
var thematicDataSourceDropdown = document.getElementById("thematicDataSourceDropdown");
1322+
var selectedThematicDataSource = thematicDataSourceDropdown.options[thematicDataSourceDropdown.selectedIndex].value;
1323+
1324+
var tableTypeDropdown = document.getElementById("tableTypeDropdown");
1325+
var selectedTableType = tableTypeDropdown.options[tableTypeDropdown.selectedIndex].value;
1326+
1327+
addLayerViewModel["thematicDataSource"] = selectedThematicDataSource;
1328+
addLayerViewModel["tableType"] = selectedTableType;
1329+
1330+
// if (selectedThematicDataSource == "GoogleSheets") {
1331+
// document.getElementById("rowGoogleSheetsApiKey").style.display = "table-row";
1332+
// document.getElementById("rowGoogleSheetsRanges").style.display = "table-row";
1333+
// document.getElementById("rowGoogleSheetsClientId").style.display = "table-row";
1334+
// } else {
1335+
// document.getElementById("rowGoogleSheetsApiKey").style.display = "none";
1336+
// document.getElementById("rowGoogleSheetsRanges").style.display = "none";
1337+
// document.getElementById("rowGoogleSheetsClientId").style.display = "none";
1338+
// }
1339+
1340+
var options = {
1341+
// name: "",
1342+
// type: "",
1343+
// provider: "",
1344+
uri: addLayerViewModel.thematicDataUrl,
1345+
tableType: selectedTableType,
1346+
// ranges: addLayerViewModel.googleSheetsRanges,
1347+
// apiKey: addLayerViewModel.googleSheetsApiKey,
1348+
// clientId: addLayerViewModel.googleSheetsClientId
1349+
};
1350+
dataSourceController = new DataSourceController(selectedThematicDataSource, options);
12401351
}
12411352

12421353
// Mobile layouts and functionalities
12431354
var mobileController = new MobileController();
1355+
1356+
// Mashup Data Source Service
1357+
var dataSourceController;

‎3dwebclient/utils/mashup-data-source-service/application/DataSourceController.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
var DataSourceTypes;
2+
(function (DataSourceTypes) {
3+
DataSourceTypes["GoogleSheets"] = "GoogleSheets";
4+
DataSourceTypes["PostgreSQL"] = "PostgreSQL";
5+
})(DataSourceTypes || (DataSourceTypes = {}));
6+
var TableTypes;
7+
(function (TableTypes) {
8+
TableTypes["Horizontal"] = "Horizontal";
9+
TableTypes["Vertical"] = "Vertical";
10+
})(TableTypes || (TableTypes = {}));
11+
var DataSourceController = /** @class */ (function () {
12+
function DataSourceController(selectedDataSource, options) {
13+
var scope = this;
14+
scope._options = options;
15+
if (selectedDataSource == DataSourceTypes.GoogleSheets) {
16+
scope._dataSource = new GoogleSheets(scope._options);
17+
}
18+
else if (selectedDataSource == DataSourceTypes.PostgreSQL) {
19+
scope._dataSource = new PostgreSQL(scope._options);
20+
}
21+
}
22+
DataSourceController.prototype.fetchData = function (id, callback, limit) {
23+
var scope = this;
24+
scope._dataSource.queryUsingId(id, function (result) {
25+
callback(scope._dataSource.responseToKvp(result));
26+
}, limit);
27+
};
28+
Object.defineProperty(DataSourceController.prototype, "dataSource", {
29+
get: function () {
30+
return this._dataSource;
31+
},
32+
set: function (value) {
33+
this._dataSource = value;
34+
},
35+
enumerable: true,
36+
configurable: true
37+
});
38+
Object.defineProperty(DataSourceController.prototype, "options", {
39+
get: function () {
40+
return this._options;
41+
},
42+
set: function (value) {
43+
this._options = value;
44+
},
45+
enumerable: true,
46+
configurable: true
47+
});
48+
return DataSourceController;
49+
}());

0 commit comments

Comments
 (0)