cesium加载geoserver发布的mvt服务

news2024/10/2 12:19:52

cesium 本身并不支持矢量切片的加载，所以需要借助其他工具进行解析。在Canvas中把矢量瓦片绘制好了，以图片形式像WMTS一样向Cesium提供图片服务就行了，当然也可以采用中间件的形式在后台把服务渲染好再以服务形式提供给前端。

方法1：

cesium+mapbox，这个方法解析和加载的速度都很快，不过只支持3857和900913，不支持2000坐标系。GitHub上已经有开源的代码MVTImageryProvider，不过这个mapbox是修改过的，和原生的mapbox有区别。关键类src/index.js和src/mapbox-gl.js，示例：example/src/index.js

const provider = new MVTImageryProvider({
  style: maplibreStyle,
  requestTransformFn: (url) => {
    console.log('request tile at: ' + url);
    return {url: url, headers: {'Accept-Language': 'zh-cn'}, credentials: ''};
  }
});
provider.readyPromise.then(() => {
  viewer.imageryLayers.addImageryProvider(provider);
});

maplibreStyle参数传mapbox的style配置（完全按照原生的mapbox写法）。

MVTImageryProvider的渲染源码地址Mapbox-vector-tiles-basic-js-renderer，可以修改这个源码来实现支持2000坐标系。

方法2：

cesium+openlayer，利用openlayer的方法将mvt绘制到canvas上，然后传给cesium进行渲染，这个方法不限制坐标系，支持4490,4326,3857,900913等。