-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcesium.html
118 lines (95 loc) · 4.06 KB
/
cesium.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<DOCTYPE html>
<head>
<title>Hello Cesium!</title>
<script src="Build/Cesium/Cesium.js"></script>
<script src="js/requestData.js"></script>
<style>
@import url(Build/Cesium/Widgets/widgets.css);
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.toolbar-left {
display: block;
position: absolute;
top: 5px;
left: 5px;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
"use strict";
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3NmQ2NmVmNy0zZGY4LTQ1ZDAtYmUwOC03MjkzM2JjNzQ2OTQiLCJpZCI6MTU2NjMsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1Njg1MjQwNTl9.siDvMt3fH91XzE39FU_xqVrx-i6M1wWOBl_2vCrY6Xo';
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3NmQ2NmVmNy0zZGY4LTQ1ZDAtYmUwOC03MjkzM2JjNzQ2OTQiLCJpZCI6MTU2NjMsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1Njg1MjQwNTl9.siDvMt3fH91XzE39FU_xqVrx-i6M1wWOBl_2vCrY6Xo';
let imageryProviders = Cesium.createDefaultImageryProviderViewModels();
let selectedImageryProviderIndex = 7; // MapBox Street is 5th in the list.
let viewer = new Cesium.Viewer('cesiumContainer', {
imageryProviderViewModels: imageryProviders,
selectedImageryProviderViewModel: imageryProviders[selectedImageryProviderIndex]
});
// only load the layer when the cesium basemap has been created
document.addEventListener('DOMContentLoaded', function () {
loadVectorLayer();
}, false);
</script>
<script>
"use strict";
async function loadVectorLayer() {
// get the data - NB this assumes that the API is running
//the following code is adapted from
// https://cesium.com/learn/cesiumjs/ref-doc/GeoJsonDataSource.html
let user_id = await getUserId();
let res = await getData(`/api/geojson/userAssets/${user_id}`);
let assets = res[0];
// set up color of different condition description
let conditions = await getData('/api/geojson/conditionDetails');
let pointColor;
// the following code is adapted from
//https://www.w3schools.com/jsref/jsref_forEach.asp
//THE color choice is adapted from
//https://cesium.com/learn/cesiumjs/ref-doc/Color.html?classFilter=color
assets.features.forEach((feature) => {
if (feature.properties.condition_description == conditions[0].condition_description) {
pointColor = Cesium.Color.LIGHTSKYBLUE
}
else if (feature.properties.condition_description == conditions[1].condition_description) {
pointColor = Cesium.Color.BLUE
}
else if (feature.properties.condition_description == conditions[2].condition_description) {
pointColor = Cesium.Color.BLUEVIOLET
}
else if (feature.properties.condition_description == conditions[3].condition_description) {
pointColor = Cesium.Color.CHOCOLATE
}
else if (feature.properties.condition_description == conditions[4].condition_description) {
pointColor = Cesium.Color.GOLD
}
else if (feature.properties.condition_description == conditions[5].condition_description) {
pointColor = Cesium.Color.DARKGRAY
}
let geoJSONOptions = {
markerColor: pointColor,
markerSymbol: '*',
}
// add data
let dataSource = new Cesium.GeoJsonDataSource("Assets");
dataSource.clampToGround = false;
dataSource._name = "Assets";
viewer.dataSources.add(dataSource)
dataSource.load(feature, geoJSONOptions).then(function (dataSource) {
viewer.flyTo(dataSource);
});
});
}
</script>
</html>