Commit a2b6c90c authored by Sven Schneider's avatar Sven Schneider

added colorbar image to display next to pressure sim. legend. updated...

added colorbar image to display next to pressure sim. legend. updated streamlines (point cloud) by fixing an error in stoeckachStreams.js (czml failuer)
parent e15856bf
Pipeline #1071 passed with stages
in 5 seconds
...@@ -34,10 +34,18 @@ ...@@ -34,10 +34,18 @@
<div id="cesiumContainer" class="pagecesium"> <div id="cesiumContainer" class="pagecesium">
<div id="legend"> <div id="legend">
<p>Pressure (Pa) <br> <table>
<h6>Values + 112976</h6> <tr style="height: 30px;vertical-align: top;">
</p> <td colspan="2">Pressure (Pa) </td>
<div class="inner"></div> <td></td>
</tr>
<tr>
<td rowspan="1" style="height:100px;text-align:right;"><img src="imgs/colorbarJET.png" height="100" width="20"> </td>
<td>- 113006<p style="margin-top: 78px;"><p> - 112976</td>
</tr>
</table>
</div> </div>
</div> </div>
......
...@@ -33,12 +33,23 @@ ...@@ -33,12 +33,23 @@
<script src="stoeckachJSONtoTiles.js"></script> <script src="stoeckachJSONtoTiles.js"></script>
<div id="cesiumContainer" class="pagecesium"> <div id="cesiumContainer" class="pagecesium">
<div id="legend"> <!-- <div id="legend">
<p>Pressure (Pa) <br> <p>Pressure (Pa) <br>
<h6>Values + 112976</h6> <h6>Values + 112976</h6>
</p> </p>
<div class="inner"></div> <div class="inner"></div>
</div> </div> -->
<div id="legend">
<table>
<tr style="height: 30px;vertical-align: top;">
<td colspan="2">Pressure (Pa) </td>
<td></td>
</tr>
<tr>
<td rowspan="1" style="height:100px;text-align:right;"><img src="imgs/colorbarJET.png" height="100" width="20"> </td>
<td>- 113006<p style="margin-top: 78px;"><p> - 112976</td>
</tr>
</table>
</div> </div>
......
...@@ -33,12 +33,23 @@ ...@@ -33,12 +33,23 @@
<script src="stoeckachGeoJ.js"></script> <script src="stoeckachGeoJ.js"></script>
<div id="cesiumContainer" class="pagecesium"> <div id="cesiumContainer" class="pagecesium">
<div id="legend"> <!-- <div id="legend">
<p>Pressure (Pa) <br> <p>Pressure (Pa) <br>
<h6>Values + 112976</h6> <h6>Values + 112976</h6>
</p> </p>
<div class="inner"></div> <div class="inner"></div>
</div> </div> -->
<div id="legend">
<table>
<tr style="height: 30px;vertical-align: top;">
<td colspan="2">Pressure (Pa) </td>
<td></td>
</tr>
<tr>
<td rowspan="1" style="height:100px;text-align:right;"><img src="imgs/colorbarJET.png" height="100" width="20"> </td>
<td>- 113006<p style="margin-top: 78px;"><p> - 112976</td>
</tr>
</table>
</div> </div>
......
...@@ -34,11 +34,23 @@ ...@@ -34,11 +34,23 @@
<div id="cesiumContainer" class="pagecesium"> <div id="cesiumContainer" class="pagecesium">
<div id="legend"> <div id="legend">
<table>
<tr style="height: 30px;vertical-align: top;">
<td colspan="2">Pressure (Pa) </td>
<td></td>
</tr>
<tr>
<td rowspan="1" style="height:100px;text-align:right;"><img src="imgs/colorbarJET.png" height="100" width="20"> </td>
<td>- 113006<p style="margin-top: 78px;"><p> - 112976</td>
</tr>
</table>
<!-- <div id="legend">
<p>Pressure (Pa) <br> <p>Pressure (Pa) <br>
<h6>Values + 112976</h6> <h6>Values + 112976</h6>
</p> </p>
<div class="inner"></div> <div class="inner"></div>
</div> </div> -->
</div> </div>
......
...@@ -234,8 +234,8 @@ $(function () { ...@@ -234,8 +234,8 @@ $(function () {
nameOverlay.style.backgroundColor = 'green'; nameOverlay.style.backgroundColor = 'green';
var dataSourcePromise = Cesium.CzmlDataSource.load(czml); // var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise); // viewer.dataSources.add(dataSourcePromise);
/* /*
// Information about the currently selected feature // Information about the currently selected feature
...@@ -440,163 +440,43 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) { ...@@ -440,163 +440,43 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
}, Cesium.ScreenSpaceEventType.MIDDLE_CLICK); }, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);
function showLegend() {
$("#legend").css("display", "block");
}
function hideLegend() {
$("#legend").css("display", "none");
}
// Legend - Colour Table
function emptyColourTable() {
$(".inner").empty();
}
function setHeightTable() {
$(".inner").append( "<table>" +
"<tr><td class='outlined' bgcolor='red'>&nbsp;&nbsp;&nbsp;&nbsp;</td><td> > 3.5 </td></tr>" +
"<tr><td class='outlined' bgcolor='#ff6b21'></td><td> 3 </td></tr>" +
"<tr><td class='outlined' bgcolor='#ffb400'></td><td> 2.5 </td></tr>" +
"<tr><td class='outlined' bgcolor='yellow'></td><td> 2</td></tr>" +
"<tr><td class='outlined' bgcolor='#89FF8F'></td><td> 1.5 </td></tr>" +
"<tr><td class='outlined' bgcolor='cyan'></td><td> 1 </td></tr>" +
"<tr><td class='outlined' bgcolor='blue'></td><td> 0.5 </td></tr>" +
"</table>" );
}
/*
return Cesium.when(tileset.readyPromise).then(function (tileset) {
tileset.style = new Cesium.Cesium3DTileStyle({
color: {
conditions: [
["${Latitude} >= 48.8170", "color('purple', 0.5)"],
["${Latitude} >= 48.7950", "color('red')"],
["${Latitude} >= 48.7830", "color('orange')"],
["${Latitude} >= 48.7710", "color('yellow')"],
["${Latitude} >= 48.7690", "color('lime')"],
["${Latitude} >= 48.7570", "color('cyan')"],
["${Latitude} >= 48.7470", "color('CORNFLOWERBLUE')"],
["${Latitude} >= 48.7370", "color('DARKMAGENTA')"],
["true", "color('lightblue')"]
]
}
});
});
*/
function showLegend() {
$("#legend").css("display", "block");
}
function hideLegend() {
$("#legend").css("display", "none");
}
// Legend - Colour Table
function emptyColourTable() {
$(".inner").empty();
}
/*
function setHeightTable() {
$(".inner").append( "<table>" +
"<tr><td class='outlined' bgcolor='red'>&nbsp;&nbsp;&nbsp;&nbsp;</td><td> 113007 </td></tr>" +
"<tr><td class='outlined' bgcolor='#ff6b21'></td><td> 113001 </td></tr>" +
"<tr><td class='outlined' bgcolor='#ffb400'></td><td> 112996 </td></tr>" +
"<tr><td class='outlined' bgcolor='yellow'></td><td> 112991</td></tr>" +
"<tr><td class='outlined' bgcolor='#00ff00'></td><td> 112986 </td></tr>" +
"<tr><td class='outlined' bgcolor='cyan'></td><td> 112981 </td></tr>" +
"<tr><td class='outlined' bgcolor='blue'></td><td> 112976 </td></tr>" +
"</table>" );
}
*/
/*
function setHeightTable() {
$(".inner").append( "<table>" +
"<tr><td class='outlined' bgcolor='red'>&nbsp;&nbsp;&nbsp;&nbsp;</td><td> x </td></tr>" +
"<tr><td class='outlined' bgcolor='green'></td><td> y </td></tr>" +
"<tr><td class='outlined' bgcolor='blue'></td><td> z </td></tr>" +
"</table>" );
}
*/
function setHeightTable() {
$(".inner").append( "<table>" +
"<tr><td class='outlined' bgcolor='red'>&nbsp;&nbsp;&nbsp;&nbsp;</td><td> > 3.5 </td></tr>" +
"<tr><td class='outlined' bgcolor='#ff6b21'></td><td> 3 </td></tr>" +
"<tr><td class='outlined' bgcolor='#ffb400'></td><td> 2.5 </td></tr>" +
"<tr><td class='outlined' bgcolor='yellow'></td><td> 2</td></tr>" +
"<tr><td class='outlined' bgcolor='#89FF8F'></td><td> 1.5 </td></tr>" +
"<tr><td class='outlined' bgcolor='cyan'></td><td> 1 </td></tr>" +
"<tr><td class='outlined' bgcolor='blue'></td><td> 0.5 </td></tr>" +
"</table>" );
}
return Cesium.when(tileset.readyPromise).then(function (tileset) {
tileset.style = new Cesium.Cesium3DTileStyle({
color: "color('white',1)",
/*color: { return Cesium.when(tileset.readyPromise).then(function (tileset) {
tileset.style = new Cesium.Cesium3DTileStyle({
conditions: [
color: "color('white',1)",
['Number(${MeasuredHeight}) >= 40', 'rgb(255,0,0)'],
['Number(${MeasuredHeight}) >= 30.', 'rgb(255, 93 , 0)'],
['Number(${MeasuredHeight}) >= 25', 'rgb(255, 180, 0)'],
['Number(${MeasuredHeight}) >= 20', 'rgb(255,255,0)'],
['Number(${MeasuredHeight}) >= 15', 'rgb(0,255,0)'],
['Number(${MeasuredHeight}) >= 10', 'rgb(0,0,255)'],
['Number(${MeasuredHeight}) >= 7.5', 'rgb(75, 0, 130)'],
['Number(${MeasuredHeight}) >= 4', 'rgb(248, 100, 221)'],
['Number(${MeasuredHeight}) >= 0.1', 'rgb(248, 100, 221)'],
['true', 'color("lightblue")'] });
showLegend();
] setHeightTable();
});
}
*/
});
showLegend();
setHeightTable();
});
/*
return Cesium.when(tileset.readyPromise).then(function (tileset) {
tileset.style = new Cesium.Cesium3DTileStyle({
color: {
conditions: [
['Number(${YearOfConstruction}) >= 2015', 'rgb(127,201,127)'],
['Number(${YearOfConstruction}) >= 2005', 'rgb(190,174,212)'],
['Number(${YearOfConstruction}) >= 1990', 'rgb(253,192,134)'],
['Number(${YearOfConstruction}) >= 1975', 'rgb(255,255,153)'],
['Number(${YearOfConstruction}) >= 1950', 'rgb(56,108,176)'],
['Number(${YearOfConstruction}) >= 1920', 'rgb(240,2,127)'],
['Number(${YearOfConstruction}) >= 1900', 'rgb(191,91,23)'],
['Number(${YearOfConstruction}) >= 1800', 'rgb(102,102,102)'],
['true', 'color("lightblue")']
]
}
});
}); */
}); });
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment