背景

我们经常遇到直接传输gis数据到前端展示的时候，有时候数据量一稍微多点，传输速度就减慢，因为我们用于传输的json格式比较大。

Geobuf介绍

Geobuf是一种用于地理数据的紧凑二进制编码。

Geobuf 几乎无损地将GeoJSON数据压缩到协议缓冲区中。单独使用GeoJSON的优点：

非常紧凑：通常使GeoJSON小6-8倍。

即使比较gzip大小，也要小2-2.5倍。

非常快速的编码和解码 - 甚至比原生JSON解析/字符串化更快。

可以容纳任何GeoJSON数据，包括具有任意属性的扩展。

轻松增量解析 - 在阅读时获取功能，而无需构建整个数据的内存表示。

部分读取 - 只读取实际需要的部分，跳过其余部分。

与Mapbox Vector Tiles不同，它的目标是几乎无损压缩数据集-无需平铺，投影坐标，展平几何或剥离属性。

“几乎”无损意味着坐标以小数点后的6位数精度（约10cm）编码(目前还不是无损压缩)

请注意，编码架构尚不稳定-它可能会随着得社区反馈并发现改进它的新方法而改变

Geobuf压缩

本文中使用PostGIS进行压缩(geobuf有多种压缩方式)

select ST_AsGeobuf(sample,'geom') FROM (SELECT id,geom from public."California" ) as sample

Geobuf解压

后端读取二进制传给前端，前端使用pbf和geobuf这两个库进行解压得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))

});

对比

数据	geojson	geosjon(gz)	geobuf(gz)
20w面	57.3MB	7.6MB	4.4MB
1w	2.83MB	380kb	218kb

参考资料：

https://deck.gl/#/documentation/deckgl-api-reference/layers/tile-layer

https://github.com/mapbox/geobuf