Skip to content

Commit

Permalink
Merge pull request #53 from 3dcitydb/kml-datasource
Browse files Browse the repository at this point in the history
Add support for thematic data in KML documents
  • Loading branch information
Son-HNguyen authored May 11, 2020
2 parents 367dcea + 039cd2e commit 100363b
Show file tree
Hide file tree
Showing 7 changed files with 197 additions and 1 deletion.
3 changes: 3 additions & 0 deletions 3dwebclient/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,10 @@
<script src="utils/mashup-data-source-service/core/WritableDataSource.js"></script>
<script src="utils/mashup-data-source-service/core/DataSource.js"></script>
<script src="utils/mashup-data-source-service/core/SQLDataSource.js"></script>
<script src="utils/mashup-data-source-service/core/XMLDataSource.js"></script>
<script src="utils/mashup-data-source-service/application/GoogleSheets.js"></script>
<script src="utils/mashup-data-source-service/application/PostgreSQL.js"></script>
<script src="utils/mashup-data-source-service/application/KMLDataSource.js"></script>
<script src="utils/mashup-data-source-service/core/MashupDataSource.js"></script>
<script src="utils/mashup-data-source-service/application/DataSourceController.js"></script>

Expand Down Expand Up @@ -291,6 +293,7 @@
<select id="thematicDataSourceDropdown" data-bind="value: thematicDataSource" onchange="thematicDataSourceAndTableTypeDropdownOnchange()">
<option value="GoogleSheets" selected="selected">Google Sheets API</option>
<option value="PostgreSQL">PostgreSQL REST API</option>
<option value="KML">KML Documents</option>
</select>
</td>
</tr>
Expand Down
8 changes: 7 additions & 1 deletion 3dwebclient/script.js
Original file line number Diff line number Diff line change
Expand Up @@ -646,8 +646,10 @@ function addEventListeners(layer) {
}

layer.registerEventHandler("CLICK", function (object) {
var thematicDataSourceDropdown = document.getElementById("thematicDataSourceDropdown");
var selectedThematicDataSource = thematicDataSourceDropdown.options[thematicDataSourceDropdown.selectedIndex].value;
var res = auxClickEventListener(object);
createInfoTable(res[0], res[1], layer);
createInfoTable(selectedThematicDataSource === "KML" ? res[1]._id : res[0], res[1], layer);
});

