Cesium|xt3d视频融合
2024-06-05 02:48:03
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"><script src='http://www.xt3d.cn/libs/turf.min.js'></script><!-- 使用vue绑定控件 --><script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script><link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.5/lib/theme-chalk/index.css"><script src="https://unpkg.com/element-ui@2.15.5/lib/index.js"></script><!-- 引入xt3d --><script src="http://www.xt3d.cn/xt3dlib/xt3d.min.js"></script><style>html,body,#map3d {width: 100%;height: 100%;margin: 0px;padding: 0px;}.form-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}.el-form-item__label {color: white;}</style>
</head><body><div id="map3d"></div><div class="form-container"><video id="video" muted="muted" width="300" controls height="220" src="/data.xt3d.cn/assets/lukou.mp4" autoplay="autoplay" loop></video><div id="formContainer"><el-form ref="form" :model="form" label-width="60px" label-position="left" size="mini"><el-form-item label="翻转"><el-slider v-model="form.rotation.x" :show-tooltip="true" @input="valueChange" :min="-180" :max="180"></el-slider></el-form-item><el-form-item label="旋转"><el-slider v-model="form.rotation.y" :show-tooltip="true" @input="valueChange" :min="-360" :max="360"></el-slider></el-form-item><el-form-item label="夹角"><el-slider v-model="form.fov" :show-tooltip="true" @input="valueChange" :min="1" :max="90"></el-slider></el-form-item><el-form-item label="透明"><el-slider v-model="form.alpha" :show-tooltip="true" @input="valueChange" :step="0.1" :min="0" :max="1"></el-slider></el-form-item><el-form-item label="投影线"><el-switch v-model="form.debugFrustum" @change="setFrustumVisible" active-color="#13ce66" inactive-color="#ff4949"></el-switch></el-form-item></el-form></div></div><script>let xt3dInit = {init(el) {this.initViewer(el);this.load3dtiles();this.setView();},//初始化viewerinitViewer(el) {this.viewer = new Cesium.Viewer(el, {infoBox: false,selectionIndicator: false,navigation: false,animation: false,shouldAnimate: false,timeline: false,baseLayerPicker: false,geocoder: false,homeButton: false,sceneModePicker: false,navigationHelpButton: false,imageryProvider: new Cesium.ArcGisMapServerImageryProvider({url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'})});this.viewer.scene.globe.depthTestAgainstTerrain = true; //默认为false},//设置视角setView() {let flyToOpts = {destination: {x: -1715364.449942997,y: 4993248.386956065,z: 3566686.6600144217},orientation: {heading: 6.005026929302029,pitch: -1.1614799523621118,roll: 6.281017982608725},duration: 1};this.viewer.scene.camera.setView(flyToOpts);},//加载三维模型load3dtiles() {let tileset = this.viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: "http://earthsdk.com/v/last/Apps/assets/dayanta/tileset.json"}));tileset.readyPromise.then(tileset => {xt3d.TilesetPlugin.setTilesetHeight(tileset, 20);}).otherwise(function(error) {console.log(error);});},destroy() {this.viewer.entities.removeAll();this.viewer.imageryLayers.removeAll(true);this.viewer.destroy();}}xt3dInit.init("map3d");let videoEl = document.getElementById("video"); //播放成功的video标签let videoShed3d = new xt3d.VideoPlugin.VideoShed3d(xt3dInit.viewer, {video: videoEl,position: {x: 108.95941714166067,y: 34.219812715439865,z: 72.01781951233912},//旋转参数rotation: {x: -53,y: 3,z: 0},near: 0,far: 240, //距离fov: 12, //张角aspectRatio: 1,alpha: 1, //透明debugFrustum: true //是否显示投影线});//界面控制let vm = new Vue({el: "#formContainer",data() {return {form: {rotation: {}}}},methods: {valueChange() {videoShed3d.updateStyle(this.form);},setFrustumVisible() {videoShed3d.setFrustumVisible(this.form.debugFrustum);}}})vm.form = videoShed3d.getStyle();</script>
</body></html>
预览地址
xt3d 在线预览地址
Cesium|xt3d视频融合相关推荐
- 基于 React hooks + Typescript + Cesium 实现视频融合功能
文章目录 效果截图 功能介绍 实现思路 实现步骤 创建 Camera 作为观察点 创建 ShadowMap 创建视椎体 后期处理 PostProcessStage 着色器代码 使用 CesiumVid ...
- Cesium视频融合
Cesium视频融合 效果图 效果图 详情参见 Cesium实战项目
- WEBGIS开发 常用开发功能简介 数据处理 标绘 业务数据可视化 视频融合 Cesium EarthSDK
WEBGIS开发总结: 本人2020年测绘工程硕士毕业后就参加了某国企研究所做前端开发了,前端三板斧都是跟着网上的网课一点点学习的,因为本人从事行业的关系,很多项目都跟地图开发相关,比如什么仿真系统/ ...
- web三维gis引擎cesium的学习笔记（包含视频融合和动态纹理）
文章目录 web三维gis引擎cesium的学习笔记(包含视频融合和动态纹理) Cesium.Viewer 坐标系 位置方向 官方api文档及示例 Entity API Primitives API ...
- Cesium 视频融合，边缘模糊
之前做视频投影或者叫视频融合,摄像头视角如果是俯视,就好比路口的监控,就可以直接投影在模型上,甚至拼接也好弄,可是摄像头角度是个问题,如果是平时的角度,投影在地上就会完全变形 于是乎就想到了通过分析视 ...
- 01、开启时空克隆之旅 C++三维视频融合实战系列(时空克隆)
几年来,在数字孪生的概念指引下,各行各业的三维可视化项目蓬勃发展,政府也实时提出了打造实景三维中国的目标. 相比于数字孪生,时空克隆有什么不同吗?单从字面意思来讲,什么是孪生?孪生就是我们俗称的双胞胎 ...
- H5视频会议，直播，通话，教学，支持Webrtc、rtmp、sip、rtsp转协议、IPCAM、白板、桌面共享、免插件、web全平台、视频融合系统研发笔记。...
随着互联网深入,视频互通互联的需求越来越多,近些年国家要进一步发展5G网络,手机等设备硬件也越来越好,对视频互通性,及时性,便捷性提出了新的需求. 1,H5-WEB接入,全平台web通用: a.在针对 ...
- Cesium|xt3d 雷达追踪圆锥体
Cesium|xt3d 雷达追踪圆锥体 效果 代码 预览地址 效果 代码 <!DOCTYPE html> <html lang="zh-CN"><he ...
- Cesium|xt3d卫星正摄动画
Cesium|xt3d卫星正摄动画 效果 代码 预览地址 效果 代码 <!DOCTYPE html> <html lang="zh-CN"><head ...
最新文章
- 管理敏捷需求，进行需求协作
- Baidu小窥（一）
- JVM规范系列第2章：Java虚拟机结构
- Spring框架中的设计模式（五）
- windows下面sublime无法粘贴复制的问题解决（转）
- .NET6之MiniAPI(十九)：NLog
- 一篇读懂--mybatis的缓存
- Node.js「一」—— Node.js 简介 / Node.js 模块 / 包 与 NPM
- 长征五号运载火箭将于2019年7月复飞
- Python URL编码
- 二、十六进制数互相转换
- 【5分钟 Paper】Continuous Control With Deep Reinforcement Learning
- 差分形式的阻滞增长模型matlab,差分形式的阻滞增长模型.ppt
- 红米Pro 2016020 2016021通刷官方线刷包_救砖包_解账户锁
- 深富策略短线获利了结为主
- 开发者企业公司 邓白氏公司 D-U-N-S Number
- 狂热之下被遗忘的指标—快充倍率
- 一文熟悉 Go 的循环结构 —— for 循环
- Error Code: 1318. Incorrect number of arguments for PROCEDURE student.new_procedure; expected 0, got
- 聊一聊 C# 后台GC 到底是怎么回事？