|
|
|
# Visualization in Cesium
|
|
|
|
|
|
|
|
As a first visualization, one journey will be visualized in Cesium. The docking station as start and end point of the journey will be drawn as a point symbol on the map. The journey itself will be done by an animation over time between start and end docking station. For reasons of simplicity, the interpolation will be a straight line between start and end, not following a street.
|
|
|
|
|
|
|
|
The following journey will be used as an example:
|
|
|
|
|
|
|
|
|
|
|
|
## How the get started with Cesium
|
|
|
|
Cesium has a nice development and test environment online available, the Cesium Sandcastle: https://cesiumjs.org/tutorials/Sandcastle-Tutorial/. No need to install anything for now.
|
|
|
|
|
|
|
|
## How to draw a point
|
|
|
|
A good starting point is the CZML Point example in the Sandcastle: https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=CZML%20Point.html&label=CZML
|
|
|
|
|
|
|
|
The start Station "Drury Lane" has the WGS 84 coordinates lat 51.51477, lon -0.122219. The End Station "Frith Street" has coordinates lat 51.513103, lon -0.131213.
|
|
|
|
|
|
|
|
The following code draws a white circle with red outline at location lat 51.513103, lon -0.131213 on the map.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
var czml = [{
|
|
|
|
"id" : "document",
|
|
|
|
"name" : "CZML Point",
|
|
|
|
"version" : "1.0"
|
|
|
|
}, {
|
|
|
|
"id" : "point 1",
|
|
|
|
"name": "point",
|
|
|
|
"position" : {
|
|
|
|
"cartographicDegrees" : [-0.131213, 51.513103, 0]
|
|
|
|
},
|
|
|
|
"point": {
|
|
|
|
"color": {
|
|
|
|
"rgba": [255, 255, 255, 255]
|
|
|
|
},
|
|
|
|
"outlineColor": {
|
|
|
|
"rgba": [255, 0, 0, 255]
|
|
|
|
},
|
|
|
|
"outlineWidth" : 4,
|
|
|
|
"pixelSize": 20
|
|
|
|
}
|
|
|
|
}];
|
|
|
|
|
|
|
|
var viewer = new Cesium.Viewer('cesiumContainer');
|
|
|
|
var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
|
|
|
|
viewer.dataSources.add(dataSourcePromise);
|
|
|
|
viewer.zoomTo(dataSourcePromise);
|
|
|
|
```
|
|
|
|
|
|
|
|
Two stations will be drawn by adding a second variable with a point to the data source. The name of the variable will be the ID for the docking station to avoid dublicate variable names.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
var BikePoints_18 = [{
|
|
|
|
"id" : "document",
|
|
|
|
"name" : "BikePoints_18",
|
|
|
|
"version" : "1.0"
|
|
|
|
}, {
|
|
|
|
"id" : "BikePoints_18",
|
|
|
|
"name": "Drury Lane",
|
|
|
|
"position" : {
|
|
|
|
"cartographicDegrees" : [-0.131213, 51.513103, 0]
|
|
|
|
},
|
|
|
|
"point": {
|
|
|
|
"color": {
|
|
|
|
"rgba": [255, 255, 255, 255]
|
|
|
|
},
|
|
|
|
"outlineColor": {
|
|
|
|
"rgba": [255, 0, 0, 255]
|
|
|
|
},
|
|
|
|
"outlineWidth" : 4,
|
|
|
|
"pixelSize": 20
|
|
|
|
}
|
|
|
|
}];
|
|
|
|
|
|
|
|
var BikePoints_383 = [{
|
|
|
|
"id" : "document",
|
|
|
|
"name" : "BikePoints_383",
|
|
|
|
"version" : "1.0"
|
|
|
|
}, {
|
|
|
|
"id" : "BikePoints_383",
|
|
|
|
"name": "Frith Street",
|
|
|
|
"position" : {
|
|
|
|
"cartographicDegrees" : [-0.122219, 51.51477, 0]
|
|
|
|
},
|
|
|
|
"point": {
|
|
|
|
"color": {
|
|
|
|
"rgba": [255, 255, 255, 255]
|
|
|
|
},
|
|
|
|
"outlineColor": {
|
|
|
|
"rgba": [255, 0, 0, 255]
|
|
|
|
},
|
|
|
|
"outlineWidth" : 4,
|
|
|
|
"pixelSize": 20
|
|
|
|
}
|
|
|
|
}];
|
|
|
|
|
|
|
|
var viewer = new Cesium.Viewer('cesiumContainer');
|
|
|
|
var dataSourcePromise = Cesium.CzmlDataSource.load(BikePoints_18);
|
|
|
|
viewer.dataSources.add(dataSourcePromise);
|
|
|
|
viewer.dataSources.add(Cesium.CzmlDataSource.load(BikePoints_383));
|
|
|
|
viewer.zoomTo(dataSourcePromise);
|
|
|
|
```
|
|
|
|
|
|
|
|
The example is stored at
|
|
|
|
```javascript
|
|
|
|
https://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=7a2950439019cd3e1b95ddac40749046
|
|
|
|
```
|
|
|
|
### Exercise: Possible extensions
|
|
|
|
* To draw an bike icon on the circle, a texture can be used. A texture is an images drapped on a geometry.
|
|
|
|
* Instead of a circle with texture, a billboard and label or a map pin can be used.
|
|
|
|
* How can a "non complete" outline be drawn?
|
|
|
|
|
|
|
|
See Cesium tutorial and CZML-Guide at https://github.com/AnalyticalGraphicsInc/czml-writer/wiki/CZML-Guide
|
|
|
|
|
|
|
|
## How to draw a moving point
|
|
|
|
|
|
|
|
In this example, an additional point is inserted that shows the bike trip from "Drury Lane" to "Frith Street" animated over time. A linear interpolation between two points will be applied:
|
|
|
|
|
|
|
|
```math
|
|
|
|
P(t) = (1-t) P_0 + t P_1, 0 \leq t \leq 1
|
|
|
|
```
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
var rental_50754225 = [{
|
|
|
|
"id" : "document",
|
|
|
|
"name" : "Rental 50754225 Time Dynamic",
|
|
|
|
"version" : "1.0"
|
|
|
|
}, {
|
|
|
|
"id" : "point",
|
|
|
|
"availability" :"2016-01-10T00:00:00Z/2016-01-10T00:04:00Z",
|
|
|
|
"position" : {
|
|
|
|
"epoch" : "2016-01-10T00:00:00Z",
|
|
|
|
"cartographicDegrees" : [
|
|
|
|
0, -0.122219, 51.51477, 0,
|
|
|
|
240, -0.131213, 51.513103, 0
|
|
|
|
]
|
|
|
|
},
|
|
|
|
"point" : {
|
|
|
|
"color" : {
|
|
|
|
"rgba" : [0, 255, 0, 128]
|
|
|
|
},
|
|
|
|
|
|
|
|
"pixelSize" : 10
|
|
|
|
}
|
|
|
|
}];
|
|
|
|
```
|
|
|
|
|
|
|
|
The full example can be found here:
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
https://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=800c2ee131420b86bed21b3a033574f3
|
|
|
|
```
|
|
|
|
|
|
|
|
### Exercise
|
|
|
|
|
|
|
|
Use the given bike journey data set and develop a workflow that automatically generates a visualization showing all docking stations and all journey data sets. The workflow has to be done fully automatic as the data set is too large for manual work (too time consuming)
|
|
|
|
|
|
|
|
Solution:
|
|
|
|
https://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=8c075605fbf51c250291ace544061c07 |
|
|
\ No newline at end of file |
