Cesium|xt3d模型展开动画
2024-06-05 14:07:47
Cesium|xt3d模型展开动画
- 效果
- 代码
- 预览地址
效果
代码
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>cesium|xt3d</title><!-- 引入Cesium --><script src="https://unpkg.com/cesium@1.84.0/Build/Cesium/Cesium.js"></script><link rel="stylesheet" href="https://unpkg.com/cesium@1.84.0/Build/Cesium/Widgets/widgets.css"><!-- 引入xt3d --><script src="http://www.xt3d.cn/xt3dlib/xt3d.min.js"></script><style>html,body,#map3d {width: 100%;height: 100%;margin: 0px;padding: 0px;}.btn-container {position: absolute;left: 10px;top: 90px;padding: 10px 15px;border-radius: 4px;border: 1px solid rgba(128, 128, 128, 0.5);color: #ffffff;background: rgba(0, 0, 0, 0.4);box-shadow: 0 3px 14px rgb(128 128 128 / 50%);max-width: 300px;}button {background: transparent;border: 1px solid #00d0ffb8;color: white;padding: 7px 9px;border-radius: 2px;margin: 3px;cursor: pointer}.tip-item {margin: 2px 0px;padding: 5px 1px;}</style>
</head><body><div id="map3d"></div><div class="btn-container"><button onclick="openAll()">展开</button><button onclick="mergeAll()">合并</button><button onclick="reset()">还原</button><br />楼层显示<!-- <button v-for="item in 9" :key="item" @click="showFloor(item)">{{item}}层</button> --><div id="showFloorId"></div><button onclick="showFloor(10)">楼顶</button></div></div><script>let xt3dInit = {init(el) {this.initViewer(el);let position = Cesium.Cartesian3.fromDegrees(117.220897, 31.833569, 0);this.floorManager = new xt3d.GltfModel.FloorManager(this.viewer, position, {url: "http://data.mars3d.cn/gltf/mars/floor/floor.glb",heading: 100, //方向topUrl: "http://data.mars3d.cn/gltf/mars/floor/top.glb", // 楼顶的模型count: 9, // 总层数（不含楼顶）spacing: 3 // 每层层高,单位:米});this.setView();},//初始化viewerinitViewer(el) {this.viewer = new Cesium.Viewer(el, {infoBox: false,selectionIndicator: false,navigation: false,animation: false,timeline: false,baseLayerPicker: false,geocoder: false,homeButton: true,sceneModePicker: false,navigationHelpButton: false,shouldAnimate: true,imageryProvider: new Cesium.ArcGisMapServerImageryProvider({url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"})});this.viewer.scene.globe.depthTestAgainstTerrain = true;},//设置视角setView() {let flyToOpts = {destination: {x: -2481036.87502368,y: 4823262.975967688,z: 3344695.295366472},orientation: {heading: 0.1125170896340606,pitch: -0.49591236958988194,roll: 0.0003842833485672159},duration: 1};this.viewer.scene.camera.setView(flyToOpts);},destroy() {this.viewer.entities.removeAll();this.viewer.imageryLayers.removeAll(true);this.viewer.destroy();}}xt3dInit.init("map3d");//展开function openAll() {xt3dInit.floorManager.openAll(3);}function mergeAll() {xt3dInit.floorManager.mergeAll();}function reset() {xt3dInit.floorManager.reset();}//楼层显示按钮let fDiv = document.getElementById("showFloorId");for (let i = 0; i < 9; i++) {let btn = document.createElement("button");fDiv.appendChild(btn);btn.innerHTML = (i + 1) + "层";btn.onclick = e => {showFloor(i + 1);}}function showFloor(num) {xt3dInit.floorManager.showFloor(num);}</script>
</body></html>
预览地址
xt3d 在线预览地址
Cesium|xt3d模型展开动画相关推荐
- Cesium|xt3d卫星正摄动画
Cesium|xt3d卫星正摄动画 效果 代码 预览地址 效果 代码 <!DOCTYPE html> <html lang="zh-CN"><head ...
- cesium 加载模型实现动画效果
加载模型代码: let tileModelTool={longitude: 118.57323,latitude: 32.59386,height: 218.30516,rx: 38.621906,r ...
- Cesium|xt3d 雷达追踪圆锥体
Cesium|xt3d 雷达追踪圆锥体 效果 代码 预览地址 效果 代码 <!DOCTYPE html> <html lang="zh-CN"><he ...
- Cesium|xt3d加载中国地形
Cesium|xt3d加载中国地形 效果 代码 预览地址 效果 代码 <!DOCTYPE html> <html lang="zh-CN"><head ...
- Cesium设置模型朝向速度矢量方向
Cesium设置模型朝向速度矢量方向 文章目录 Cesium设置模型朝向速度矢量方向 1. 需求场景 2. 技术路线 2.1 VelocityOrientationProperty 2.2 Veloc ...
- Cesium|xt3d gltf标绘绘制编辑
Cesium|xt3d gltf标绘绘制编辑 效果 代码 预览地址 效果 代码 <!DOCTYPE html> <html lang="zh-CN">< ...
- 在几何画板中如何制作圆柱的侧面展开动画_基本尺规作图过程展示 | 几何画板...
本期推出几个常见尺规作图示例(由几何画板制作,文末有获得源文件方式): 往期精彩 不容错过 展示圆锥曲线的形成过程 | 几何画板 用VBA批量格式打印座位号 |VBA应用 2020年最新高考过渡时期数 ...
- UNITY 模型与动画优化选项
UNITY 模型与动画优化选项 1,RIG: Optimze Game Objects,[默认是没勾选的] 效果:将骨骼层级从模型中移除,放到动画控制器中,这样性能提高明显.实测中发现原来瞬间加载5个 ...
- 在几何画板中如何制作圆柱的侧面展开动画_倒计时与时钟演示 | 几何画板
本期分享两个计时工具,分别是"倒计时"和"时钟",也是画板爱好者喜欢拿来练手的素材: 倒计时 操作提示:分别上下滑动左侧的四个滑块,设定倒计时时间,然后点击按钮 ...
最新文章
- python 无头模式 绕过检测_Python chrome 无头模式的问题
- python 显示gif图像
- 关于临时表和表变量的差别1
- 【C 语言】数组 ( 多维数组做函数形参退化为指针过程 | int array[2][3] -＞ int array[][3] -＞ int (*array)[3] )
- Spring IoC — 基于注解的配置
- Entity FrameWork 365日系列文章源码研究 （1）
- 数据中心胶体电池的使用寿命
- LSTM股票价格预测
- CNN进行新闻文本分类代码实战，包含分类文本
- 3Dslicer中 PET/CT 模块：PET Standard Uptake Value Computation
- 戴尔笔记本怎么重装系统win11，win11系统安装方法
- WinXPmini仅120MB极为纯净的XP迷你版
- 嵌入式笔试题目及解析
- VS2019的C++项目如何查看源文件(.h,.cc.cpp等)所在的工程
- 开发人员常说的CLI是什么
- 上高职业技术学校计算机学几年,上高县职业技术学校简介|上高县职业技术学校介绍...
- opencv阈值图像Threshold方法
- Sizzle选择器揭秘--Sizzle选择器
- 光晕ce服务器位置,光晕ce地图
- 在北邮做《开源中国说》演讲