Cesium加载MBTiles矢量切片

20 篇文章 5 订阅

MBTiles 是由 MapBox 制定的一种将瓦片地图数据存储到SQLite数据库中并可快速使用,管理和分享的规范。该规范由MapBox制定,详见http://mapbox.com/mbtiles-spec/。 透过数据库索引的方式提高瓦片索引的效率,比通过瓦片文件方式的读取要快的多。MBTiles其实只是一个SQLite数据库文件,优点在于小,方便迁移,可以存在于移动端。
MBTiles切分后的文件格式为pbf格式,切片坐标形式为z/x/y,在SQLite中存储形式如下:
sqlite> SELECT * FROM tiles;

zoom_level | tile_column | tile_row | tile_data
5 | 13 | 23 | [PNG data]
5 | 13 | 24 | [PNG data]
5 | 14 | 23 | [PNG data]
5 | 14 | 24 | [PNG data]
5 | 15 | 25 | [PNG data]

cesium加载矢量文件通过加载geojson(或者czml等格式,大多通过geojson)来实现。如果geojson数据量太大,会造成绘制缓慢,影响用户体验,并且绘制数量有限度,太大浏览器容易崩溃,所以需要对大数据量geojson进行分级分块。

首先将geojson转换成mbtiles文件,mbtiles文件可以用mapbox的mbview在线查看https://github.com/mapbox/mbview;将mbtiles文件放在examples文件下,执行try.sh,之后浏览器会自动打开一个端口号3000的网址,可以看到mbtiles的切分效果。其实try.sh里面只有两条命令,一个是用npm下载mbview模块,另一条是执行切分命令,所以为了避免每次都要执行下载mbview命令,可以先下载全局mbview模块,以后就可以只执行mbview xxx.mbtiles。

先取第一级的4个pbf文件进行cesium加载,第一级文件分别命名为1.0.0.pbf,1.0.1.pbf,1.1.0.pbf,1.1.1.pbf.然后用nodejs写一个接口服务,解析pbf转成geojson发送到前端。主要解析代码如下:

var dic = 'data/isoline/1.'+i+'.'+j+'.pbf';
            var pbf = fs.readFileSync(dic);
            var tile = new VectorTile(new Protobuf(pbf));
            for (var key in tile.layers) {
                //console.log(key);
                var lyr = tile.layers[key];
                lyr.parsedFeatures = [];
                var features = lyr._features;
                for (var k = 0, len = features.length; k < len; k++) {
                    var vtf = lyr.feature(k);
                    var geojson = vtf.toGeoJSON(i, j, 1);
                    coorArray.push(geojson);
                }
            }

之后在前端通过ajax请求geojson进行分级分块绘制即可。

主要流程为:大geojson->mbtiles->小geojson,通过mbtiles来实现分割。由于cesium的矢量瓦片计划仍在进行中, 目前只能通过这种方式迂回实现,期待能有更好的方式来实现加载大数据矢量。

  • 1
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 14
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

搞GIS图形的sky.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值