Cesium
WebGL Virtual Globe and Map Engine
Requirements
In Gemfile file add line:
gem "cesium"
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
then you are ready to use this gem :) in your main application.js (coffee):
Example:
require [
'jquery'
'Cesium'
], ($, Cesium) ->
$ ->
canvas = $('#globe')[0] # change this to match your needs!!!
@scene = new Cesium.Scene canvas
console.log "scene", @scene
@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)
# transitioner = new Cesium.SceneTransitioner(@scene, ellipsoid)
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()