Cesium加载矢量瓦片技术路线

一、概述

cesium加载矢量文件通过加载geojson（或者czml等格式，大多通过geojson）来实现。如果geojson数据量太大，会造成绘制缓慢，影响用户体验，并且绘制数量有限度，太大浏览器容易崩溃。

cesium可通过MVTImageryProvider组件库加载mapbox-gl样式的pbf矢量瓦片矢量。

相比较于加载cesium自带的geojson，此方法有以下几个好处：

（1）MVT是基于矢量的，所以它能够在不同的缩放级别下保持图标和文本的清晰度，这对于用户在地图上进行导航和识别特定地点非常有用。

（2）MVT数据通常比传统的光栅地图数据（如PNG或JPEG格式）要小，这意味着更快的加载时间和更低的带宽需求，从而提供更流畅的用户体验。

（3）MVTImageryProvider 还支持样式化，开发者可以通过定义样式来控制地图的显示效果，如颜色、大小和布局等。这为创建定制化的地图提供了极大的灵活性。

MVTImageryProvider可以帮助开发者创建高效、可定制且用户友好的地图应用，可对现有的基于cesium开发的产品在矢量数据支持上有非常大的提升。

• 实现方法

此部分通过讲解矢量数据瓦片处理，样式配图、瓦片服务发布、前端瓦片加载显示这4个步骤实现是量瓦片数据加载至cesium的技术流程。

2.1、矢量数据瓦片处理

数据下载

下载全量矢量数据

OpenStreetMap: https://planet.openstreetmap.org/pbf/planet-latest.osm.pbf

数据整编

osm.pbf    抽取指定图层

osmium-tool  //可指定属性字段、数据类型、抽取范围

数据切片

tilemaker制作mbtiles

使用 tilemaker 生成地图服务-CSDN博客

指定JSON配置和Lua脚本config-openmaptiles.json、process-openmaptiles.lua两个文件。

tilemaker --output china.mbtiles --input china.osm.pbf  --config config-openmaptiles.json  --process process-openmaptiles.lua --bbox 57.216796875,1.31824,138.2519,56.41390

【第三章 数据格式】osm.pbf转mbtiles格式 - 知乎

2.2样式配图

使用使用 openmaptiles 的样式，tileserver-gl默认，也可以自己视情况修改配置。

2.3瓦片服务发布

安装tileserver-gl

GitHub - maptiler/tileserver-gl: Vector and raster maps with GL styles. Server side rendering by MapLibre GL Native. Map tile server for MapLibre GL JS, Android, iOS, Leaflet, OpenLayers, GIS via WMTS, etc.

npm install -g tileserver-gl

发布自己的mbtiles矢量切片文件

tileserver-gl --file osm-2020-02-10-v3.11_asia_taiwan.mbtiles

服务预览

http://IP:8080/

2.4前端瓦片加载显示

安装mvt-imagery-provider

GitHub - hongfaqiu/MVTImageryProvider: Mapbox vector tiles(pbf) visulization on cesium

#npm

npm install --save mvt-imagery-provider

#pnpm

pnpm add mvt-imagery-provider

前端引入MVTImageryProvider，实例化后加载至cesium场景viewer对象。

MVTImageryProvider.fromUrl('http://192.168.53.16:8080/styles/basic-preview/style.json').then(provider => {

  const imageryLayer = viewer.imageryLayers.addImageryProvider(provider as any);

});

运行Demo

pnpm install

cd example

pnpm dev

下载台湾前14级osm矢量瓦片数据mbtiles加载至cesium后显示效果如下：

http://IP:5173/