Faster Rendering of Geojson

1. A concise explanation of the problem you’re experiencing.

Hi. I am tasked with developing the project where i have to show the geojsons when a person zooms in to a specific section. the system will match the center of the screen and see if it is present within the pre defined sections by using Spatial GIS function of ST_Within() of MYSQL and will fetch a prebuilt geojson file to be rendered. This whole process is taking longer than expected and there is a delay of 6-10 secs for the geojsons to be rendered on the cesiumjs is there a way to speed up this process. This is a dummy website in development and the data is being fetched from a live server

P.S I cant use the cesiumjs paid version because of the client restriction.

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

$.ajax({

url: ‘<?php echo site_url("Geojson/fetchgeojsons"); ?>’,

type: ‘post’,

data : {

data0 : y,

data1 : x,

data2 : z,

},

dataType: ‘json’,

success: function(data)

{

if(geojsonsnames.includes(data.block_id)==false)

{

console.time();

geojsonsnames.push(data.block_id);//an array to stop refetching the same (block/section) repeatedly

length=length+1;slength=slength+1;

geojsons[length]=Cesium.GeoJsonDataSource.load(“<?php echo base_url();?>”+data.block_geojson, {

stroke: Cesium.Color.HOTPINK,

fill: Cesium.Color.PINK,

strokeWidth: 3,

markerSymbol: ‘?’

});

geojsons[length].then(function(dataSource0)

{

viewer.dataSources.add(dataSource0);

slength[slength] = dataSource0;

//Get the array of entities

vals = dataSource0.entities.values;

// colordip(vals);

}).otherwise(function(error){

//Display any errrors encountered while loading.

window.alert(error);

});

console.timeLog();

}

}

});

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

The result of the console.timeLog is around 15.315185546875ms but the rendering time is greater than 6-10 secs. Here is the picture of the rendered geojson. Is there a way we can increase the rendering speed. Or even start the rendering of the polygon as soon as the geojson starts arriving at host computer.

4. The Cesium version you’re using, your operating system and browser.

Cesium 1.5, Windows 10, Chrome and Firefox

Block_A_(OS-I).geojson (3.07 MB)

GeoJSON gets loaded into CesiumJS with the entity API, which is asynchronous by default. There’s an open feature request here for exposing an option to make entities synchronous:

https://github.com/CesiumGS/cesium/issues/5127

This is all assuming the issue here is the delay in sending the geometry over to the web worker to be constructed. If the slowdown is simply coming from the large amount of geometry, then your solution would be either to parse the GeoJSON yourself in the client, and create smaller amounts of geometry every frame, or send smaller packets of GeoJSON that get added sequentially to the viewer.

What kind of project are you working on? If it’s a large amount of geometry, 3D Tiles can also make this significantly faster. Can you tell me what the restriction is preventing the client from using Cesium ion or 3D Tiles?

Yes the problem as it seems is in some polygons that are made up of too many points. I think the web worker is taking way too long on those polygons that have too many points in it. What i have noticed is that the GeoJSON is first parsed fully and then rendered.

As the attached GeoJSON shows the polygons have too many points in them. Now my plan of action is to simplify the polygons so that one rectangular polygon has at most 7 points right now one polygon can have points as many as 100. Your advise also is quite good. If the simplification of points cant be done then I will implement your advise.

The client wishes all of the work to be offline and on local server, and right now i am just presenting a proof of concept on a live server to client for testing purposes.

An update on the problem. I achieved faster loading speeds with the following criteria.
1.I utilized the simplify geometry tool of QGIS to simplify the polygons which dramatically reduced the sizes of the GeoJSON from around 4-8 MBs to down to less than 1MB. It is to note that this method reduces the number of points in a polygon. You may have to play around with the values in QGIS for simplification but values around 1e-6 are better.

  1. I started the GeoJSONs loading at a higher zoom level that is around the values of 6k-8k.

  2. Only those GeoJSONs were fetched which were within a specified radius of the mouse pointer position. This function updated on mouse movement end and previously loaded GeoJSONs were not allowed to render again

Hope this helps.

Regards