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

项目中需要基于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;
相关推荐
徐健峰1 天前
Claude Code 安装完全指南(Mac 版):Git、环境变量、PATH 与常见报错一次讲清(2026)
git·macos·arcgis
紫_龙1 天前
最新版vue3+TypeScript开发入门到实战教程之重要详解readonly/shallowReadOnly
前端·javascript·typescript
蓝莓味的口香糖1 天前
【vue】初始化 Vue 项目
前端·javascript·vue.js
aikongmeng1 天前
【Ai】Claude Code 初始化引导
javascript
光影少年1 天前
数组去重方法
开发语言·前端·javascript
我命由我123451 天前
浏览器的 JS 模块化支持观察记录
开发语言·前端·javascript·css·html·ecmascript·html5
weixin_443478511 天前
Flutter第三方常用组件包之路由管理
前端·javascript·flutter
程序员小寒1 天前
JavaScript设计模式(八):命令模式实现与应用
前端·javascript·设计模式·ecmascript·命令模式
Z_Wonderful1 天前
在 Next.js 中,使用 [id] 或 public 作为文件夹或文件名是两种完全不同的概念,分别对应 动态路由 和 静态资源托管
javascript·网络·chrome
妖萌妹儿1 天前
postman怎么做参数化批量测试,测试不同输入组合
开发语言·javascript·postman