1.目前cesium只能支持3857/900913坐标系的矢量切片数据
2.pnpm add mvt-imagery-provider([https://github.com/hongfaqiu/MVTImageryProvider]
3.加载代码
const imageryProvider: any = new MVTImageryProvider({
style: geoserverStyle as any,
})
// imageryProvider.readyPromise.then(() => {
// viewer.imageryLayers.addImageryProvider(imageryProvider);
// })
viewer.imageryLayers.addImageryProvider(imageryProvider)
4.样式设置(https://juejin.cn/post/6907068992607928328#heading-8)
export const geoserverStyle = {
version: 8,
name: 'point-style',
// sprite: 'http://'+window.location.host+ '/src/assets/img/dingweidianbeifen',
sources: {
'vector-source': {
type: 'vector',
tiles: [
'http://{你的地址}/geoserver/gwc/service/tms/1.0.0/{工作空间:图层名称}@pbf/{z}/{x}/{y}.pbf',
],
scheme: 'tms',//这里填tms
"minzoom": 0, // 最小层级(可选,默认值为 0)
"maxzoom": 22, // 最大层级(可选,默认值为 22)
},
},
layers: [
{
id: 'point-layer',
type: 'circle',
source: 'vector-source',// 这里对应上面source中的key
'source-layer': '1823620338555568129',// 这里是图层的名称
"layout": { // 布局类属性
"visibility": "visible", // 可见性(可选,可选值为 none、visible,默认值为 visible)
},
paint: {
"circle-opacity": 1, // 圆点的不透明度(可选,取值范围为 0 ~ 1,默认值为 1)
"circle-radius": 5, // 圆点的半径(可选,值 >= 0,默认值为 5,单位:像素)
"circle-color": "#000000", // 圆点的颜色(可选,默认值为 #000000)
"circle-blur": 0, // 圆点的虚化(可选,默认值为 0。当值为 1 时,表示把圆虚化到只有圆心是不透明的)
"circle-translate": [0, 0], // 圆点的平移(可选,通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0],单位:像素。)
"circle-translate-anchor": "map", // 圆点的平移锚点,即相对的参考物(可选,可选值为 map、viewport,默认为 map)
"circle-pitch-scale": "map", // 地图倾斜时圆点的缩放(可选,可选值为 map、viewport,默认为 map。值为 viewport 时,圆点不会缩放)
"circle-pitch-alignment": "map", // 地图倾斜时圆点的对齐方式(可选,可选值为 map、viewport,默认为 map)
"circle-stroke-width": 0, // 圆点的描边宽度(可选,值 >= 0,默认值为 0,单位:像素)
"circle-stroke-color": "#000000", // 圆点的描边颜色(可选,默认值为 #000000)
"circle-stroke-opacity": 1 // 圆点的描边不透明度(可选,取值范围为 0 ~ 1,默认值为 1)
},
},
],
}