background
We often encounter when directly transmitting gis data to the front-end display, sometimes the data volume is slightly larger, the transmission speed will slow down, because the json format we use for transmission is relatively large.
Introduction to Geobuf
Geobuf is a compact binary code for geographic data. Geobuf compresses GeoJSON data into the protocol buffer almost losslessly. Advantages of using GeoJSON alone: Very compact: usually makes GeoJSON 6-8 times smaller. Even if the gzip size is compared, it is 2-2.5 times smaller. Very fast encoding and decoding-even faster than native JSON parsing/stringification. Can hold any GeoJSON data, including extensions with arbitrary attributes. Easy incremental parsing-get functionality while reading, without having to build an in-memory representation of the entire data. Partial read-read only the part that is actually needed, skip the rest. Unlike Mapbox Vector Tiles, its goal is to compress data sets almost losslessly-without tiling, projecting coordinates, flattening geometry or stripping attributes. "Almost" lossless means that the coordinates are encoded with 6-digit precision (about 10cm) after the decimal point (currently not lossless compression). Please note that the encoding architecture is not yet stable-it may follow community feedback and discover new improvements to it Method change
Geobuf compression
In this article, PostGIS is used for compression (geobuf has multiple compression methods)
select ST_AsGeobuf(sample,'geom') FROM (SELECT id,geom from public."California" ) as sample
Geobuf decompression
The back-end reads the binary and sends it to the front-end, and the front-end uses the two libraries pbf and geobuf to decompress the Geojson
fetch("<http://localhost:8081/geobuf/>")
.then(response => response.arrayBuffer())
.then(buffer => {
var vt = new Pbf(buffer);
var geojson = geobuf.decode(vt);
console.log(JSON.stringify(geojson))
});
Compared

Reference materials:
https://github.com/mapbox/geobuf
https://deck.gl/#/documentation/deckgl-api-reference/layers/tile-layer
This article is reproduced from: https://www.cnblogs.com/polong/p/11532450.html