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
{
"type": "FeatureCollection",
"crs" : {
"type" : "name",
"properties" : {
"name" : "EPSG:4326"
}
},
"features": [
{
"type": "Feature",
"properties": {
"name": "Belledonne"
},
"geometry": {
"type": "Point",
"coordinates": [
6.0376739501953125,
45.2405691017678,
2400
]
}
},
{
"type": "Feature",
"properties": {
"name": "Grenoble"
},
"geometry": {
"type": "Point",
"coordinates": [
5.73211669921875,
45.17719676486024,
210
]
}
},
{
"type": "Feature",
"properties": {
"name": "Chartreuse Nord"
},
"geometry": {
"type": "Point",
"coordinates": [
5.9456634521484375,
45.45916739594383,
800
]
}
},
{
"type": "Feature",
"properties": {
"name": "Saint Pierre de Chartreuse"
},
"geometry": {
"type": "Point",
"coordinates": [
5.8124542236328125,
45.343941498218996,
900
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
5.73211669921875,
45.17719676486024,
210
],
[
5.75958251953125,
45.20332826663052,
213
],
[
5.810394287109375,
45.213003555993964,
216
],
[
5.83099365234375,
45.236217535866025,
219
],
[
5.881805419921875,
45.25458854713424,
222
],
[
5.91339111328125,
45.289380486433295,
225
],
[
5.92437744140625,
45.30870012566985,
228
],
[
5.955963134765625,
45.333805815475024,
231
],
[
5.997161865234375,
45.41291242895992,
234
],
[
6.002655029296875,
45.454350939222046,
237
],
[
6.02325439453125,
45.487094732298374,
240
],
[
6.013641357421874,
45.508271755944975,
243
],
[
5.988922119140625,
45.51500822962093,
246
],
[
5.964202880859375,
45.53521281284293,
249
],
[
5.9490966796875,
45.56214096905606,
252
],
[
5.907897949218749,
45.57656146038471,
255
]
]
}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment