cesium添加原生MVT矢量瓦片方案

zhu_zhu_xia2025-07-12 21:44

项目中需要基于cesium接入mvt格式的服务并支持属性拾取查询，通过一系列预研测试，最后选择cesium-mvt-imagery-provider开源插件完成，关键源码信息如下：

javascript 复制代码

npm i cesium cesium-mvt-imagery-provider //安装依赖包

// 加载图层

import CesiumMVTImageryProvider from "cesium-mvt-imagery-provider";

const imageryProvider = new CesiumMVTImageryProvider({
  urlTemplate: "http://localhost:8080/testmvt/{z}/{x}/{y}.mvt",
  layerName: "layerName", // 图层名 必传
  style: feature => { // 图层样式 必传可根据条件分别设置样式
    return {
      strokeStyle: "green",
      fillStyle: "green",
      lineWidth: 1,
    };
  },
  onSelectFeature: feature => {  // 属性拾取事件
    console.log("Feature is selected");
  },
  credit: "cesium.js",
});
viewer.scene.imageryLayers.addImageryProvider(imageryProvider);
//const currentLayer = viewer.scene.imageryLayers.addImageryProvider(imageryProvider);
//currentLayer.alpha = 0.5;