Loading and Displaying 200,000 Points of Interest

CesiumJS
1

Hello, I'm new to Cesium and JavaScript in general but have done programming in other languages. I have a text file with about 200,000 different sets of coordinates as well as some other information and my goal is to display all of these coordinates as well as draw circles around them. What would be the general process for doing this? Do I import the data with DataSource or CustomDataSource so it forms an entity collection? What kind of data format does the information need to be in to load it?

Any help is appreciated!

2

My experience working with points on that scale is that you would generate PointPrimitives for each of them to reduce overhead (Entities have extra stuff that makes them useful in a lot of cases, but not for points at scale). You can store them all in a PointPrimitiveCollection, which gets attached to the viewer.scene.

The information could be in any format that JavaScript can read, but I personally use JSON objects and then loop through them, generating all of the points.

As for drawing circles around them, I’m not sure exactly what you mean, but you can do things with the outlineColor/outlineSize properties of PointPrimitives to get a nice outline circle.

Note that this is all for relatively geographically sparse sets of points. If you are working with more contained point clouds, you should probably go the 3D Tiles route, with which I’m less familiar.

Let me know if you have any further questions - best of luck!

3

Hi,

We have a blog post on our site that talks about performance tips for displaying a lot of points:

I hope that helps!

Thanks,
Gabby

4

Thanks for the link! I was messing around with point primitives earlier and wasn't able to get it to do exactly what I want so went ahead and coded it up with entities but even with only 1000 points it is too slow.

I need to draw circles around points and want them to be a certain radius that stays constant with respect to the earth even if you zoom in or out. When I was using primitives the number of pixels would stay the same on zooming in or out so the radius of the circle if you were to measure it in meters was changing. Is there any way to do this with point primitives?

This code I wrote does what I want but it uses entities. If you post it here and run it it should work: https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Hello%20World.html&label=Showcases

var viewer = new Cesium.Viewer('cesiumContainer',{
    sceneMode : Cesium.SceneMode.SCENE2D
});

var elliproperties = new Cesium.EllipseGraphics({
         semiMajorAxis : 7585,
         semiMinorAxis : 7585,
         fill : true,
        // distanceDisplayCondition : new Cesium.DistanceDisplayCondition(0,1000000),
         material : Cesium.Color.RED.withAlpha(0.5)
});

function updateSize(size){
    for (var i=0; i<towercollection.values.length; i++){
        towercollection.values[i].ellipse.semiMajorAxis = size;
        towercollection.values[i].ellipse.semiMinorAxis = size;
    }
}

var towercollection = new Cesium.EntityCollection();

var promise = Cesium.GeoJsonDataSource.load(‘https://raw.githubusercontent.com/BootstrapB/CelltowersCesium/master/features.geojson’);
promise.then(function(dataSource) {
    //viewer.dataSources.add(dataSource);

        //Get the array of entities
        var entities = dataSource.entities.values;
        for (var i = 0; i < entities.length; i++) {
            var entity = entities[i];
            var pos = entity.position._value;
            var tower = viewer.entities.add({
                name : 'Tower' + i,
                show: true,
                position : pos,
                ellipse: elliproperties
    });
            towercollection.add(tower);

        }

      }).otherwise(function(error){
        //Display any errrors encountered while loading.
        window.alert(error);
    });

/*
var t1 = viewer.entities.add({
        name : 'Tower 1',
        show: true,
        position : Cesium.Cartesian3.fromDegrees(-88,40),
        ellipse: elliproperties
    });

towercollection.add(t1);

var t2 = viewer.entities.add({
        name : 'Tower 2',
        show : true,
        position : Cesium.Cartesian3.fromDegrees(-88.5,40.5),
        ellipse: elliproperties
    });

towercollection.add(t2);

*/

var options = [{
    text : 'GLN 1 dB',
    onselect : function(){
        updateSize(7585);
                         }
}, {
    text : 'GLN 3 dB',
    onselect : function(){
        updateSize(5220);
                         }
}, {
    text : 'GLN 5 dB',
    onselect : function(){
        updateSize(3500);
                         }
}, {
    text : 'HPR 1 dB',
    onselect : function(){
        updateSize(12010);
                         }
}, {
    text : 'HPR 3 dB',
    onselect : function(){
        updateSize(4275);
                         }
}, {
    text : 'HPR 5 dB',
    onselect : function(){
        updateSize(4275);
                         }
}, {
    text : 'TIM 1 dB',
    onselect : function(){
        updateSize(1130);
                         }
}, {
    text : 'TIM 3 dB',
    onselect : function(){
        updateSize(690);
                         }
}, {
    text : 'TIM 5 dB',
    onselect : function(){
        updateSize(690);
                         }
}];

Sandcastle.addToolbarMenu(options);

5

pixelSize will specify the size of the point: https://cesiumjs.org/Cesium/Build/Documentation/PointPrimitive.html#pixelSize