MBTiles离线包生成和使用

作者:xinxin

MBTiles是指由MapBox制定的一种将瓦片地图数据存储到SQLite数据库中并可快速使用,管理和分享的规范,而MBTiles离线包是用SuperMap iServer、IExpress生成符合MBTiles规范的地图瓦片。下面主要介绍MBTiles数据的存储格式、生成和使用。
####1、 MBTiles数据的存储格式
MBTiles数据是按照OSGeo的TMS规范来生成和组织的地图瓦片,且支持的图片存储类型为PNG和JPG。目前iServer中只支持PCS_WGS_1984_WORLD_MERCATOR坐标系的地图切成MBTiles瓦片,且最多只能切20级固定比例尺,部分比例尺级别参数如下表所示:
这里写图片描述
MBTiles格式的地图瓦片是通过元数据表“metadata”和tiles视图,map数据表,image数据表一起管理地图瓦片数据。
Metadata元数据表是采用键值对的形式来存储地图瓦片数据的相关设置,包含两个文本类型的字段“name”和“value”,部分元数据表内容如下表所示:
这里写图片描述
Tiles视图包括所有的瓦片数据和用于定位瓦片数据的一些值,它可以减少瓦片冗余,如地图中像海洋或者空旷的土地等区域包含成千上万重复而冗余的纯色瓦片,MBTiles 通过拆分瓦片索引和瓦片原始图像的存储,使用视图的方式来关联二者,这样成千上万的瓦片索引就可以指向同一个瓦片图像,从而大大减少纯色瓦片的冗余存储,提升磁盘利用率以及瓦片检索效率。
Map瓦片索引表包含了用于定位瓦片数据的值和瓦片id,而images瓦片数据表包含瓦片id和瓦片数据。
PS:完整的MBTiles数据格式可以参考iServer联机帮助文档中的【MBTiles与SMTiles 格式的地图瓦片】
####2、 MBTiles数据生成
iServer切MBTiles格式数据步骤如下:
(1) 在iServer中【集群】-【分布式切图】-【创建切图任务】,如下图:
这里写图片描述
(2) 设置切图任务列表中参数,如下图,其中没有切完20级,只切了8级,可根据项目需求设置级别数;
这里写图片描述
(3) 在高级设置中还可以设置一些参数,如下图:
这里写图片描述
(4) 点击【创建切图任务】,显示切图进度,如下图:
这里写图片描述
(5) 切图完毕后,在存储路径下即可找到切图数据。
####3、 MBTiles数据使用
一般SuperMap iClient for Android是用来打开和浏览在线的数据,如果想打开离线数据,目前只能打开和浏览iServer生成的MBTiles离线包。在iClient for Android中打开.mbtiles数据的步骤如下:
(1) 将在iServer中切的MBTiles数据包拷贝到移动端“/sdcard/supermap/sqlite/”目录下,构建图层时可以设置为绝对路径或相对路径,如数据放在移动端的"/sdcard/supermap/sqlite/China.mbtiles",则参数设置为 “supermap/sqlite/China.mbtiles”文件夹,请自行创建或启动apk浏览一次后自动创建;
(2) 在iClient for Android中读取MBTiles数据,在没有网络离线状态下浏览和操作图层,实现关键代码如下:

mapView = (MapView) this.findViewById(R.id.mapview);
MBTilesLayerView mbTilesLayerView = new MBTilesLayerView(this, "supermap/sqlite/China_1595550529_256X256_PNG.mbtiles");
mapView.addLayer(mbTilesLayerView);
mapView.refresh();

####4、 SMTiles格式数据
由于MBTiles格式数据限制性较多,超图推出了一种MBTiles的扩展格式SMTiles,下面是SMTiles与MBTiles格式的区别:
(1) SMTiles命名格式为.smtiles,并支持任意坐标系、任意比例尺,切片的起算原点为任意指定点,行列号的方向为原点开始向左下递增;
(2) SMTiles格式的地图瓦片的存储类型不仅支持PNG、JPG,还支持PNG和JPG混合格式的瓦片;

  • 3
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在Vue中离线加载Mapbox MBTiles,你可以使用Mapbox GL JS插件和Mapbox GL JS Offline插件。下面是一些代码示例: 1. 安装Mapbox GL JS和Mapbox GL JS Offline插件: ``` npm install mapbox-gl mapbox-gl-offline --save ``` 2. 在Vue组件中引入Mapbox GL JS和Mapbox GL JS Offline插件: ```javascript import mapboxgl from 'mapbox-gl'; import 'mapbox-gl/dist/mapbox-gl.css'; import MapboxOffline from 'mapbox-gl-offline'; Vue.use(MapboxOffline); ``` 3. 在Vue组件中定义并加载MBTiles地图: ```javascript <template> <div ref="map" class="map"></div> </template> <script> export default { mounted() { mapboxgl.accessToken = 'your-access-token'; const map = new mapboxgl.Map({ container: this.$refs.map, style: 'mapbox://styles/mapbox/streets-v11', center: [-122.4194, 37.7749], zoom: 12, maxZoom: 18, minZoom: 10, hash: true, customAttribution: '', plugins: [MapboxOffline], }); map.addControl(new mapboxgl.NavigationControl(), 'top-right'); map.on('load', () => { map.addSource('offline', { type: 'offline', tiles: ['path/to/your/tiles/{z}/{x}/{y}.pbf'], minzoom: 10, maxzoom: 18, bounds: [-122.5194, 37.6049, -122.2194, 37.9649], scheme: 'xyz', }); map.addLayer({ id: 'offline-layer', type: 'fill', source: 'offline', paint: { 'fill-color': '#088', 'fill-opacity': 0.4, }, }); }); }, }; </script> <style> .map { height: 100%; width: 100%; } </style> ``` 这个例子中,我们加载了一个名为"offline"的MBTiles地图源,并添加了一个名为"offline-layer"的填充图层。你需要将"tiles"属性中的"path/to/your/tiles"替换为你的MBTiles文件所在的路径。"bounds"属性定义了地图范围,"minzoom"和"maxzoom"属性定义了地图的最小和最大缩放级别。 注意,在上述代码中,我们使用了Mapbox GL JS Offline插件中的"offline"图层类型。这个类型是Mapbox GL JS的一个扩展,是为了支持离线地图加载而创建的。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值