Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Alfakhori
M4labplatform
Commits
62fc1f2d
Commit
62fc1f2d
authored
Aug 19, 2022
by
patri
Browse files
update Stadentwicklung
parent
8abf49ad
Changes
4
Hide whitespace changes
Inline
Side-by-side
vcm/css/sliders.css
View file @
62fc1f2d
...
...
@@ -42,6 +42,66 @@
background-color
:
#ad0202
;
}
.OneBLD
{
border-width
:
2px
;
border-radius
:
4px
;
border
:
solid
#121212
;
background-color
:
#f7fbff
;
}
.TwoBLD
{
border-width
:
2px
;
border-radius
:
4px
;
border
:
solid
#121212
;
background-color
:
#deebf7
;
}
.ThreeBLD
{
border-width
:
2px
;
border-radius
:
4px
;
border
:
solid
#121212
;
background-color
:
#c6dbef
;
}
.FourBLD
{
border-width
:
2px
;
border-radius
:
4px
;
border
:
solid
#121212
;
background-color
:
#9ecae1
;
}
.FiveBLD
{
border-width
:
2px
;
border-radius
:
4px
;
border
:
solid
#121212
;
background-color
:
#6baed6
;
}
.SixBLD
{
border-width
:
2px
;
border-radius
:
4px
;
border
:
solid
#121212
;
background-color
:
#4292c6
;
}
.SevenBLD
{
border-width
:
2px
;
border-radius
:
4px
;
border
:
solid
#121212
;
background-color
:
#2171b5
;
}
.EightBLD
{
border-width
:
2px
;
border-radius
:
4px
;
border
:
solid
#121212
;
background-color
:
#08519c
;
}
.NineBLD
{
border-width
:
2px
;
border-radius
:
4px
;
border
:
solid
#121212
;
background-color
:
#08306b
;
}
.NoBLD
{
border-width
:
2px
;
border-radius
:
4px
;
border
:
solid
#121212
;
background-color
:
#008055
;
}
.my-legend
.legend-title
{
text-align
:
left
;
margin-bottom
:
5px
;
...
...
vcm/index.html
View file @
62fc1f2d
...
...
@@ -359,6 +359,54 @@
Geplanten.
</p>
<!-- <p class="contentOne">Vergleich zwischen dem monatlichen Gasamtwärmebedarf der zukünftigen Gebäude und der aktuellen Gebäude.</p> -->
</div>
<button
id=
"men_stadtplanung"
onclick=
"screenspaceErr(true)"
type=
"button"
class=
"collapsible"
>
Stadtplanung
</button>
<div
class=
"content"
>
<h3>
Historische Stadtentwicklung
</h3>
<p
class=
"contentOne"
>
Durch dieses Tool kann das Wachstum der Stadt Stuttgart dargestellt werden.
</a><br>
</p>
<div
onclick=
''
class=
'box-3'
>
<p>
Einfärben
</p><div
class=
'switch'
>
<input
type=
'checkbox'
name=
'toggle'
id=
'chxboxAge'
onclick=
'checkboxAge();'
>
<label
for=
'toggle'
><i></i></label>
<span></span>
</div></div>
<br>
<div
class=
'addition'
>
<div
class=
'legend-title'
>
Baujahre
</div>
<div
class=
'legend-scale addition2'
>
<ul
class=
'legend-labels'
>
<li
class=
"OneBLD"
id=
"OneBld"
><span
class=
"rectangleBld"
style=
'background:#f7fbff;'
></span>
min-1900
</li>
<li
class=
"TwoBLD"
id=
"TwoBld"
><span
class=
"rectangleBld"
style=
'background:#deebf7;'
></span>
1900-1915
</li>
<li
class=
"ThreeBLD"
id=
"ThreeBld"
><span
class=
"rectangleBld"
style=
'background:#c6dbef;'
></span>
1915-1930
</li>
<li
class=
"FourBLD"
id=
"FourBld"
><span
class=
"rectangleBld"
style=
'background:#9ecae1;'
></span>
1930-1945
</li>
<li
class=
"FiveBLD"
id=
"FiveBld"
><span
class=
"rectangleBld"
style=
'background:#6baed6;'
></span>
1945-1960
</li>
<li
class=
"SixBLD"
id=
"FiveBld"
><span
class=
"rectangleBld"
style=
'background:#4292c6;'
></span>
1960-1975
</li>
<li
class=
"SevenBLD"
id=
"FiveBld"
><span
class=
"rectangleBld"
style=
'background:#2171b5;'
></span>
1975-1990
</li>
<li
class=
"EightBLD"
id=
"FiveBld"
><span
class=
"rectangleBld"
style=
'background:#08519c;'
></span>
1990-2005
</li>
<li
class=
"NineBLD"
id=
"FiveBld"
><span
class=
"rectangleBld"
style=
'background:#08306b;'
></span>
2005-max
</li>
<li
class=
"NoBLD"
id=
"NoBld"
><span
class=
"rectangleBld"
style=
'background:#008055;'
></span>
No Building Age
</li>
</ul>
</div>
<!-- <div class='legend-source'>Source: <a href="#link to source">Name of source</a></div> -->
</div>
<br>
<p>
Wachstum kann über einen Slider gezeigt werden:
</p><br>
<div
id =
"slider-step"
></div><br>
<div
id=
"slider-step-value"
></div><br>
</div>
<button
id=
"men_acoustic"
onclick=
"akkustikview()"
type=
"button"
class=
"collapsible"
>
Akustik
</button>
<div
class=
"content"
>
...
...
@@ -1403,6 +1451,7 @@
<script
src=
"js/favoriteplaces.js"
></script>
<script
src=
"js/codepoly.js"
></script>
<script
src=
"js/custom.js"
></script>
<script
src=
"js/cityplanning.js"
></script>
<script
src=
"js/newDevBahn.js"
></script>
<script
src=
"js/cus_Menu.js"
></script>
<script
src=
"js/cus_SimStadt.js"
></script>
...
...
vcm/js/cityplanning.js
0 → 100644
View file @
62fc1f2d
function
checkboxAge
()
{
var
chk_ceil
=
document
.
getElementById
(
"
chxboxAge
"
);
if
(
chk_ceil
.
checked
==
true
)
{
screenspaceErr
(
true
)
BuildingAGE
();
}
else
{
removebuildings
();
}
};
function
BuildingAGE
()
{
screenspaceErr
(
true
)
var
Framework
=
vcs
.
vcm
.
Framework
.
getInstance
();
var
layers
=
Framework
.
getLayers
();
var
layerIndexRosenstein
var
layernameRosenstein
=
[
"
StuttgartLocal
"
]
var
frameworkZus
=
vcs
.
vcm
.
Framework
.
getInstance
();
var
layersZus
=
frameworkZus
.
getLayers
();
for
(
var
i
=
0
;
i
<
layersZus
.
length
;
i
++
)
{
var
layerst
=
layersZus
[
i
];
if
(
layernameRosenstein
.
indexOf
(
layerst
.
name
)
>=
0
)
{
layerIndexRosenstein
=
i
}
}
layer2
=
layers
[
layerIndexRosenstein
];
var
tileset
=
layer2
.
cesium3DTileset
;
if
(
tileset
)
{
tileset
.
style
=
new
Cesium
.
Cesium3DTileStyle
({
color
:
{
conditions
:
[
[
"
Number(${citygml_year_of_construction}) < 1900
"
,
"
color('#f7fbff')
"
],
[
"
Number(${citygml_year_of_construction}) <= 1915
"
,
"
color('#deebf7')
"
],
[
"
Number(${citygml_year_of_construction}) <= 1930
"
,
"
color('#c6dbef')
"
],
[
"
Number(${citygml_year_of_construction}) <= 1945
"
,
"
color('#9ecae1')
"
],
[
"
Number(${citygml_year_of_construction}) <= 1960
"
,
"
color('#6baed6')
"
],
[
"
Number(${citygml_year_of_construction}) <= 1975
"
,
"
color('#4292c6')
"
],
[
"
Number(${citygml_year_of_construction}) <= 1990
"
,
"
color('#2171b5')
"
],
[
"
Number(${citygml_year_of_construction}) <= 2005
"
,
"
color('#08519c')
"
],
[
"
Number(${citygml_year_of_construction}) <= 2020
"
,
"
color('#08306b')
"
],
[
"
true
"
,
"
color('#008055')
"
]
],
},
});
}
var
layerIndexPart
var
layernamePart
=
[
"
StuttgartPart
"
]
var
frameworkPart
=
vcs
.
vcm
.
Framework
.
getInstance
();
var
layersPart
=
frameworkPart
.
getLayers
();
for
(
var
i
=
0
;
i
<
layersPart
.
length
;
i
++
)
{
var
layerPart
=
layersPart
[
i
];
if
(
layernamePart
.
indexOf
(
layerPart
.
name
)
>=
0
)
{
layerPart
.
activate
(
false
);
}
}
// layer3 = layersPart[layerIndexPart];
// var tilesetPart = layer3.cesium3DTileset;
// if (tilesetPart) {
// tilesetPart.style = new Cesium.Cesium3DTileStyle({
// color: {
// conditions: [
// ["${citygml_year_of_construction} === 'DEBW522AA0001fd8a'", "color('#000000FF')"],
// ["${gml_id} === 'DEBW522AA00016448'", "color('#000000FF')"],
// ["true", "color('#000000FF')"],
// ],
// },
// });
// }
// ----------why does this not work?
// for (i = 0; i < id.length - 1; i++){
// idtext = '' + id[i]
// layer.highlight({idtext:Cesium.Color.fromCssColorString("#BB8FCE")})
// console.log("layer.highlight({" + idtext + ":Cesium.Color.fromCssColorString('#BB8FCE')})")
// }
}
var
stepSlider
=
document
.
getElementById
(
'
slider-step
'
);
noUiSlider
.
create
(
stepSlider
,
{
start
:
[
1900
],
step
:
1
,
range
:
{
'
min
'
:
[
1900
],
'
max
'
:
[
2020
]
}
});
var
stepSliderValueElement
=
document
.
getElementById
(
'
slider-step-value
'
);
stepSlider
.
noUiSlider
.
on
(
'
update
'
,
function
(
values
,
handle
)
{
stepSliderValueElement
.
innerHTML
=
"
Gebäude gebaut vor:
"
+
parseInt
(
values
[
handle
]);
BuildingAGEdynamic
(
parseFloat
(
values
[
handle
]))
});
function
BuildingAGEdynamic
(
age
)
{
screenspaceErr
(
true
)
var
Framework
=
vcs
.
vcm
.
Framework
.
getInstance
();
var
layers
=
Framework
.
getLayers
();
var
layerIndexRosenstein
var
layernameRosenstein
=
[
"
StuttgartLocal
"
]
var
frameworkZus
=
vcs
.
vcm
.
Framework
.
getInstance
();
var
layersZus
=
frameworkZus
.
getLayers
();
for
(
var
i
=
0
;
i
<
layersZus
.
length
;
i
++
)
{
var
layerst
=
layersZus
[
i
];
if
(
layernameRosenstein
.
indexOf
(
layerst
.
name
)
>=
0
)
{
layerIndexRosenstein
=
i
}
}
layer2
=
layers
[
layerIndexRosenstein
];
var
tileset
=
layer2
.
cesium3DTileset
;
if
(
tileset
)
{
tileset
.
style
=
new
Cesium
.
Cesium3DTileStyle
({
color
:
{
conditions
:
[
[
"
Number(${citygml_year_of_construction}) <=
"
+
age
+
""
,
"
color('#292a2e')
"
],
[
"
true
"
,
"
color('#B7D9B1','0')
"
]
],
},
});
}
var
layerIndexPart
var
layernamePart
=
[
"
StuttgartPart
"
]
var
frameworkPart
=
vcs
.
vcm
.
Framework
.
getInstance
();
var
layersPart
=
frameworkPart
.
getLayers
();
for
(
var
i
=
0
;
i
<
layersPart
.
length
;
i
++
)
{
var
layerPart
=
layersPart
[
i
];
if
(
layernamePart
.
indexOf
(
layerPart
.
name
)
>=
0
)
{
layerPart
.
activate
(
false
);
}
}}
function
screenspaceErr
(
tf
)
{
var
Framework
=
vcs
.
vcm
.
Framework
.
getInstance
();
var
layers
=
Framework
.
getLayers
();
var
layerIndexRosenstein
var
layernameRosenstein
=
[
"
StuttgartLocal
"
]
var
frameworkZus
=
vcs
.
vcm
.
Framework
.
getInstance
();
var
layersZus
=
frameworkZus
.
getLayers
();
for
(
var
i
=
0
;
i
<
layersZus
.
length
;
i
++
)
{
var
layerst
=
layersZus
[
i
];
if
(
layernameRosenstein
.
indexOf
(
layerst
.
name
)
>=
0
)
{
layerIndexRosenstein
=
i
}
}
layer2
=
layers
[
layerIndexRosenstein
];
if
(
tf
==
true
){
layer2
.
screenSpaceErrorMobile
=
1
layer2
.
screenSpaceError
=
1
}
else
{
layer2
.
screenSpaceErrorMobile
=
32
layer2
.
screenSpaceError
=
16
}
}
\ No newline at end of file
vcm/js/newDevBahn.js
View file @
62fc1f2d
...
...
@@ -4,7 +4,7 @@ var heatdemVal03 = 300
var
heatdemVal04
=
400
function
removebuildings
()
{
screenspaceErr
(
false
)
var
layerIndexStuttgartTotal
var
layerIndexStuttgartBahnhof
var
layernameStuttgartTotal
=
[
"
StuttgartLocal
"
]
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment