技术标签: 前端 vue.js javascript
实现思路主要是通过 Knockout 实现了对输入值的监听,当输入值发生变化时,分别执行不同的操作来实现模型的变换
参考沙盒案例:3D Tiles Adjust Height - Cesium Sandcastle
<!--
* @Description:
* @Author: yiyi
* @Date: 2023-12-14 16:19:44
* @LastEditTime: 2024-01-05 10:06:27
* @LastEditors: yiyi
* 加油搞起来
-->
<template>
<div id="cesiumContainer"></div>
<div id="toolbar" ref="toolbar" style="position: absolute;left: 0;
top: 0;z-index: 99;background-color: #fff;width: 500px;">
<div>Scale</div>
<a-row>
<a-col :span="12">
<a-slider v-model:value="inputValue.scale" :min="0" :max="10" :step="1" @change="changeScale" />
</a-col>
<a-col :span="4">
<a-input-number v-model:value="inputValue.scale" :min="0" :max="10" :step="1" style="margin-left: 16px" />
</a-col>
</a-row>
<div>Height-offset</div>
<a-row>
<a-col :span="12">
<a-slider v-model:value="inputValue.height" :min="0" :max="10" :step="1" @change="changeRotateH" />
</a-col>
<a-col :span="4">
<a-input-number v-model:value="inputValue.height" :min="0" :max="10" :step="1" style="margin-left: 16px" />
</a-col>
</a-row>
<div>RotateX</div>
<a-row>
<a-col :span="12">
<a-slider v-model:value="inputValue.RotateX" :min="0" :max="10" :step="1" @change="changeRotateX" />
</a-col>
<a-col :span="4">
<a-input-number v-model:value="inputValue.RotateX" :min="0" :max="10" :step="1" style="margin-left: 16px" />
</a-col>
</a-row>
<div>RotateY</div>
<a-row>
<a-col :span="12">
<a-slider v-model:value="inputValue.RotateY" :min="0" :max="10" :step="1" @change="changeRotateY" />
</a-col>
<a-col :span="4">
<a-input-number v-model:value="inputValue.RotateY" :min="0" :max="10" :step="1" style="margin-left: 16px" />
</a-col>
</a-row>
<div>RotateZ</div>
<a-row>
<a-col :span="12">
<a-slider v-model:value="inputValue.RotateZ" :min="0" :max="10" :step="1" @change="changeRotateZ" />
</a-col>
<a-col :span="4">
<a-input-number v-model:value="inputValue.RotateZ" :min="0" :max="10" :step="1" style="margin-left: 16px" />
</a-col>
</a-row>
</div>
</template>
<script setup>
import { onMounted, reactive, ref, toRaw } from 'vue';
import * as Cesium from 'cesium';
import { RotateZ, RotateY, RotateX, RotateH } from './utils/move';
const inputValue = reactive({
scale: 0,
height: 0,
RotateX: 0,
RotateY: 0,
RotateZ: 0
});
const toolbar = ref(null);
let viewer, tileset, m;
onMounted(() => {
// cesium 初始化
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ZDJiYWZjNy01YWIzLTQ5MDQtOWRjMC1lNzRjMzZlNDkxZjgiLCJpZCI6MTYzNzI4LCJpYXQiOjE2OTM0NzM4NTZ9.TZLI1V4-2pYZoVSbt-zOkV7Yx7elhjAsqfFt5h4Nrlk';
//加载影像图层
const esri = new Cesium.ArcGisMapServerImageryProvider({
url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
enablePickFeatures: false,
layer: "img",
style: "default",
tileMatrixSetID: "w",
format: "tiles",
maximumLevel: 18,
});
window.viewer = viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain({
requestVertexNormals: true,
requestWaterMask: true
}),
imageryProvider: esri,
shouldAnimate: true, //是否允许动画
selectionIndicator: false,
baseLayerPicker: false,
fullscreenButton: false,
geocoder: false,
homeButton: false,
infoBox: false,
sceneModePicker: false,
timeline: false,
navigationHelpButton: false,
navigationInstructionsInitiallyVisible: false,
showRenderLoopErrors: false,
shadows: false,
});
// 显示帧率
viewer.scene.debugShowFramesPerSecond = true;
viewer._cesiumWidget._creditContainer.style.display = "none"; //去除版权信息
viewer.scene.globe.depthTestAgainstTerrain = true;
const origin = Cesium.Cartesian3.fromDegrees(117.22089726144343, 31.833569328835598, 60);
const modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(origin);
window.tileset = tileset = viewer.scene.primitives.add(
Cesium.Model.fromGltf({
id: 'site', // 模型id
position: origin, // 模型位置
url: '../public/Cesium_Air.glb',
show: true, // default
scale: 2.0, // double size
maximumScale: 20000, // never larger than 20000 * model size (overrides minimumPixelSize)
allowPicking: true,
modelMatrix: modelMatrix,
minimumPixelSize: 128,//最小像素大小,可以避免太小看不见
})
);
m = tileset.modelMatrix;
tileset.readyPromise.then(function (e) {
var boundingSphere = tileset.boundingSphere;
viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0.0, -0.5, boundingSphere.radius * 2));
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
});
Cesium.knockout.applyBindings(inputValue, toolbar.value);
});
const changeRotateZ = (v) => {
RotateZ(v, m);
};
const changeRotateY = (v) => {
RotateY(v, m);
};
const changeRotateX = (v) => {
RotateX(v, m);
};
const changeRotateH = (v) => {
RotateH(v, m);
};
const changeScale = (v) => {
tileset.scale = v;
};
</script>
<style scoped>
#cesiumContainer {
width: 100%;
height: 100%;
}
#cesiumContainer .cesium-viewer-bottom {
display: none;
}
.floorSingle {
position: absolute;
z-index: 99;
left: 0px;
top: 30px;
background-color: aliceblue;
}
.ant-select {
position: absolute;
z-index: 99;
left: 0px;
top: 30px;
}
</style>
文章浏览阅读3.6k次。用人工智能普惠体育发展。
文章浏览阅读10w+次,点赞92次,收藏495次。表单提交方式一:直接利用form表单提交html页面代码:<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Insert title here</title></head><body><form action="h..._提交表单
文章浏览阅读5.1k次。Unity Spine SkeletonGraphic 重复播放 过度残影Bug 解决方案不推荐使用SetToSetupPose和Setup Pose相关,代码直接贴上/// <summary>/// Spine播放设置/// </summary>/// <param name="trackIndex">填写0</param>/// <param name="animationName">动画名</param>/// &l_unity skeletongraphic
文章浏览阅读3.5k次。一、推导过程:二、结果:边缘分布x1,x2 各自依然服从 μi,写反差矩阵 Σii 的多元高斯分布;条件概率分布给定 xj 求 xi 的分布:μi|j=μi+ΣijΣ−1jj(xj−μj)Σi|j=Σjj−ΣTijΣ−1iiΣij..._高斯分布的条件概率
文章浏览阅读339次,点赞8次,收藏8次。Ratelimitcache: Python缓存库,支持速率限制项目链接: https://gitcode.com/simonw/ratelimitcache?utm_source=artical_gitcode如果你正在寻找一个Python缓存库,并且希望对缓存操作进行速率限制,那么Ratelimitcache可能是你的理想选择。什么是Ratelimitcache?Ratelimitca..._python ratelimit基于什么
文章浏览阅读2.3k次,点赞2次,收藏8次。Xpath和CSS信息提取的方法异同点_xpath 获取css
文章浏览阅读454次。正交频分复用(OFDM)是一种在现代通信系统中广泛使用的调制技术,它具有高效的频谱利用和抗多径衰落等特点。64QAM(64-ary Quadrature Amplitude Modulation)是一种调制方式,可以在每个符号中传输更多的位信息。在OFDM系统中,保持载波同步对确保数据传输的可靠性至关重要。_基于ofdm+64qam系统的载波同步matlab仿真,
文章浏览阅读67次。Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。若包含,则为maven项目,否则为非maven项目。Springboot毕设项目超市商品销售管理系统37x2w(java+VUE+Mybatis+Maven+Mysql)Springboot + mybatis + Maven + Vue 等等组成,B/S模式 + Maven管理等等。其他版本理论上也可以。_vue+springboot+mybatis商品管理系统
文章浏览阅读3w次,点赞2次,收藏4次。转载自: http://blog.csdn.net/zouqin369/article/details/6913692 今天去公司设置好IP后,无论怎么样都上不了internet,再次打开本地后发现默认网关自动消失,cmd下输入ipconfig后的现象如下: 物理地址. . . . . . . . . . . . . : 00-22-64-55-76-8F DHCP 已启用_禁止修改网关命令
文章浏览阅读482次。Extjs的窗口是可以加载自己的HTML的,但这样两个页面就相当独立了,传参是个问题 ,网上也没有很好的解答清楚,猫猫今天就说清楚这个模式的传参要点。_extjs中打开网页怎么传参
文章浏览阅读811次。win_win port 进程
文章浏览阅读1.2k次。Ch3点到点数据链路层知识点1. 点到点数据链路层要解决的主要问题2. 常见的帧管理(帧定界)方法3. CRC的计算4. 流量控制的基本原理5. 常见错误及其处理机制6. 滑动窗口的概念、形式及工作原理7. ARQ(Automatic Repeat reQuest)协议工作原理:8. 连续ARQ(Go-back-N ARQ)工作原理(特别注意累计确认):9. 选择重传ARQ工作原理10. 了解(高..._hdlc go-back-n