I wanted to visualize some 3d data points in Cesium but didn't want to set up a server. I downloaded the Cesium-1.34.zip and just unzipped it in my desktop. I then made an .html file that also sits on my desktop and pulls resources from the Cesium-1.34 unzipped folder. I included some example code from http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=PolylineVolume.html&label=Geometries to test it out. The entirety of my code is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="Cesium-1.34/Build/Cesium/Cesium.js"></script>
<style>
@import url(Cesium-1.34/Apps/Sandcastle/templates/bucket.css);
@import url(Cesium-1.34/Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div class="fullSize" id="cesiumContainer"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
imageryProvider: new Cesium.BingMapsImageryProvider({
url : 'http://dev.virtualearth.net',
key : 'al3lvBftgu3T17GnraSB~sDScxf9wA4dopWEvK2swfA~AlwqHWs4LzhiC2oOHAFYe9dZMVQtYCQHRGyC8Y6Hyq9-109ibBI9suhwFj0RoRAp'
})
});
var greenBox1 = viewer.entities.add({
name : 'Green box with beveled corners and outline',
polylineVolume : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights([-90.0, 32.0, 0.0,
-90.0, 36.0, 100000.0,
-94.0, 36.0, 0.0]),
shape :[new Cesium.Cartesian2(-50000, -50000),
new Cesium.Cartesian2(50000, -50000),
new Cesium.Cartesian2(50000, 50000),
new Cesium.Cartesian2(-50000, 50000)],
cornerType : Cesium.CornerType.BEVELED,
material : Cesium.Color.GREEN.withAlpha(0.5),
outline : true,
outlineColor : Cesium.Color.BLACK
}
});
viewer.zoomTo(viewer.entities);
</script>
</body>
</html>
The problem is that the green box that should be appearing on the globe is not there. I don't get any errors from the Developer Tools window. I do get some warnings and messages though:
The message about the key is weird because I'm definitely using my own key in the code, though I don't think that would interfere with the entity not appearing with no errors at all. I'm pretty stumped at this point, I would think if an entity can't be displayed there would be an error, but I got nothing. It might be because it really does need to run on a server. Any hints on what I'm missing or how to draw entities on CesiumJS with just a local configuration?
The Bing key error message is still showing up because you have the Geocoder widget visible (by default) on your viewer, and Geocoder uses the Bing API to do its geocoding. You can fix it by specifying the key up front, before you construct a Cesium.Viewer, like this:
Cesium.BingMapsApi.defaultKey = 'your_key_here';
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
imageryProvider: new Cesium.BingMapsImageryProvider({
url : 'http://dev.virtualearth.net'
})
});
Also, running Cesium directly from the file:// protocol is not supported, because Cesium relies heavily on assets like textures, web worker scripts, JSON files, and so on. A typical browser prevents JavaScript from a file from accessing other files. So instead, Cesium ships with a small server.js file that you can run with NodeJS to get a small development server going locally to host a copy of Cesium. For more details, see Cesium Up and Running.
After following this advice, the "green box" code from your original question should run just fine.