How to load electronic chart by cesium

CesiumJS
1

How to load electronic chart by cesium.

1 Like
2

What’s an electronic chart?

Cheers,

Alex

3

For S57 vector charts, we use PostGis and GeoServer on our server. For raster charts from NOAA OpenSeaMap or MBTiles we use

s57_4
s57_41920Ă—1072 295 KB

Cesium.OpenStreetMapImageryProvider
noaa_0
noaa_0708Ă—400 433 KB

4

Oh, thanks. I’ll try.

5

Hi @sergemorvan29,

How did you set up your CesiumJS environment to have the toolbox on the left side of your page as shown in the screenshots?

Thanks!
Henry

6

Only with HTML and CSS.

1 Like
7

Not sure about entity, but you can see in czml how you can use html in the description box to make simple charts, see step six here for the file: Introduction to Cesium Stories – Cesium

and in the czml it shows the html for those simple charts

for entity its shows an example of the html here: Creating Entities – Cesium

under entity features in the viewer

8

how to symbol like the first pic?

9

Hi @sergemorvan29 , that looks fantastic…
How did you manage to display S57 vector charts? You already said “we use PostGis and GeoServer on our server” however as I know, CesiumJS doesn’t directly support S57 format, so there need to be a conversion to another format that Cesium supports. I’m not so familiar with PostGIS or GeoServer also, but strill curious about your approach to display the charts

10

Now I see your answer in another thread: NOAA Marine Charts - #10 by sergemorvan29
I understand the overall process. Thanks

11

For S57 maps, you can parse them directly with gdal, the easiest is to use Geoserver, which is based on gdal.
We can thus translate each object in the form of WMS, then with Cesium you can use: Cesium.WebMapServiceImageryProvider.
In France, SHOM provides WFS feeds: Aide | DATA.SHOM.FR, for the markup for example we can use Cesium.GeoJsonDataSource.load(bcncarUrl) to have Billboards.

12

Hi @sergemorvan29
I’m trying to understand overall process again :slight_smile:
You said For S57 vector charts, we use PostGis and GeoServer on our server. in this thread and ...we use GeoServer, with style for each S-57 object. in the other thread.

I’m able to read S57 data into PostGIS as you mentioned, which is a great progress as now I’m able to visually see what is stored in an S57 file a lot easier than before.

Now I’m trying to figure out "...we use GeoServer, with style for each S-57 object." part. Do you mean, for each important feature type (buoy, current, light, etc.) you are able to apply distinct styling? If so, how/where do you define that styling. Can you guide me, even a few keywords or terms are welcome

Update:
I found the solution, which is very easy to implement:

I’m able to set different markers to different attribute values.

13

You can also use the css plugin to specify the GeoServer style

https://docs.geoserver.org/main/en/user/styling/css/install.html

1 Like
14

Is geoserver based on gdal? or geotools?
would you share your s52 style?

15

GeoServer is primarily based on GeoTools, a Java library. GDAL is a widely used C++ library.
Here un example of stylesCss for DEPARE and buoys
/* Style CSS depare */

  • {
    stroke: #000000;
    stroke-width: 0.3;
    fill-opacity: 1;
    }
    [drval1 >= 50]{
    fill: #c6ecff;
    }
    [drval1 >= 40][drval1 < 50]{
    fill: #c6ecff;
    }
    [drval1 >= 30][drval1 < 40]{
    fill: #aae3ff;
    }
    [drval1 >= 20][drval1 < 30]{
    fill: #8ed9ff;
    }
    [drval1 >= 10][drval1 < 20]{
    fill: #71d0ff;
    }
    [drval1 >= 7.5][drval1 < 10]{
    fill: #39bdff;
    }
    [drval1 >= 5][drval1 < 7.5]
    {
    fill: #00aaff;
    }
    [drval1 >= 3][drval1 < 5]{
    fill: #1CB3FF;
    }
    [drval1 >= 2][drval1 < 3]{
    fill: #199ee1;
    }
    [drval1 >= 0][drval1 < 2]{
    fill: #1770bc;
    }
    [drval1 >= -15][drval1 < 0]{
    fill: #97C700;
    }

/* Balisage latéral avec images enregistrées sur geoserver */

  • {
    label: [objnam];

    font-fill:White;
    font-family: Arial;
    font-size: 10;
    font-weight: bold;
    halo-color: Black;
    halo-radius: 0;
    mark-size: 10px;
    mark-rotation: 0;
    }
    /* @title starboard lateral buoy */
    [catlam = 1]{
    mark:url(“BOYLAT_4_1_3_0_5_1.png”);
    mark-mime: “image/png”;

}
/* @title port lateral buoy */
[catlam = 2]{
mark:url(“BOYLAT_4_2_4_0_1_1.png”);
mark-mime: “image/png”;
}
[@sd < 1M] {
label: [objnam];

font-fill:White;
font-family: Arial;
font-size: 10;
font-weight: bold;
halo-color: Black;
halo-radius: 0;
mark-size: 30px;
}