Mapbox矢量瓦片pbf文件信息解析

Mapbox由于配合其矢量瓦片pbf格式文件,有突出的渲染性能,被很多公司和开发者所使用。矢量瓦片的格式有很多种,其中pbf格式是一种二进制文件,直接把数据信息压缩位二进制了。

矢量瓦片优势

主要优势有

  • 数据传输量小
    相对与栅格瓦片数据量大大缩小
  • 不受分辨率影响
    矢量瓦片无论在地图放大到各种级别都是清晰的,都不会出现栅格放大后显示像元的问题。
  • 动态样式
    矢量瓦片会根据用户的定制的样式动态绘制,也可以动态改变
  • 支持前端查询
    由于使用的是矢量瓦片,可以在前端直接进行信息查询

矢量瓦片的问题

矢量瓦片的优势虽然多,但问题也很明显,坐标和属性信息是可以被用户解析的,也就是安全性的问题。

Mapbox的pbf瓦片解析

今天就展示一下,如何解析Mapbox的pbf瓦片文件。这里我是用node.js进行开发和测试的。从Mabox地图的url中抓取了一个pbf文件。

依赖

{
  "name": "testpbf",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "fs": "^0.0.1-security",
    "pbf": "^3.0.5",
    "vector-tile": "^1.3.0"
  }
}

js解析代码

var Pbf = require('pbf');
var fs = require('fs');
var VectorTile = require('vector-tile').VectorTile;

var data = fs.readFileSync('response.pbf');
var tile = new VectorTile(new Pbf(data));

var layerNames = Object.keys(tile.layers);
console.log("图层名称", layerNames);
if (layerNames.length > 0) {
    //获取其中一个图层的一个要素的geoJson格式;
    var orig = tile.layers[layerNames[0]].feature(0).toGeoJSON(0, 0, 1);
    console.log("geojson", orig);
    //查看坐标
    console.log("部分坐标",orig.geometry.coordinates[0]);
}

运行代码

node index.js

 

输出结果

"C:\Program Files\nodejs\node.exe" index.js
图层名称 [ 'dt_xzy' ]
geojson {
  type: 'Feature',
  geometry: { type: 'MultiPolygon', coordinates: [ [Array], [Array], [Array] ] },
  properties: {
    objectid: 5050,
    qhdm: '411525112',
    qhmc: '陈集乡',
    sjxzqdm: '411525',
    bz: ' ',
    provincecode: '41',
    citycode: '4115',
    countycode: '411525',
    uuid: ' ',
    mj: 148351.45
  }
}
部分坐标 [
  [
    [ -110.6103515625, 85.34532513469131 ],
    [ -110.8740234375, 85.19679703289734 ],
    [ -109.775390625, 85.15985908749309 ],
    [ -109.3798828125, 85.05112877980659 ],
   ..........................................
    [ -149.58984375, 84.67351256610525 ],
    [ -148.53515625, 84.68980559853495 ],
    [ -148.447265625, 84.79051706762746 ],
    [ -151.0400390625, 85.01689202162626 ],
    [ -151.0400390625, 85.18205572307536 ],
    [ -154.3359375, 85.34532513469131 ],
    [ -110.6103515625, 85.34532513469131 ]
  ]
]

Process finished with exit code 0

矢量瓦片使用注意

从上面的代码可以看出pbf文件是可以被解析出来的,所以在使用时一定要注意

  • 数据脱敏
  • 坐标数据脱密
  • 防爬虫抓取
  • 5
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 22
    评论
Cesium是一个基于WebGL的3D地图引擎,可以加载各种类型的地理数据。要加载Mapbox矢量瓦片,您可以按照以下步骤进行操作: 1. 获取Mapbox矢量瓦片的URL。您可以在Mapbox Studio中创建和发布矢量瓦片,然后获取其URL。 2. 创建一个Cesium的ImageryProvider对象。您可以使用Cesium的UrlTemplateImageryProvider类来实现这一点,该类可以从一个URL模板加载图像数据。例如: ```javascript var imageryProvider = new Cesium.UrlTemplateImageryProvider({ url: 'https://api.mapbox.com/styles/v1/{username}/{style_id}/tiles/256/{z}/{x}/{y}?access_token={access_token}', credit: 'Mapbox', minimumLevel: 0, maximumLevel: 22, subdomains: ['a', 'b', 'c'], tilingScheme: new Cesium.WebMercatorTilingScheme(), rectangle: Cesium.Rectangle.fromDegrees(-180.0, -85.06, 180.0, 85.06), customTags: { username: 'mapbox', style_id: 'styleid', access_token: 'your_access_token' } }); ``` 在上面的代码中,您需要将URL模板替换为您的Mapbox矢量瓦片的URL,以及您的Mapbox用户名、样式ID和访问令牌。 3. 创建一个Cesium的ImageryLayer图像图层对象,并将ImageryProvider对象作为参数传递给它。例如: ```javascript var imageryLayer = new Cesium.ImageryLayer(imageryProvider); ``` 4. 将ImageryLayer对象添加到Cesium的Viewer视图器中,以便在地图上显示它。例如: ```javascript viewer.imageryLayers.add(imageryLayer); ``` 通过上述步骤,您就可以将Mapbox矢量瓦片加载到Cesium中,实现在3D地图上显示矢量数据的效果。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

GIS开发者

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

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

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

打赏作者

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

抵扣说明:

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

余额充值