Skip to content

Commit 4368296

Browse files
jkrrvjkrrv
committed
Handling selection issues; starting to assemble dynamic descriptions.
1 parent bb6ba69 commit 4368296

File tree

2 files changed

+103
-11
lines changed

2 files changed

+103
-11
lines changed

‎app/main.js

Lines changed: 87 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,24 @@ requirejs(['Cesium'], function(Cesium) {
9494
};
9595

9696

97+
Pile.prototype.putDescription = function(whereToPutDescription, property) {
98+
console.log(this.peoples);
99+
100+
var description = document.createDocumentFragment();
101+
102+
103+
for (const peopleId in this.peoples) {
104+
if (this.peoples.hasOwnProperty(peopleId)) {
105+
var peopleDiv = document.createElement('div');
106+
peopleDiv.innerHTML = "<h2>" + peopleId + "</h2>";
107+
description.appendChild(peopleDiv);
108+
}
109+
}
110+
111+
112+
whereToPutDescription.description = description.innerHTML;
113+
};
114+
97115

98116
/**
99117
* This class is very closely modeled after the Cesium Data Source example of the same name. It represents the
@@ -350,10 +368,10 @@ requirejs(['Cesium'], function(Cesium) {
350368
var latitude = parseInt(geo.lat);
351369
var longitude = parseInt(geo.lng);
352370

353-
var peoples = new Pile(geo.peoples);
371+
piles[x] = new Pile(geo.peoples);
354372

355373
// TODO make calculation selection a dynamic feature
356-
var heights = peoples.calcHeights(Pile.heightFormat.JPS);
374+
var heights = piles[x].calcHeights(Pile.heightFormat.JPS);
357375
// var heights = peoples.calcHeights(Pile.heightFormat.PROFESS);
358376

359377
// TODO break this into more functions so things are more readily callable when user options are made available.
@@ -369,7 +387,7 @@ requirejs(['Cesium'], function(Cesium) {
369387
// Create Green Bar
370388
if (heights.g > 1) {
371389
entities.add(new Cesium.Entity({
372-
id : "g" + ' index ' + x.toString(),
390+
id : "g " + x.toString(),
373391
show : true,
374392
position: Cesium.Cartesian3.fromDegrees(longitude, latitude, heights.g/2),
375393
cylinder: {
@@ -388,7 +406,7 @@ requirejs(['Cesium'], function(Cesium) {
388406
// Create "SpringGreeen" bar
389407
if (heights.s > 1) {
390408
entities.add(new Cesium.Entity({
391-
id : "s" + ' index ' + x.toString(),
409+
id : "s " + x.toString(),
392410
show : true,
393411
position: Cesium.Cartesian3.fromDegrees(longitude, latitude, heights.g + (heights.s/2)),
394412
cylinder: {
@@ -407,7 +425,7 @@ requirejs(['Cesium'], function(Cesium) {
407425
// Create Yellow bar
408426
if (heights.y > 1) {
409427
entities.add(new Cesium.Entity({
410-
id : "y" + ' index ' + x.toString(),
428+
id : "y " + x.toString(),
411429
show : true,
412430
position: Cesium.Cartesian3.fromDegrees(longitude, latitude, heights.g + heights.s + (heights.y/2)),
413431
cylinder: {
@@ -426,7 +444,7 @@ requirejs(['Cesium'], function(Cesium) {
426444
// Create Orange bar
427445
if (heights.o > 1) {
428446
entities.add(new Cesium.Entity({
429-
id : "o" + ' index ' + x.toString(),
447+
id : "o " + x.toString(),
430448
show : true,
431449
position: Cesium.Cartesian3.fromDegrees(longitude, latitude, heights.g + heights.s + heights.y + (heights.o/2)),
432450
cylinder: {
@@ -445,7 +463,8 @@ requirejs(['Cesium'], function(Cesium) {
445463
// Create Red bar
446464
if (heights.r > 1) {
447465
entities.add(new Cesium.Entity({
448-
id : "r" + ' index ' + x.toString(),
466+
id : "r " + x.toString(),
467+
description: "this is a desc",
449468
show : true,
450469
position: Cesium.Cartesian3.fromDegrees(longitude, latitude, heights.g + heights.s + heights.y + heights.o + (heights.r/2)),
451470
cylinder: {
@@ -492,17 +511,17 @@ requirejs(['Cesium'], function(Cesium) {
492511
//Create a Viewer instances and add the DataSource.
493512
var viewer = new Cesium.Viewer('cesiumContainer', {
494513
animation : false,
495-
timeline : false,
514+
baseLayerPicker : false,
515+
fullscreenButton: false, // wil be manually created later, to put it into the toolbar
496516
geocoder : false,
517+
infoBox: true,
497518
navigationInstructionsInitiallyVisible: false,
498519
imageryProvider: new Cesium.BingMapsImageryProvider({
499520
url : '//dev.virtualearth.net'
500521
}),
501522
skyAtmosphere: false,
502523
skyBox: false,
503-
baseLayerPicker : false,
504-
infoBox: true,
505-
fullscreenButton: false,
524+
timeline : false,
506525
scene: {
507526
globe: {
508527
enableLighting: true
@@ -512,6 +531,35 @@ requirejs(['Cesium'], function(Cesium) {
512531

513532
viewer.infoBox.frame.sandbox = "allow-same-origin allow-top-navigation allow-pointer-lock allow-popups allow-forms allow-scripts";
514533

534+
// Prevent camera from getting locked to entity via double-click
535+
viewer.cesiumWidget.screenSpaceEventHandler.setInputAction(function() {}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
536+
537+
// make selections switch to the intended entity, instead of the actually-clicked entity.
538+
viewer.cesiumWidget.screenSpaceEventHandler.setInputAction(function(movement) {
539+
var clickedOn = viewer.scene.pick(movement.position),
540+
clickedEntity = (Cesium.defined(clickedOn)) ? clickedOn.id : undefined;
541+
if (Cesium.defined(clickedEntity) && Cesium.defined(clickedEntity.cylinder)) {
542+
543+
//TODO select the representative entity here.
544+
viewer.selectedEntity = handleSelection(clickedEntity);
545+
546+
// clickedEntity.cylinder.material = Cesium.Color.WHITE.withAlpha(0.9);
547+
} else {
548+
viewer.selectedEntity = undefined;
549+
}
550+
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
551+
552+
// var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
553+
// handler.setInputAction(function(movement) {
554+
// var pickedPrimitive = viewer.scene.pick(movement.endPosition);
555+
// var pickedEntity = (Cesium.defined(pickedPrimitive)) ? pickedPrimitive.id : undefined;
556+
// // Highlight the currently picked entity
557+
// if (Cesium.defined(pickedEntity) && Cesium.defined(pickedEntity.billboard)) {
558+
// pickedEntity.billboard.scale = 2.0;
559+
// pickedEntity.billboard.color = Cesium.Color.ORANGERED;
560+
// }
561+
// }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
562+
515563
viewer.scene.globe.enableLighting = true;
516564

517565
new Cesium.FullscreenButton(viewer._toolbar);
@@ -549,4 +597,32 @@ requirejs(['Cesium'], function(Cesium) {
549597
nasaCredit = new Cesium.Credit('NASA Socioeconomic Data and Applications Center (SEDAC)', 'assets/nasa-logo.svg', 'http://sedac.ciesin.columbia.edu/data/collection/gpw-v4');
550598
viewer.scene.frameState.creditDisplay.addDefaultCredit(jpCredit);
551599
viewer.scene.frameState.creditDisplay.addDefaultCredit(nasaCredit);
600+
601+
602+
var describedEntities = [],
603+
now = Cesium.JulianDate.now(),
604+
piles = [];
605+
606+
function handleSelection(selectedEntity) {
607+
var pileId = parseInt(selectedEntity.id.split(' ', 2)[1]);
608+
609+
if (describedEntities[pileId] === undefined) {
610+
var position = selectedEntity.position.getValue(now);
611+
position = Cesium.Cartographic.fromCartesian(position);
612+
describedEntities[pileId] = new Cesium.Entity({
613+
id : "DE " + pileId.toString(),
614+
show : true,
615+
position: Cesium.Cartesian3.fromRadians(position.longitude, position.latitude, 0),
616+
seriesName : "DE"
617+
});
618+
619+
describedEntities[pileId].description = "<i class='loading'>Loading...</i>";
620+
621+
piles[pileId].putDescription(describedEntities[pileId], 'description');
622+
}
623+
624+
return describedEntities[pileId];
625+
}
552626
});
627+
628+
var v;

‎style.less

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,22 @@ body {
8989
opacity:.9;
9090
}
9191

92+
.cesium-viewer button.cesium-infoBox-camera {
93+
display:none;
94+
}
95+
96+
97+
/* InfoBox */
98+
.cesium-infoBox, .cesium-infoBox-bodyless .cesium-infoBox-title, .cesium-infoBox-title {
99+
border-radius: 0;
100+
}
101+
.cesium-infoBox-title {
102+
background: rgba(84,84,84,.7);
103+
}
104+
.cesium-infoBox {
105+
background: rgba(38,38,38,.7);
106+
}
107+
92108

93109
/* Cesium Toolbar */
94110
.cesium-viewer-toolbar button.cesium-button {

0 commit comments

Comments
 (0)