I would like to display 100,000 or more polygons in Cesium. The polygons have a lot of shared boundaries — they are essentially like US zip code polygons but smaller, so there are more of them — so I’d like to use a representation that takes advantage of the shared-boundary topology and only stores each vertex once.
I’m fairly new to programming with Cesium (but familiar with 3D graphics in general); I’ve scanned the tutorials and docs and don’t immediately see a way to create a polygon collection with shared vertices. I have my polygons in a topojson file and tried loading it using code like what is in the topojson example:
var promise = Cesium.GeoJsonDataSource.load('./polygons.topojson');
promise.then(function(dataSource) {
viewer.dataSources.add(dataSource);
...
});
But
- this doesn’t take advantage of the shared vertices because the GeoJsonDataSource converts each individual polygon to a GeoJson object, and
- it crashes my browser, presumably because 100,000 separate GeoJson objects is more than it can handle.
I feel fairly sure (and hopeful) that there is a way to do this in Cesium, but I haven’t found it yet. Can someone tell me what the most effective approach would be, in particular what primitives / loader utilities should I be looking at?
Ultimately, by the way, the application I want to write will never actually render all 100,000 polygons at the same time — it will choose which ones to render based on the mouse position, and at any one time it will only render a few thousand of them. But I want to load them all into memory ahead of time, so that I can change which ones are being rendered in real time as the cursor moves around.