背景

我们经常遇到直接传输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

更小的GIS数据格式-Geobuf的更多相关文章

  1. VMware精简系统Win系列|体积更小更稳定

    此Win系列基于VMware10 给个我自用的超精简VM10.0.3 XP重新制作体积大了一点但更稳定,压缩包166M 制作了Win 2003,压缩包171.4M Win7重新制作体积更小更稳定,压缩 ...

  2. 新型序列化类库MessagePack,比JSON更快、更小的格式

    MessagePack is an efficient binary serialization format. It lets you exchange data among multiple la ...

  3. GIS数据格式:Coverage

    转自:http://www.cnblogs.com/w2william/archive/2009/10/15/1583954.html 我之前做了一个模块,基本实现了ArcCatalog中左边树状结构 ...

  4. GIS数据格式:Shapefile

    转自:http://lab.osgeo.cn/2449.html Shapefile是ESRI提出的数据格式,随着ArcView GIS 3.x发布,属于简单要素类.Shapefile由于其数据结构简 ...

  5. Docker多步构建更小的Java镜像

    译者按: 最新版Docker将支持多步构建(Multi-stage build),这样使用单个Dockerfile就可以定义多个中间镜像用于构建,测试以及发布等多个步骤,并且有效减小最终镜像的大小. ...

  6. Linux没有最小只有更小----迷你Linux版本大集合(转)

    [自从去年到现在已经收集了上百种版本的Linux和Unix,至于Unix就不想说了,没有Linux的功底是很难驾驭Unix的,我在这里只把小于360M的Linux以及一些非Linux但是很像Linux ...

  7. Gradle更小、更快构建APP的奇淫技巧

    本文已获得原作者授权同意,翻译以及转载原文链接:Build your Android app Faster and Smaller than ever作者:Jirawatee译文链接:Gradle更小 ...

  8. Qunar机票技术部就有一个全年很关键的一个指标:搜索缓存命中率,当时已经做到了>99.7%。再往后,每提高0.1%,优化难度成指数级增长了。哪怕是千分之一,也直接影响用户体验,影响每天上万张机票的销售额。 在高并发场景下,提供了保证线程安全的对象、方法。比如经典的ConcurrentHashMap,它比起HashMap,有更小粒度的锁,并发读写性能更好。线程安全的StringBuilder取代S

    Qunar机票技术部就有一个全年很关键的一个指标:搜索缓存命中率,当时已经做到了>99.7%.再往后,每提高0.1%,优化难度成指数级增长了.哪怕是千分之一,也直接影响用户体验,影响每天上万张机 ...

  9. variable fonts - 更小更灵活的字体

    原文链接 variable fonts(下文中vf为缩写)是数字时代制作的字体技术,用更小的文件大小在web上提供更丰富的排版,但是一项新的技术往往伴随着新的挑战和复杂未知的情况.不过,我们要拥抱技术 ...

随机推荐

  1. 快速入门函数式编程——以Javascript为例

    函数式编程是在不改变状态和数据的情况下使用表达式和函数来编写程序的一种编程范式.通过遵守这种范式,我们能够编写更清晰易懂.更能抵御bug的代码.这是通过避免使用流控制语句(for.while.brea ...

  2. day 24 组合的补充

    一.组合的补充: 1.类或对象可以做字典的key 2.对象中到底有什么? # class Foo(object): # # def __init__(self,age): # self.age = a ...

  3. Java通过 Scanner 类来获取用户的输入

    通过 Scanner 类来获取用户的输入. import java.util.Scanner; Scanner s = new Scanner(System.in);// 从键盘接收数据  Syste ...

  4. 关于vue中的videoPlayer的src视频地址参数动态修改(网上一堆错误方法,被误导很久,自己找到了正确的方法,供大家借鉴)

    方法很简单:相信大家的问题应该是改变src的值吧,动态赋值这一步简单.this.playerOptions['sources'][0]['src'] 就是这一步解决提取src问题,主要部分用绿色框起来 ...

  5. SpringMVC配置了拦截器(interceptors)却显示不出css、js样式的解决办法

    首先因为在web.xml里面配置了 <filter-mapping> <filter-name>characterEncodingFilter</filter-name& ...

  6. mysql中给查询出的结果集添加自增序号

    select (@i:=@i+1) i,emp.* from emp,(select @i:=0) it 按部门分组并按薪资总和从大到小排序求薪资总和第二高的部门名称和薪资总和:select c.en ...

  7. SpringBoot写一个登陆注册功能,和期间走的坑

    文章目录 前言 1. 首先介绍项目的相关技术和工具: 2. 首先创建项目 3. 项目的结构 3.1实体类: 3.2 Mapper.xml 3.3 mapper.inteface 3.4 Service ...

  8. Feign超时设置

    转-原文:https://xli1224.github.io/2017/09/22/configure-feign/ 在分析 Feign 源码的时候,我们看到 Feign 构建代理对象是分了几层的,一 ...

  9. PHP自动发红包代码示例

    <?php header('Content-type:text'); define("TOKEN", "weixin"); $wechatObj = ne ...

  10. Caused by: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: REFERENCES command denied to user 'nali'@'localhost' for table 'dbs'

    按照教程 Install hive on Mac with Homebrew,在 mac 上安装 Hive 时, 最后执行 hive 命令后,出现错误: Exception in thread &qu ...