Cesium
WebGL Virtual Globe and Map Engine
Requirements
In Gemfile file add line:
gem "cesium"
Run the bundle command to install it.
This gem relies on ‘requirejs-rails’ gem.
Make sure you follow the instruction from:
https://github.com/jwhitley/requirejs-rails
and you understand the concept of RequireJS:
http://requirejs.org
Now you are ready to use this gem :-)
Examples
Example 1:
For the convenience there is prepared route that will show you the globe. All you need to do is to modify your route.rb and add:
get 'cesium', to: 'cesium#index'
Now you can see the WebGL globe by visiting:
http://localhost:3000/cesium
Example 2:
Usage of this gem inside your own Rails application.
-
I presume you have a canvas tag in your view with id “globe”:
<div class="fullSize"> <canvas id="globe" class="fullSize"></canvas> </div>
-
You should have some CSS to define canvas size.
Here is an example that shows how to display the globe and cover 100% width & height of the wrapper
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.fullSize {
width: 100%;
height: 100%;
}
-
In the javascript module that is related to the view
Here I use application.js (coffee):
require [
'jquery'
'Cesium'
], ($, Cesium) ->
$ ->
canvas = $('#globe')[0] # change this to match your needs!!!
@scene = new Cesium.Scene canvas
@scene.skyAtmosphere = new Cesium.SkyAtmosphere
skyBoxBaseUrl = '/assets/Assets/Textures/SkyBox/tycho2t3_80'
@scene.skyBox = new Cesium.SkyBox
positiveX: skyBoxBaseUrl + '_px.jpg'
negativeX: skyBoxBaseUrl + '_mx.jpg'
positiveY: skyBoxBaseUrl + '_py.jpg'
negativeY: skyBoxBaseUrl + '_my.jpg'
positiveZ: skyBoxBaseUrl + '_pz.jpg'
negativeZ: skyBoxBaseUrl + '_mz.jpg'
primitives = @scene.getPrimitives()
bing = new Cesium.BingMapsImageryProvider(
url: 'http://dev.virtualearth.net'
mapStyle: Cesium.BingMapsStyle.AERIAL
proxy: if Cesium.FeatureDetection.supportsCrossOriginImagery() then undefined else new Cesium.DefaultProxy('/proxy/')
)
ellipsoid = Cesium.Ellipsoid.WGS84
centralBody = new Cesium.CentralBody(ellipsoid)
centralBody.getImageryLayers().addImageryProvider(bing)
primitives.setCentralBody(centralBody)
new Cesium.SceneTransitioner(@scene, ellipsoid)
##################################################################
# INSERT CODE HERE to create graphics primitives in the scene.
##################################################################
animate = =>
# INSERT CODE HERE to update primitives based on changes to animation time, camera parameters, etc.
tick = =>
@scene.initializeFrame()
animate()
@scene.render()
Cesium.requestAnimationFrame(tick)
tick()
canvas.oncontextmenu = =>
false
onResize = =>
width = canvas.clientWidth
height = canvas.clientHeight
return if canvas.width == width and canvas.height == height
canvas.width = width
canvas.height = height
@scene.getCamera().frustum.aspectRatio = width / height
$(window).on('resize', onResize)
onResize()
Contribution
To write new feature or fix a bug:
We follow git-flow branching model which means:
-
“master” branch should be more less stable
-
“develop” branch is the place to integrate features & bug fixes
More about git-flow: github.com/nvie/gitflow
-
Fork it
-
Clone it
-
*Check out “develop” branch*
-
Create locally feature/fix branch
-
Write code & test it
-
Merge it back into local “develop” branch *as one commit*
-
Test it!
-
Send “pull request” against “develop” branch on github
To report an issue/bug:
-
Please check that the issue you are about to report is not already reported
-
Report it on GitHub Issues:
https://github.com/bogwro/cesium/issues
Maintainers
-
Bogumil Wrona (github.com/bogwro)
License
-
Rails’ Engine & all code which is part of this gem AND not part of the Cesium WebGL Globe:
MIT License.
-
All of the code that is part of Cesium WebGL:
Apache License, Version 2.0
Please check the Cesium website for details:
http://cesium.agi.com
https://raw.github.com/AnalyticalGraphicsInc/cesium/master/LICENSE.md