Simple example of large number of Cesium points with selection support

eg_point_primitive.js

//
// Run this in the Sandcastle.
//

function randomCoordinateJitter(degree, margin) {
    return degree + margin * (Math.random() - 0.5) / 0.5;
}

const viewer = new Cesium.Viewer("cesiumContainer", {
    terrain: Cesium.Terrain.fromWorldTerrain()
});


// Size of each point
const point_size = 1;

// number of points to generate
const n_points = 1000000;

// The collection of points
let points = new Cesium.PointPrimitiveCollection();

// Add a property to points to track the selected point
points._selected = {p: null, c: new Cesium.Color()};

// Add points to the viewer
viewer.scene.primitives.add(points);

// Create an overlay for showing the point ID
const nameOverlay = document.createElement("div");
viewer.container.appendChild(nameOverlay);
nameOverlay.className = "backdrop";
nameOverlay.style.display = "none";
nameOverlay.style.position = "absolute";
nameOverlay.style.bottom = "0";
nameOverlay.style.left = "0";
nameOverlay.style["pointer-events"] = "none";
nameOverlay.style.padding = "4px";
nameOverlay.style.backgroundColor = "black";


// Deselect a point
function deselect() {
    if (points._selected.p !== null) {
        nameOverlay.style.display = "none";
        points._selected.p.primitive.color = points._selected.c;
        points._selected.p.primitive.pixelSize = point_size;
        points._selected.p = null;
    }
}

// Select a point
function select(pt, position) {
    if (points._selected.p !== null) {
        if (points._selected.p.id === pt.id) {
            return;
        }
        deselect();
    }
    points._selected.p = pt;
    Cesium.Color.clone(pt.primitive.color, points._selected.c);
    points._selected.p.primitive.color = Cesium.Color.YELLOW;
    points._selected.p.primitive.pixelSize = 10;
    nameOverlay.style.display = "block";
    nameOverlay.style.bottom = `${viewer.canvas.clientHeight - position.y}px`;
    nameOverlay.style.left = `${position.x}px`;
    const name = points._selected.p.id;
    nameOverlay.textContent = name;
}


// Generate random points and add to the collection
async function generatePoints() {
    for (var i = 0; i < n_points; i++) {
        let color = Cesium.Color.PINK;
        if ((i % 2) === 0) {
            color = Cesium.Color.CYAN;
        }
        points.add({
            id: i,
            position: Cesium.Cartesian3.fromDegrees(
                randomCoordinateJitter(0.0, 180.0),  //longitude
                randomCoordinateJitter(0.0, 90.0),   //latitude
                randomCoordinateJitter(10000.0, 1000.0), //elevation, m
            ),
            pixelSize: point_size,
            color: color
        });
    }
}

// Handler responding to mouse move events
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
    // Check what is under the mouse cursor
    var pickedObject = viewer.scene.pick(movement.endPosition);
    if (Cesium.defined(pickedObject)) {
        // if the feature is in the points collection...
        if (pickedObject.collection === points) {
            select(pickedObject, movement.endPosition);
        }
    } else {
        deselect();
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);


async function doCreatePoints() {
    console.log("start generating");
    await generatePoints();
    console.log("done generating");
}

// create the points, except delay when we start generating
setTimeout(doCreatePoints, 1000);