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

// Access Key Here 
Cesium.Ion.defaultAccessToken = "{place your API key here, inside quotations}"; 
// Set up viewer. Imagery provider must be set to false and imagery added later to avoid extra data usage.
var viewer = new Cesium.Viewer("cesiumContainer", {
    imageryProvider: false,
    baseLayerPicker: false,
    sceneModePicker: false,
    timeline: false,
    animation: false,
    terrainProvider: new Cesium.CesiumTerrainProvider({
        url: Cesium.IonResource.fromAssetId(1),
    }),
});
// Make terrain shaded
viewer.scene.globe.depthTestAgainstTerrain = true;
// Load point cloud
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url: Cesium.IonResource.fromAssetId(725345),
    // Make point cloud shaded, only works on desktops and new (2021 +) phones.
    pointCloudShading: {
        attenuation: true,
        maximumAttenuation: 2,
    },
}));
// Now we can add imagery. Here we are using Sentinel 2 @ 10m
var sentinel = viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({
    assetId: 3954
}));
// This is the slope layer. 
var slope = viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({
    assetId: 725737
}));
// This map is by me.
var credit = new Cesium.Credit('By William Wiskes');
viewer.scene.frameState.creditDisplay.addDefaultCredit(credit);
// Set the view.
var home = new Cesium.HeadingPitchRange(60.5, -0.5, 3500.0);
viewer.zoomTo(tileset, home);
// Set the home button.
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(
   function(e) {
      e.cancel = true;
      viewer.zoomTo(tileset, home);
   });
// Make an empty list for styling the point cloud.
var styles = [];
// Define a function for styling the point cloud.
function addStyle(name, style) {
    style.pointSize = Cesium.defaultValue(style.pointSize, 4.0);
    styles.push({
        name: name,
        style: style,
    });
}
// Classify the point cloud
var classify = [
            ["${Classification} === 2", "color('brown')"], // Ground
            ["${Classification} === 9", "color('blue')"], // Water
            ["true", "color('green')"], // Everything else 
        ];
// Display all non-error LiDAR points 
addStyle("All Points", {
    color: {
        conditions: classify
    },
    show: "${Classification} < 10 ", // errors are > 9
});
// Filter to just ground points
addStyle("Ground Points", {
    color: {
        conditions: classify
    },
    show: "${Classification} === 2", // ground
});
// Filter out all points.
addStyle("Slope Only", {
    color: {
        conditions: classify
    },
    show: "${Classification} === 56", // = blank
});
// Function to apply style to the tileset.
function setStyle(style) {
    return function() {
        tileset.style = new Cesium.Cesium3DTileStyle(style);
    };
}
// Loop through the style options adding them to a list. 
var styleOptions = [];
for (var i = 0; i < styles.length; ++i) {
    var style = styles[i];
    styleOptions.push({
        text: style.name,
        onselect: setStyle(style.style), // apply style on select
    });
}
// Add the select menu to the map.
Sandcastle.addToolbarMenu(styleOptions);