导读

在写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
}) //下拉框