网站中的文章可以做排名吗南平做网站

网站中的文章可以做排名吗,南平做网站,配色相关网站,网站建设与管理管理课程在 Cesium 可视化开发中#xff0c;卷帘对比是常用功能#xff0c;可用于 3D Tiles 模型、影像图层的左右分屏对比#xff0c;支持动态调整分割比例。 ​ 本文基于 Cesium 1.41 版本的 SplitDirection 特性#xff0c;从核心原理、到代码实现#xff0c;带着大家实现一下c…在 Cesium 可视化开发中卷帘对比是常用功能可用于 3D Tiles 模型、影像图层的左右分屏对比支持动态调整分割比例。​本文基于 Cesium 1.41 版本的SplitDirection特性从核心原理、到代码实现带着大家实现一下cesium卷帘对比效果。欢迎大家一起交流学习。​2025cesium进阶教程持续更新中...前篇回顾2025cesium进阶教程|Cesium 天气特效实现从 ShaderToy 移植下雪效果的完整方案_shadertoy和cesium如何结合-CSDN博客https://blog.csdn.net/yaogis888/article/details/154843181?spm1001.2014.3001.5502Cesium进阶教程2|基于 Cesium 后处理Post Processing的图形绘制上-CSDN博客https://blog.csdn.net/yaogis888/article/details/154994782?spm1001.2014.3001.5502Cesium进阶教程2|基于 Cesium 后处理Post Processing的图形绘制下-CSDN博客https://blog.csdn.net/yaogis888/article/details/154995091?spm1001.2014.3001.55022025Cesium进阶教程3 发光流动线实例讲解实现自定义 MaterialProperty上_cesium.createpropertydescriptor-CSDN博客https://blog.csdn.net/yaogis888/article/details/155226305?spm1001.2014.3001.55012025Cesium进阶教程3 发光流动线实例讲解实现自定义 MaterialProperty下_cesium流动线-CSDN博客https://blog.csdn.net/yaogis888/article/details/155227354?spm1001.2014.3001.55012025Cesium进阶教程4| 动态响应的发光流动线实例讲解-CSDN博客https://blog.csdn.net/yaogis888/article/details/155483412?spm1001.2014.3001.55012025Cesium进阶教程5| webgis智慧城市开发大屏可视化行政区高亮-CSDN博客https://blog.csdn.net/yaogis888/article/details/155575623?spm1001.2014.3001.5501一、核心功能与原理概括1.SplitDirection 核心功能支持 3D Tiles / 影像图层的左右分屏对比指定目标图层仅在左侧或右侧显示提供可视化分割线支持鼠标拖拽交互动态调整分屏比例解决拖拽偏移误差确保分割线移动流畅、位置精准。2. 实现原理核心依赖 Cesium 两个关键配置splitDirection指定图层显示侧左 / 右和splitPosition控制分割位置取值 0-1通过创建 DOM 元素作为分割线绑定鼠标 “按下 - 移动 - 抬起” 事件动态计算并更新splitPosition实现分屏比例的实时调整引入偏移修正逻辑通过记录鼠标初始点击位置避免拖拽时分割线突然跳转。二、效果实现1依赖引入与场景初始化使用Cesium库创建一个3D地球视图并配置了基础控件和地形加载功能。同时引入dat.gui库通常用于调试参数调节并设置Cesium的Ion访问令牌。Cesium初始化配置import*asCesiumfromcesium;import*asdatfromdat.gui;import{ token }from../lib/token;Cesium.Ion.defaultAccessToken token;constviewer newCesium.Viewer(container, {timeline:true,// 显示时间线控件animation:false,// 隐藏动画控件baseLayerPicker:false,// 隐藏底图切换控件infoBox:false,// 隐藏要素点击信息框selectionIndicator:false,// 隐藏选中元素指示器homeButton:false,// 隐藏复位按钮fullscreenButton:false,// 隐藏全屏按钮geocoder:false,// 隐藏地理编码搜索控件sceneModePicker:false,// 隐藏二三维模式切换控件shouldAnimate:true,// 启用动画效果必填navigationHelpButton:false,// 隐藏导航帮助按钮地形加载配置terrainProvider:newCesium.CesiumTerrainProvider({url:Cesium.IonResource.fromAssetId(1),// 加载地形可选}), });关键渲染设置viewer.scene.globe.depthTestAgainstTerraintrue;// 开启地形深度测试23D Tiles 加载与卷帘基础配置使用CesiumJS库加载并控制一个3D Tiles模型同时实现卷帘对比效果。以下是逐部分解析加载3D Tiles模型consttileset newCesium.Cesium3DTileset({url:http://localhost:666/model/AGI_HQ/tileset.json,// 3D Tiles 模型地址}); viewer.scene.primitives.add(tileset);// 将模型添加到场景等待模型加载完成awaittileset.readyPromise;设置模型位置// 定义模型位置经纬度114.3°E30.5°N高度 30mconstmodelMatrix Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(114.3,30.5,30.0) ); tileset._root.transform modelMatrix;// 应用模型位置变换视角控制viewer.zoomTo(tileset);卷帘效果实现// 核心卷帘参数配置tileset.splitDirectionCesium.SplitDirection.LEFT; viewer.scene.splitPosition0.5;3可视化分割线创建于在网页中创建一条3:1比例的可视化分割线支持自定义颜色和样式。constslider document.createElement(div);document.querySelector(#container).appendChild(slider); slider.idslider;// 分割线样式配置slider.style.displayblock; slider.style.positionabsolute;// 绝对定位相对于 containerslider.style.top0; slider.style.height100%;// 高度占满容器slider.style.width5px;// 分割线宽度便于点击拖拽slider.style.backgroundColor#fff;// 白色分割线slider.style.cursorcol-resize;// 鼠标悬浮显示左右拖拽样式slider.style.zIndex1000;// 确保分割线在最上层slider.style.left50%;// 初始位置与 splitPosition 一致4鼠标拖拽事件绑定交互逻辑实现基于Cesium.js的屏幕分割交互功能通过鼠标拖拽控制场景分屏比例。核心功能包括拖拽状态管理、分割位置计算、界面元素同步更新。变量定义consthandler newCesium.ScreenSpaceEventHandler(slider);letisDragging false;// 拖拽状态标记默认未拖拽letstartX;// 记录鼠标按下时的初始 X 坐标修正拖拽偏移鼠标按下事件// 鼠标左键按下事件开启拖拽handler.setInputAction((movement) { isDragging true; startX movement.position.x;// 记录鼠标按下时的初始 X 坐标},Cesium.ScreenSpaceEventType.LEFT_DOWN);鼠标移动事件// 鼠标移动事件更新分割位置handler.setInputAction((movement) {if(!isDragging)return;// 未拖拽时不执行任何操作constendPosition movement.endPosition;// 鼠标当前位置// 计算新的分割位置0-1 范围constsplitPosition (slider.offsetLeft endPosition.x- startX) / slider.parentElement.offsetWidth;// 限制 splitPosition 范围在 0-1 之间避免超出屏幕constclampedSplitPosition Cesium.Math.clamp(splitPosition,0,1);// 更新场景分屏位置和分割线样式viewer.scene.splitPosition clampedSplitPosition; slider.style.left${clampedSplitPosition *100}%; },Cesium.ScreenSpaceEventType.MOUSE_MOVE);鼠标释放事件// 鼠标左键抬起事件结束拖拽handler.setInputAction(() { isDragging false; },Cesium.ScreenSpaceEventType.LEFT_UP);看不明白没关系点这里可以查看视频解析2025Cesium进阶教程5| webgis智慧城市开发大屏可视化行政区高亮-CSDN博客https://blog.csdn.net/yaogis888/article/details/155575623?spm1001.2014.3001.5501