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;
相关推荐
threelab1 天前
Three.js 物理模拟着色器 | 三维可视化 / AI 提示词
开发语言·前端·javascript·人工智能·3d·着色器
武器大师721 天前
lv_binding_js 代码解读
开发语言·javascript·ecmascript
Patrick_Wilson1 天前
router.replace 之后紧跟 reload,页面为什么无限刷新?
javascript·react.js·浏览器
mONESY1 天前
JavaScript 栈、队列、数组与链表核心知识点总结
javascript·面试
ZengLiangYi1 天前
TypeScript 项目配置:tsconfig、ESM、路径别名
javascript·typescript·aigc
晓13131 天前
【Cocos Creator 3.x】篇——第二章 入门
前端·javascript·游戏引擎
想要成为糕糕手1 天前
前端必修课:JavaScript 数组与数据结构底层逻辑全解析
javascript·数据结构·面试
xiaofeichaichai1 天前
React Hooks
前端·javascript·react.js
数据知道1 天前
C++ 层拦截:修改 Blink 引擎与 V8 绑定的底层逻辑
javascript·数据采集·指纹浏览器·风控
2301_773643621 天前
ceph镜像
前端·javascript·ceph