GIS开发:GeoJSON文件压缩

简介: GIS开发:GeoJSON文件压缩

GeoJSON是一种对各种地理数据结构进行编码的格式,基于Javascript对象表示法的地理空间信息数据交换格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型:点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性,特征集合表示一系列特征。
GeoJSON就是一种json文件的扩展,地图数据展示,传输到网页前端的时候,越来越多的使用GeoJSON数据,各类地图能够直接使用GeoJSON文件进行解析展示。对于点状的数据,坐标量较少,传输的数据量还可以,但是对于线状和面状数据,涉及到的坐标信息比较多,一个线或者面的geometry,在多的情况下,能达到几百、几千个,这样从服务器传输到客户端的数据,就有几兆或者几十兆,下载时间加长,就会影响客户端的体验度。
数据抽吸(smooth)

在数据精度要求不高的情况,可以对空间矢量进行抽吸,Arcmap、QGIS上都有对应的功能,这个操作是减少空间矢量的点数据,尽量保证空间上的轮廓,这个也能够减少空间数据的数据量。

QGIS的数据抽吸功能
image.png
服务端数据压缩(gzip、deflate)

这个是在服务器端,在数据传输的时候,提前对数据进行压缩,在返回到客户端的数据上,添加对应的数据压缩头,ex:Content-Encodin:gzip,一般的浏览器接收此数据头,能够进行数据的解析。

nodejs数据压缩简单代码

  zlib.gzip(_jsondata, (err, bufferdata) => {

  if (err) throw err;

  fs.writeFile('china.province.json.gz', bufferdata, (err1) => {

   if (err1) throw err1; 

   });

  });

测试压缩5M的GeoJSON数据,压缩完2M左右。

减少无用属性信息

GeoJSON中能够存储对象的对应属性信息,在地图不必要绘制的,可以删除掉,这样能够减少数据量。

相关文章
|
定位技术
Echarts实战案例代码(10):echarts结合世界所有国家地图数据集geojson的(英文翻译映射)解决方案
Echarts实战案例代码(10):echarts结合世界所有国家地图数据集geojson的(英文翻译映射)解决方案
1671 0
Echarts实战案例代码(10):echarts结合世界所有国家地图数据集geojson的(英文翻译映射)解决方案
|
JSON JavaScript 前端开发
shpfile转GeoJSON;控制shp转GeoJSON的精度;如何获取GeoJSON;GeoJSON是什么有什么用;GeoJSON结构详解(带数据示例)
在使用Openlayers、leaflet、mapbox等地图控件的时候,GeoJSON几乎是不可避免打交道的数据类型,如果您想要从事gis行业相关的开发工作,本篇文章应该能为您带来一些帮助。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
前端开发 数据可视化 JavaScript
惊喜! Github 10k+ star 的国产流程图框架,LogicFlow 能解你的图编辑痛点?
LogicFlow 是一款高效、灵活的流程图编辑框架,支持可视化渲染、自定义节点、插件扩展及前端执行。适用于审批流、ER 图、低代码平台等多种场景,具备清晰架构与活跃社区,助力开发者快速实现专业流程图编辑与执行。
2861 1
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
29031 154
|
数据采集 资源调度 JavaScript
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
本文介绍了使用 Vue Flow 绘制流程图的方法与技巧。Vue Flow 是一个灵活强大的工具,适合自定义复杂的流程图。文章从环境要求(Node.js v20+ 和 Vue 3.3+)、基础入门案例、自定义功能(节点与连线的定制、事件处理)到实际案例全面解析其用法。重点强调了 Vue Flow 的高度灵活性,虽然预定义内容较少,但提供了丰富的 API 支持深度定制。同时,文中还分享了关于句柄(handles)的使用方法,以及如何解决官网复杂案例无法运行的问题。最后通过对比 mermaid,总结 Vue Flow 更适合需要高度自定义和复杂需求的场景,并附带多个相关技术博客链接供进一步学习。
|
缓存 前端开发 JavaScript
前端性能优化:提升网页加载速度的10个技巧
【10月更文挑战第25天】在互联网时代,网页加载速度直接影响用户体验和搜索引擎排名。本文介绍了10个提升网页加载速度的技巧,包括减少HTTP请求、启用压缩、使用CDN、延迟加载非关键资源、优化图片、减少重定向、使用浏览器缓存、优化CSS和JavaScript、异步加载JavaScript以及代码分割。通过这些方法,可以显著提高网页性能,改善用户体验。
3649 5
|
前端开发
10分钟弄懂微应用框架——乾坤,真香!
10分钟弄懂微应用框架——乾坤,真香!
986 2
|
JavaScript API 索引
js中的reduce()方法 讲解 和实现
`reduce()` 方法对数组元素依次应用一个回调函数,将结果累计并最终返回单一值。语法为 `reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)`。参数包括累计器(初次为初始值或首元素)、当前元素值、索引及数组自身。此方法需返回值供下一轮迭代使用。常见应用场景包括计算数组总和与平均值、统计元素频率、过滤与转换数组内容及去除重复项等。例如,可通过 `reduce()` 快速计算 `[1, 2, 3, 4, 5]` 的总和或对对象属性值求和。此外,还可自定义实现 `reduce()` 方法
7680 1