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;
相关推荐
简cere11 小时前
解决webgl画面虚问题
webgl
空白诗12 小时前
高级进阶 React Native 鸿蒙跨平台开发:slider 滑块组件 - 进度条与评分系统
javascript·react native·react.js
晓得迷路了12 小时前
栗子前端技术周刊第 116 期 - 2025 JS 状态调查结果、Babel 7.29.0、Vue Router 5...
前端·javascript·vue.js
How_doyou_do12 小时前
执行上下文、作用域、闭包 patch
javascript
叫我一声阿雷吧12 小时前
深入理解JavaScript作用域和闭包,解决变量访问问题
开发语言·javascript·ecmascript
iDao技术魔方12 小时前
深入Vue 3响应式系统:为什么嵌套对象修改后界面不更新?
javascript·vue.js·ecmascript
历程里程碑12 小时前
普通数组-----除了自身以外数组的乘积
大数据·javascript·python·算法·elasticsearch·搜索引擎·flask
摸鱼的春哥12 小时前
春哥的Agent通关秘籍07:5分钟实现文件归类助手【实战】
前端·javascript·后端
念念不忘 必有回响12 小时前
viepress:vue组件展示和源码功能
前端·javascript·vue.js
Amumu1213812 小时前
Vue3 Composition API(一)
开发语言·javascript·ecmascript