导读
在写Cesium的示例程序时,有些调试参数(比如透明度,旋转角度等)如果每次都要修改代码真的效率太低了,因此,我们需要一个UI的功能去控制,正好,有一个轻量的UI库dat-gui。就让我们来简单使用吧。
引入项目
这里提供CDN,我们直接拷入地址即可。
<script src="https://cdn.bootcdn.net/ajax/libs/dat-gui/0.7.9/dat.gui.js"></script>
简单使用示例
const gui = new dat.GUI();
gui.add(viewModel,"message");
gui.add(viewModel,"transparency")
.name("透明度")
.min(0)
.max(1)
.step(0.01)
.onChange(function(val){
if(viewer.imageryLayers){
for(let i=0;i<viewer.imageryLayers.length;i++){
viewer.imageryLayers.get(i).alpha =val
}
}
viewer.scene.globe.translucency.frontFaceAlpha = val;
})
发现被挡住了,我们把它放在左上角吧
<div id="gui"></div>
...
#gui{
position: absolute;
left:20px;
top:0;
}
...
const guiEle = document.getElementById("gui");
guiEle.appendChild(gui.domElement);
dat-gui用法
可以看到,dat-gui是支持链式调用的。便根据其调用自动地判别控件类型,但首先都需要从.add()
方法开始。
gui.name()//设置label
gui.min() //滑块最小值
gui.max()//滑块最大值
gui.onChange()//触发事件
gui.add(model,"key",{
"name1":0,
"name2":1
}) //下拉框