Skip to content

Instantly share code, notes, and snippets.

@tonio

tonio/image.png

Last active August 29, 2015 13:57
Show Gist options
  • Save tonio/9759909 to your computer and use it in GitHub Desktop.
Save tonio/9759909 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <!-- Use Chrome Frame in IE -->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Cesium Demo</title>
<script src="http://cesiumjs.org/Cesium/Build/CesiumUnminified/Cesium.js"></script>
<script src="http://ol3js.org/en/master/build/ol.js"></script>
<link rel="stylesheet" href="http://cesiumjs.org/Cesium/Apps/Sandcastle/templates/bucket.css">
<link rel="stylesheet" href="http://ol3js.org/en/master/css/ol.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="cesiumContainer"></div>
<div id="map"></div>
<div id=ctoggle>
<span id=indicator></span>
<button id=toggle>
<span class=d2>2D</span>
<span class=d3>3D</span>
</button>
</div>
<div class="rosace">
<a href="#" id="north">&#8593;</a>
<a href="#" id="east">&#8594;</a>
<a href="#" id="south">&#8595;</a>
<a href="#" id="west">&#8592;</a>
</div>
<div class="rosace" id=pan>
<a href="#" id="p_north">&#8593;</a>
<a href="#" id="p_east">&#8594;</a>
<a href="#" id="p_south">&#8595;</a>
<a href="#" id="p_west">&#8592;</a>
</div>
<script>
var widget = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
fullscreenButton: false,
homeButton: false,
sceneModePicker: false,
selectionIndicator: false,
timeline: false,
animation: false,
geocoder: false
});
var scene = widget.scene;
var camera = scene.camera;
// Add terrain
var terrainProvider = new Cesium.CesiumTerrainProvider({
url : '//cesiumjs.org/stk-terrain/tilesets/world/tiles'
});
widget.scene.terrainProvider = terrainProvider;
// var terrainProvider = new Cesium.EllipsoidTerrainProvider();
// Disable Cesium interactions
var controller = widget.scene.screenSpaceCameraController;
controller.enableInputs = false;
var vectorSource = new ol.source.GeoJSON({
url: 'trucks.json',
projection: 'EPSG:3857'
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 37],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'image.png'
}))
});
// var iconStyle = new ol.style.Style({
// image: new ol.style.Circle({
// radius: 5.5,
// fill: new ol.style.Fill({
// color: '#FF0'
// }),
// stroke: new ol.style.Stroke({
// color: '#000',
// width: 1.2
// })
// })
// });
var lineStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#FF0',
width: 2.5
})
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: [ iconStyle, lineStyle]
});
// Workaround for https://github.com/AnalyticalGraphicsInc/cesium/issues/1603
Cesium.GeoJsonDataSource.prototype.getIsTimeVarying = function() {
return true;
};
var gjds = new Cesium.GeoJsonDataSource();
var defaultPoint = gjds.defaultPoint;
defaultPoint.point = undefined;
var billboard = new Cesium.DynamicBillboard();
billboard.getValue = function() { return 'image.png' };
billboard.image = new Cesium.ConstantProperty('image.png');
billboard.horizontalOrigin = new Cesium.ConstantProperty(Cesium.HorizontalOrigin.CENTER);
billboard.verticalOrigin = new Cesium.ConstantProperty(Cesium.VerticalOrigin.BOTTOM);
billboard.scaleByDistance = undefined;
defaultPoint.billboard = billboard;
gjds.loadUrl('trucks.json').then(function() {
widget.dataSources.add(gjds);
});
var map = new ol.Map({
renderer: 'canvas',
layers: [
new ol.layer.Tile({
source: new ol.source.BingMaps({
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
imagerySet: 'Aerial'
})
}),
vectorLayer
],
target: 'map',
interactions: ol.interaction.defaults({
//altShiftDragRotate: false
}),
view: new ol.View2D({
center: [0, 0],
zoom: 2
})
});
var cext;
var rotation = 0;
var tilted = false;
var view = map.getView().getView2D();
map.on('postcompose', function(event) {
var framestate = event.frameState;
var extent = framestate.extent;
rotation = framestate.view2DState.rotation;
extent = ol.proj.transform(extent, 'EPSG:3857', 'EPSG:4326');
var west = Cesium.Math.toRadians(extent[0]);
var south = Cesium.Math.toRadians(extent[1]);
var east = Cesium.Math.toRadians(extent[2]);
var north = Cesium.Math.toRadians(extent[3]);
cext = new Cesium.Rectangle(west, south, east, north);
camera.viewRectangle(cext);
camera.twistLeft(rotation);
if (tilted) {
setTiltedView(true);
}
});
view.setZoom(11);
view.setCenter([653667.1370353698, 5673479.418388908]);
var setTiltedView = function(down, animate) {
var magicNumber = (down) ? 2.2 : 2.95;
if (down) {
camera.viewRectangle(cext);
camera.twistLeft(rotation);
}
var ellipsoid = Cesium.Ellipsoid.WGS84;
var cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height;
var moveRate = magicNumber * cameraHeight / 100.0;
var rotateRate = .02;
if (!down) {
moveRate = -moveRate;
rotateRate = -rotateRate;
}
var count = 0;
var iterations = 35;
if (animate) {
var id = setInterval(function(){
camera.lookUp(rotateRate);
camera.moveDown(moveRate);
count++;
if (count==iterations) {
clearInterval(id);
}
}, 28);
return;
}
camera.lookUp(iterations*rotateRate);
camera.moveDown(iterations*moveRate);
};
var toggleMapOpacity = function() {
var style = document.getElementById('map').style;
style.opacity = style.opacity || 1;
style.opacity = (style.opacity == 0) ? 1 : 0;
};
document.getElementById('toggle').onclick = function() {
var delay = 1000;
if (tilted) {
setTimeout(toggleMapOpacity, 800);
} else {
toggleMapOpacity();
}
setTiltedView(!tilted, true);
tilted = ! tilted;
var styles = document.getElementById('indicator').style;
styles.left = (tilted) ? '1.5em' : 0;
styles.borderRadius = (tilted) ? '0 4px 4px 0' : '4px 0 0 4px';
document.querySelector('.d2').style.color = (tilted) ? 'black' : 'white';
document.querySelector('.d3').style.color = (!tilted) ? 'black' : 'white';
}
var rotate = function(angle) {
var current = normalize(view.getRotation());
var className;
view.setRotation(current);
var rotate = ol.animation.rotate({
duration: 300,
rotation: view.getRotation()
});
map.beforeRender(rotate);
if ((angle - current) > Math.PI) {
angle -= 2*Math.PI;
}
if ((angle - current) < -Math.PI) {
angle += 2*Math.PI;
}
view.setRotation(angle);
switch(normalize(angle)) {
case 0:
className = '';
break;
case Math.PI:
className = 'south';
break;
case Math.PI/2:
className = 'east';
break;
case Math.PI*1.5:
className = 'west';
break;
}
document.querySelector('.rosace').className = 'rosace ' + className;
};
document.getElementById('north').onclick = function() {
rotate(0);
}
document.getElementById('south').onclick = function() {
rotate(Math.PI);
}
document.getElementById('east').onclick = function() {
rotate(Math.PI/2);
}
document.getElementById('west').onclick = function() {
rotate(Math.PI*1.5);
}
var pan = function(angle) {
var view = map.getView().getView2D();
var resolution = view.getResolution();
var center = view.getCenter();
var rotation = view.getRotation();
var delta = 50 * resolution;
switch(normalize(angle - rotation)) {
case 0:
center = [ center[0], center[1] + delta ];
break;
case Math.PI:
center = [ center[0], center[1] - delta ];
break;
case Math.PI/2:
center = [ center[0] + delta, center[1] ];
break;
case Math.PI*1.5:
center = [ center[0] - delta, center[1] ];
break;
}
var pan = ol.animation.pan({
duration: 300,
source: view.getCenter()
});
map.beforeRender(pan);
view.setCenter(center);
};
var normalize = function(angle) {
if (angle > Math.PI*1.5) {
return angle - Math.PI*2;
}
if (angle < 0) {
return angle + Math.PI*2;
}
return angle;
};
document.getElementById('p_north').onclick = function() {
pan(0);
}
document.getElementById('p_south').onclick = function() {
pan(Math.PI);
}
document.getElementById('p_east').onclick = function() {
pan(Math.PI/2);
}
document.getElementById('p_west').onclick = function() {
pan(Math.PI*1.5);
}
var zoom = document.querySelector('.ol-zoom');
document.body.appendChild(zoom);
zoom.style.top = '6%';
zoom.style.left = '6%';
</script>
</body>
</html>
Raw
style.css
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#map, #cesiumContainer {
position: absolute;
top: 5%;
left: 5%;
height: 90%;
width: 90%;
}
#map {
opacity: 1;
transition: opacity .2s;
}
#ctoggle {
position: absolute;
left: 50%;
margin-left: -1em;
bottom: 10%;
background-color: rgba(255,255,255,0.4);
border-radius: 4px;
width: 3em;
height: 1em;
font-size: 2em;
border: 3px solid rgba(255,255,255,0);
}
#ctoggle span {
width: 50%;
text-align:center;
float:left;
height: 100%;
line-height: 2em;
}
.d2 {
color: white;
}
#indicator {
width: 1.5em;
height: 1em;
background-color: rgba(0,60,136,0.5);
position: absolute;
top: 0;
left: 0;
transition: left 1s;
border-radius: 4px 0 0 4px;
}
#ctoggle button {
padding: 0;
position: absolute;
border: none;
height: 100%;
width: 100%;
background: transparent;
outline: none;
}
.rosace {
position: absolute;
top: calc(6% + 1.325em);
right: calc(6% + 1.325em);
width: 1em;
height: 1em;
font-size: 1.6em;
background-color: rgba(50,110,186,0.5);
}
#pan {
top: calc(6% + 6em);
}
.rosace:after {
content: '➢';
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
font-size: .8em;
color: white;
display: block;
transition: all .3s;
}
.rosace.west:after {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
.rosace.east:after {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.rosace.south:after {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
#pan:after {
content: '';
}
.rosace a {
box-sizing: border-box;
padding: .2em;
position: absolute;
background-color: rgba(50,110,186,0.5);
color: #fff;
font-weight: bold;
font-family: Arial;
text-decoration: none;
text-align: center;
line-height: .8em;
}
.rosace a:hover {
background-color: rgba(0,60,136,0.7);
color: white;
}
a[id*=north], a[id*=south] {
width: 1em;
height: 1.3em;
left: 0;
}
a[id*=north] {
top: -1.3em;
box-shadow: 0 -3px 0 rgba(255,255,255,0.4), 3px 0 0 rgba(255,255,255,0.4), -3px 0 0 rgba(255,255,255,0.4);
border-radius: 4px 4px 0 0;
}
a[id*=south] {
bottom: -1.3em;
outline-top-width: 0;
box-shadow: 0 3px 0 rgba(255,255,255,0.4), 3px 0 0 rgba(255,255,255,0.4), -3px 0 0 rgba(255,255,255,0.4);
border-radius: 0 0 4px 4px;
}
.rosace [id*=west], .rosace [id*=east] {
width: 1.3em;
height: 1em;
top: 0;
line-height: .5em;
}
a[id*=west] {
left: -1.3em;
box-shadow: 0 3px 0 rgba(255,255,255,0.4), 0 -3px 0 rgba(255,255,255,0.4), -3px 0 0 rgba(255,255,255,0.4);
border-radius: 4px 0 0 4px;
}
a[id*=east] {
right: -1.3em;
outline-left-width: 0;
box-shadow: 0 3px 0 rgba(255,255,255,0.4), 0 -3px 0 0 rgba(255,255,255,0.4), 3px 0 0 rgba(255,255,255,0.4);
border-radius: 0 4px 4px 0;
}
Display the source blob
Display the rendered blob
Raw
trucks.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment