Skip to content

Commit a1fca20

Browse files
authored
Merge pull request #52 from 3dcitydb/kml-proxy-clamp-to-ground
Merge proxy loading and clamp to ground for KML/KMZ
2 parents b8694d0 + bd9dc45 commit a1fca20

File tree

4 files changed

+94
-7
lines changed

4 files changed

+94
-7
lines changed

3dwebclient/index.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -261,6 +261,14 @@
261261
</select>
262262
</td>
263263
</tr>
264+
<tr id="layerProxyAndClampToGround" style="display: none;">
265+
<td>
266+
<label><input type="checkbox" id="layerProxyCheckbox" style="width:auto;" data-bind="checked: layerProxy"/> Load via proxy</label>
267+
</td>
268+
<td>
269+
<label><input type="checkbox" id="layerClampToGroundCheckbox" style="width:auto;" data-bind="checked: layerClampToGround"/> KML clamp to ground</label>
270+
</td>
271+
</tr>
264272
<tr id="gltfVersionDropdownRow" style="display: none;">
265273
<td>glTF version</td>
266274
<td>

3dwebclient/script.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,8 @@ var addLayerViewModel = {
7878
url: "",
7979
name: "",
8080
layerDataType: "",
81+
layerProxy: false,
82+
layerClampToGround: true,
8183
gltfVersion: "",
8284
thematicDataUrl: "",
8385
thematicDataSource: "",
@@ -287,6 +289,8 @@ function observeActiveLayer() {
287289
addLayerViewModel.url = selectedLayer.url;
288290
addLayerViewModel.name = selectedLayer.name;
289291
addLayerViewModel.layerDataType = selectedLayer.layerDataType;
292+
addLayerViewModel.layerProxy = selectedLayer.layerProxy;
293+
addLayerViewModel.layerClampToGround = selectedLayer.layerClampToGround;
290294
addLayerViewModel.gltfVersion = selectedLayer.gltfVersion;
291295
addLayerViewModel.thematicDataUrl = selectedLayer.thematicDataUrl;
292296
addLayerViewModel.thematicDataSource = selectedLayer.thematicDataSource;
@@ -391,6 +395,8 @@ function getLayersFromUrl() {
391395
url: layerConfig.url,
392396
name: layerConfig.name,
393397
layerDataType: Cesium.defaultValue(layerConfig.layerDataType, "COLLADA/KML/glTF"),
398+
layerProxy: Cesium.defined(layerConfig.layerProxy) ? layerConfig.layerProxy === "true" : false,
399+
layerClampToGround: Cesium.defined(layerConfig.layerProxy) ? layerConfig.layerClampToGround === "true" : true,
394400
gltfVersion: Cesium.defaultValue(layerConfig.gltfVersion, "2.0"),
395401
thematicDataUrl: Cesium.defaultValue(layerConfig.spreadsheetUrl, ""),
396402
thematicDataSource: Cesium.defaultValue(layerConfig.thematicDataSource, "GoogleSheets"),
@@ -476,6 +482,8 @@ function saveLayerSettings() {
476482
applySaving('url', activeLayer);
477483
applySaving('name', activeLayer);
478484
applySaving('layerDataType', activeLayer);
485+
applySaving('layerProxy', activeLayer);
486+
applySaving('layerClampToGround', activeLayer);
479487
applySaving('gltfVersion', activeLayer);
480488
applySaving('thematicDataUrl', activeLayer);
481489
applySaving('thematicDataSource', activeLayer);
@@ -824,6 +832,8 @@ function layersToQuery() {
824832
url: layer.url,
825833
name: layer.name,
826834
layerDataType: layer.layerDataType,
835+
layerProxy: layer.layerProxy,
836+
layerClampToGround: layer.layerClampToGround,
827837
gltfVersion: layer.gltfVersion,
828838
active: layer.active,
829839
spreadsheetUrl: layer.thematicDataUrl,
@@ -1014,6 +1024,8 @@ function addNewLayer() {
10141024
url: addLayerViewModel.url.trim(),
10151025
name: addLayerViewModel.name.trim(),
10161026
layerDataType: addLayerViewModel.layerDataType.trim(),
1027+
layerProxy: (addLayerViewModel.layerProxy === true),
1028+
layerClampToGround: (addLayerViewModel.layerClampToGround === true),
10171029
gltfVersion: addLayerViewModel.gltfVersion.trim(),
10181030
thematicDataUrl: addLayerViewModel.thematicDataUrl.trim(),
10191031
thematicDataSource: addLayerViewModel.thematicDataSource.trim(),
@@ -1321,8 +1333,10 @@ function layerDataTypeDropdownOnchange() {
13211333
var layerDataTypeDropdown = document.getElementById("layerDataTypeDropdown");
13221334
if (layerDataTypeDropdown.options[layerDataTypeDropdown.selectedIndex].value !== "COLLADA/KML/glTF") {
13231335
document.getElementById("gltfVersionDropdownRow").style.display = "none";
1336+
document.getElementById("layerProxyAndClampToGround").style.display = "none";
13241337
} else {
13251338
document.getElementById("gltfVersionDropdownRow").style.display = "";
1339+
document.getElementById("layerProxyAndClampToGround").style.display = "";
13261340
}
13271341
addLayerViewModel["layerDataType"] = layerDataTypeDropdown.options[layerDataTypeDropdown.selectedIndex].value;
13281342
}

CHANGES.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,19 @@
33
### 1.8.3 - Active [[Demo Link]](https://www.3dcitydb.org/3dcitydb-web-map/1.8.3/3dwebclient/index.html)
44

55
##### NEW
6+
* 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)):
7+
+ This can be toggled in the main toolbox while adding new layer;
8+
+ This shall be stored in the shared URLs as parameter `layerProxy=<true|false>`;
9+
+ For backward compatibility, shared URLs without this parameter shall receive the default value `false`.
10+
+ It is not recommended to load large datasets via proxy, e.g. Cesium 3D Tiles;
11+
+ Proxy only works for web client hosted in one of the following domains: `http(s)://(www.)3dcitydb.[org|net|de]`;
12+
+ Users have to ensure the resource URL and the web client's URL have the same protocol HTTP/HTTPS.
13+
14+
* Added support for clamping KML models to ground (see [`c736ba7`](https://github.com/3dcitydb/3dcitydb-web-map/commit/c736ba7dc56c251f46e055a4d924cd71fe35c268) and [`f64372c`](https://github.com/3dcitydb/3dcitydb-web-map/commit/f64372c02408e734d07c01ee93c55c12c1117bcf)):
15+
+ This can be toggled in the main toolbox while adding new layer;
16+
+ This shall be stored in the shared URLs as parameter `layerClampToGround=<true|false>`;
17+
+ For backward compatibility, shared URLs without this parameter shall receive the default value `true`.
18+
619
* It is now possible to access own private/non-public Google Spreadsheets using OAuth, see [`082145c`](https://github.com/3dcitydb/3dcitydb-web-map/commit/082145c73bf68c6f29614581b4f09f703d627bde).
720
The following steps explain how to enable OAuth for your project and use it in the Web Client
821
(this is not the requirement of the web client, but rather a standard procedure when using OAuth):
@@ -25,6 +38,7 @@ The following steps explain how to enable OAuth for your project and use it in t
2538
You need to stay logged in to attach your client ID in the project share link.
2639
If you wish to not include your client ID in the project share link, then simply log out beforehand,
2740
see [`bd99b17`](https://github.com/3dcitydb/3dcitydb-web-map/commit/bd99b176894618f1b8623c2de1f95e6555711b5c).
41+
2842
* The web client now supports both `.gltf` and binary `.glb` files.
2943
It automatically detects for each individual object whether a `.gltf` or a `.glb` is present and visualize accordingly,
3044
i.e. the web client can visualize a list of files mixed with `.gltf` and `.glb`,

js/CitydbKmlLayer.js

Lines changed: 58 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -76,13 +76,17 @@
7676
this._mouseOverhighlightColor = new Cesium.Color(0.0, 0.3, 0.0, 1.0);
7777

7878
this._layerDataType = options.layerDataType;
79+
this._layerProxy = options.layerProxy;
80+
this._layerClampToGround = options.layerClampToGround;
7981
this._gltfVersion = options.gltfVersion;
8082

8183
this._configParameters = {
8284
"id": this.id,
8385
"url": this.url,
8486
"name": this.name,
8587
"layerDataType": this.layerDataType,
88+
"layerProxy": this.layerProxy,
89+
"layerClampToGround": this.layerClampToGround,
8690
"gltfVersion": this.gltfVersion,
8791
"thematicDataUrl": this.thematicDataUrl,
8892
"thematicDataSource": this.thematicDataSource,
@@ -319,6 +323,24 @@
319323
}
320324
},
321325

326+
layerProxy: {
327+
get: function () {
328+
return this._layerProxy;
329+
},
330+
set: function (value) {
331+
this._layerProxy = value;
332+
}
333+
},
334+
335+
layerClampToGround: {
336+
get: function () {
337+
return this._layerClampToGround;
338+
},
339+
set: function (value) {
340+
this._layerClampToGround = value;
341+
}
342+
},
343+
322344
gltfVersion: {
323345
get: function () {
324346
return this._gltfVersion;
@@ -346,7 +368,7 @@
346368

347369
function loadMasterJSON(that, isFirstLoad) {
348370
var deferred = Cesium.when.defer();
349-
var jsonUrl = that._url;
371+
var jsonUrl = checkProxyUrl(that, that._url);
350372
new Cesium.Resource({url: jsonUrl}).fetch({responseType: 'json'}).then(function (json) {
351373
that._jsonLayerInfo = json;
352374
that._layerType = json.displayform;
@@ -431,6 +453,33 @@
431453
}
432454
}
433455

456+
function checkProxyUrl(obj, url) {
457+
if (obj._layerProxy === true || obj._layerProxy === "true") {
458+
459+
var domain = (new URL(window.location.href )).hostname;
460+
var validDomain =
461+
domain === "www.3dcitydb.org"
462+
|| domain === "www.3dcitydb.net"
463+
|| domain === "www.3dcitydb.de"
464+
|| domain === "3dcitydb.org"
465+
|| domain === "3dcitydb.net"
466+
|| domain === "3dcitydb.de";
467+
468+
if (!validDomain) {
469+
console.warn("Proxy must be enabled by this domain " + domain + "!");
470+
return url;
471+
}
472+
473+
var ssl = url.substring(0, 5) === "https";
474+
475+
var result = (ssl ? "https" : "http") + "://" + domain + "/proxy/?" + url;
476+
477+
return result;
478+
}
479+
480+
return url;
481+
}
482+
434483
/**
435484
* adds this layer to the given Cesium viewer
436485
* @param {CesiumViewer} cesiumViewer
@@ -452,10 +501,11 @@
452501
} else if (this._urlSuffix == 'kml' || this._urlSuffix == 'kmz') {
453502
this._citydbKmlDataSource = new Cesium.KmlDataSource({
454503
camera: cesiumViewer.scene.camera,
455-
canvas: cesiumViewer.scene.canvas
504+
canvas: cesiumViewer.scene.canvas,
505+
clampToGround: this._layerClampToGround
456506
});
457507

458-
this._citydbKmlDataSource.load(this._url).then(function (dataSource) {
508+
this._citydbKmlDataSource.load(checkProxyUrl(this, this._url)).then(function (dataSource) {
459509
assignLayerIdToDataSourceEntites(dataSource.entities, that._id);
460510
if (that._active) {
461511
cesiumViewer.dataSources.add(dataSource);
@@ -467,7 +517,7 @@
467517
} else if (this._urlSuffix == 'czml') {
468518
this._citydbKmlDataSource = new Cesium.CzmlDataSource();
469519

470-
this._citydbKmlDataSource.load(this._url).then(function (dataSource) {
520+
this._citydbKmlDataSource.load(checkProxyUrl(this, this._url)).then(function (dataSource) {
471521
assignLayerIdToDataSourceEntites(dataSource.entities, that._id);
472522
if (that._active) {
473523
cesiumViewer.dataSources.add(dataSource);
@@ -846,10 +896,11 @@
846896
} else if (this._urlSuffix == 'kml' || this._urlSuffix == 'kmz') {
847897
this._citydbKmlDataSource = new Cesium.KmlDataSource({
848898
camera: this._cesiumViewer.scene.camera,
849-
canvas: this._cesiumViewer.scene.canvas
899+
canvas: this._cesiumViewer.scene.canvas,
900+
clampToGround: this._layerClampToGround
850901
});
851902

852-
this._citydbKmlDataSource.load(this._url).then(function (dataSource) {
903+
this._citydbKmlDataSource.load(checkProxyUrl(this, this._url)).then(function (dataSource) {
853904
assignLayerIdToDataSourceEntites(dataSource.entities, that._id);
854905
that._cesiumViewer.dataSources.add(dataSource);
855906
deferred.resolve(that);
@@ -859,7 +910,7 @@
859910
} else if (this._urlSuffix == 'czml') {
860911
this._citydbKmlDataSource = new Cesium.CzmlDataSource();
861912

862-
this._citydbKmlDataSource.load(this._url).then(function (dataSource) {
913+
this._citydbKmlDataSource.load(checkProxyUrl(this, this._url)).then(function (dataSource) {
863914
assignLayerIdToDataSourceEntites(dataSource.entities, that._id);
864915
cesiumViewer.dataSources.add(dataSource);
865916
deferred.resolve(that);

0 commit comments

Comments
 (0)