layer.registerEventHandler("CTRLCLICK", function (object) {
Expand Down Expand Up @@ -1367,6 +1369,10 @@ function thematicDataSourceAndTableTypeDropdownOnchange() {
// provider: "",
uri: addLayerViewModel.thematicDataUrl,
tableType: selectedTableType,
thirdPartyHandler: {
type: "Cesium",
handler: webMap._activeLayer ? webMap._activeLayer._citydbKmlDataSource : undefined
},
// ranges: addLayerViewModel.googleSheetsRanges,
// apiKey: addLayerViewModel.googleSheetsApiKey,
// clientId: addLayerViewModel.googleSheetsClientId
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,17 @@ var DataSourceTypes;
(function (DataSourceTypes) {
DataSourceTypes["GoogleSheets"] = "GoogleSheets";
DataSourceTypes["PostgreSQL"] = "PostgreSQL";
DataSourceTypes["KML"] = "KML";
})(DataSourceTypes || (DataSourceTypes = {}));
var TableTypes;
(function (TableTypes) {
TableTypes["Horizontal"] = "Horizontal";
TableTypes["Vertical"] = "Vertical";
})(TableTypes || (TableTypes = {}));
var ThirdPartyHandler;
(function (ThirdPartyHandler) {
ThirdPartyHandler["Cesium"] = "Cesium";
})(ThirdPartyHandler || (ThirdPartyHandler = {}));
var DataSourceController = /** @class */ (function () {
function DataSourceController(selectedDataSource, signInController, options) {
var scope = this;
Expand All @@ -18,6 +23,9 @@ var DataSourceController = /** @class */ (function () {
else if (selectedDataSource == DataSourceTypes.PostgreSQL) {
scope._dataSource = new PostgreSQL(signInController, scope._options);
}
else if (selectedDataSource == DataSourceTypes.KML) {
scope._dataSource = new KMLDataSource(signInController, scope._options);
}
}
DataSourceController.prototype.fetchData = function (id, callback, limit) {
var scope = this;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var KMLDataSource = /** @class */ (function (_super) {
__extends(KMLDataSource, _super);
function KMLDataSource(signInController, options) {
return _super.call(this, signInController, options) || this;
}
KMLDataSource.prototype.responseToKvp = function (response) {
if (this._thirdPartyHandler) {
switch (this._thirdPartyHandler.type) {
case ThirdPartyHandler.Cesium: {
// the handler is Cesium.KMLDataSource
return this.responseCesiumToKvp(response);
break;
}
default: {
// no valid handler found
return this.responseOwnToKvp(response);
break;
}
}
}
};
KMLDataSource.prototype.responseCesiumToKvp = function (response) {
// response is already in JSON
// only support Data https://cesium.com/docs/cesiumjs-ref-doc/KmlFeatureData.html
var result = new Map();
/* <Data name="">
<displayName></displayName>
<value></value>
</Data
*/
for (var key in response) {
// if no displayName is available -> use attribute name instead
if (response[key] && response[key].displayName) {
result[response[key].displayName] = response[key].value;
}
else {
result[key] = response[key].value;
}
}
return result;
};
KMLDataSource.prototype.responseOwnToKvp = function (response) {
// TODO
return null;
};
KMLDataSource.prototype.countFromResult = function (res) {
return res.getSize();
};
KMLDataSource.prototype.deleteDataRecordUsingId = function (id) {
// TODO
return null;
};
KMLDataSource.prototype.fetchIdsFromResult = function (res) {
// TODO
return null;
};
KMLDataSource.prototype.insertDataRecord = function (record) {
// TODO
return null;
};
KMLDataSource.prototype.queryUsingIds = function (ids) {
// TODO
return null;
};
KMLDataSource.prototype.queryUsingNames = function (names, limit) {
// TODO
return null;
};
KMLDataSource.prototype.queryUsingId = function (id, callback, limit) {
if (this._thirdPartyHandler) {
// prioritize the implementation of the provided 3rd-party handler
switch (this._thirdPartyHandler.type) {
case ThirdPartyHandler.Cesium: {
// the handler is Cesium.KMLDataSource
var entities = this._thirdPartyHandler.handler.entities;
var entity = entities.getById(id);
// entity is Cesium.KMLFeatureData
callback(entity.kml.extendedData);
break;
}
default: {
// no valid handler found
callback(null);
break;
}
}
}
else {
// using own implementation
// TODO
}
};
KMLDataSource.prototype.queryUsingSql = function (sql, callback, limit) {
// TODO
return;
};
KMLDataSource.prototype.queryUsingTypes = function (types, limit) {
// TODO
return null;
};
KMLDataSource.prototype.sumFromResultByColIndex = function (res, colIndex) {
// TODO
return null;
};
KMLDataSource.prototype.sumFromResultByName = function (res, name) {
// TODO
return null;
};
KMLDataSource.prototype.updateDataRecordUsingId = function (id, newRecord) {
// TODO
return null;
};
return KMLDataSource;
}(XMLDataSource));
11 changes: 11 additions & 0 deletions 3dwebclient/utils/mashup-data-source-service/core/DataSource.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ var DataSource = /** @class */ (function () {
this._uri = !options.uri ? "" : options.uri;
this._capabilities = !options.capabilities ? undefined : options.capabilities;
this._tableType = !options.tableType ? TableTypes.Horizontal : options.tableType;
this._thirdPartyHandler = !options.thirdPartyHandler ? undefined : options.thirdPartyHandler;
this._signInController = signInController;
}
Object.defineProperty(DataSource.prototype, "name", {
Expand Down Expand Up @@ -83,6 +84,16 @@ var DataSource = /** @class */ (function () {
enumerable: true,
configurable: true
});
Object.defineProperty(DataSource.prototype, "thirdPartyHandler", {
get: function () {
return this._thirdPartyHandler;
},
set: function (value) {
this._thirdPartyHandler = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataSource.prototype, "signInController", {
get: function () {
return this._signInController;
Expand Down
20 changes: 20 additions & 0 deletions 3dwebclient/utils/mashup-data-source-service/core/XMLDataSource.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var XMLDataSource = /** @class */ (function (_super) {
__extends(XMLDataSource, _super);
function XMLDataSource(signInController, options) {
return _super.call(this, signInController, options) || this;
}
return XMLDataSource;
}(DataSource));
21 changes: 21 additions & 0 deletions CHANGES.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,27 @@
### 1.8.3 - Active [[Demo Link]](https://www.3dcitydb.org/3dcitydb-web-map/1.8.3/3dwebclient/index.html)

##### NEW
* Added support for retrieving and displaying thematic datasource from KML documents themselves
(see [`d0e82ad`](https://github.com/3dcitydb/3dcitydb-web-map/commit/d0e82adb8ec9dceb4a77ba7bdc2a7b48e81dab67)).
Note that:
+ The option ``> Thematic Data Source`` in the main toolbox must be set to `KML documents`;
+ If Cesium is used to retrieve thematic data from KML documents, only ``Data`` of `ExtendedData` is allowed.
``SchemaData`` or custom data are simply ignored by Cesium, see [here](https://cesium.com/docs/cesiumjs-ref-doc/KmlFeatureData.html);
+ An example of a KML document with thematic data:
```xml
...
<Placemark>
...
<ExtendedData>
<Data name="dataName">
<displayName></displayName>
<value></value>
</Data>
</ExtendedData>
</Placemark>
```
+ If the ``Data`` elements do not have `displayName`, the attribute `name` shall be used as label instead.

* Added support for loading KML/COLLADA/glTF layers via proxy (see [`c736ba7`](https://github.com/3dcitydb/3dcitydb-web-map/commit/c736ba7dc56c251f46e055a4d924cd71fe35c268) and [`4894ca4`](https://github.com/3dcitydb/3dcitydb-web-map/commit/4894ca4075a447874bc1003c785f47db661a6b56)):
+ This can be toggled in the main toolbox while adding new layer;
+ This shall be stored in the shared URLs as parameter `layerProxy=<true|false>`;
Expand Down

0 comments on commit 100363b

Please sign in to comment.