Cesiumjs 1.5 clean
A clean demo of Cesiumjs 1.5
HTML
<script src="http://cesiumjs.org/Cesium/Build/CesiumUnminified/Cesium.js"></script>
<div id=cesiumContainer></div>
CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#cesiumContainer, .cesium-viewer,
.cesium-viewer-cesiumWidgetContainer, .cesium-widget,
.cesium-widget canvas {
width: 100%;
height: 100%;
}
.cesium-widget {
position: relative;
}
.cesium-widget,.cesium-widget canvas {
width: 100%;
height: 100%;
touch-action: none;
}
.cesium-widget-credits {
display: block;
position: absolute;
bottom: 0;
left: 0;
color: #fff;
font-size: 10px;
text-shadow: 0px 0px 2px #000000;
padding-right: 5px;
}
.cesium-widget-credits a,
.cesium-widget-credits a:visited {
color: #fff;
}
.cesium-widget-errorPanel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
background: rgba(0, 0, 0, 0.7);
z-index: 99999;
}
.cesium-widget-errorPanel:before {
display: inline-block;
vertical-align: middle;
height: 100%;
content: "";
}
.cesium-widget-errorPanel-content {
width: 75%;
display: inline-block;
text-align: left;
vertical-align: middle;
border: 1px solid #526F82;
border-radius: 7px;
background-color: black;
color: white;
font-size: 10pt;
padding: 1em;
}
.cesium-widget-errorPanel-header {
font-size: 120%;
color: #fe4;
}
.cesium-widget-errorPanel-scroll {
overflow: auto;
font-family: monospace;
white-space: pre-wrap;
padding: 0;
margin: 10px 0;
}
.cesium-widget-errorPanel-buttonPanel {
text-align: center;
}
.cesium-viewer {
font-family: sans-serif;
font-size: 16px;
overflow: hidden;
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.cesium-viewer-cesiumWidgetContainer {
width: 100%;
height: 100%;
}
.cesium-viewer-bottom {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding-right: 5px;
}
.cesium-viewer .cesium-widget-credits {
display: inline;
...
JavaScript
var widget = new Cesium.Viewer('cesiumContainer', {
});
var scene = widget.scene;
var camera = scene.camera;
var instance = new Cesium.GeometryInstance({
geometry : Cesium.PolygonGeometry.fromPositions({
positions : Cesium.Cartesian3.fromDegreesArray([
-25.586875632956662,46.743350477465576,
-25.586875632956663,60.46252943745849,
-11.867696672963744,60.46252943745848,
-11.867696672963745,46.743350477465577
]),
vertexFormat : Cesium.VertexFormat.POSITION_AND_COLOR
}),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
}
});
var instance3 = new Cesium.GeometryInstance({
geometry : Cesium.PolygonGeometry.fromPositions({
positions : Cesium.Cartesian3.fromDegreesArray([
-62.0, 40.0,
-70.0, 35.0,
-45.0, 30.0,
-70.0, 30.0
]),
vertexFormat : Cesium.VertexFormat.POSITION_AND_COLOR
}),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLUE)
}
});
var instance2 = new Cesium.GeometryInstance({
geometry : Cesium.PolygonGeometry.fromPositions({
positions : Cesium.Cartesian3.fromDegreesArray([
-25.586875632956662,46.743350477465576,
-25.586875632956663,60.46252943745849,
-11.867696672963744,60.46252943745848,
-11.867696672963745,46.743350477465577
]),
vertexFormat : Cesium.VertexFormat.POSITION_AND_COLOR
}),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.GREEN)
}
});
var instance4 = new Cesium.GeometryInstance({
geometry : Cesium.PolygonGeometry.fromPositions({
positions : Cesium.Cartesian3.fromDegreesArray([
-62.0, 40.0,
-70.0, 35.0,
-45.0, 30.0,
-70.0, 30.0
]),
vertexFormat : Cesium.VertexFormat.POSITION_AND_COLOR
...