cesium使用MVTImageryProvider加载geoserver发布的矢量切片

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)
      },
    },
  ],
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值