cesium使用gui控件

401 阅读1分钟

导读

在写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;
    })

image-20230616101047400.png

发现被挡住了,我们把它放在左上角吧

<div id="gui"></div>
...
#gui{
        position: absolute;
        left:20px;
        top:0;
    }
...
 const guiEle = document.getElementById("gui");
 guiEle.appendChild(gui.domElement);

image-20230616101532930.png

dat-gui用法

可以看到,dat-gui是支持链式调用的。便根据其调用自动地判别控件类型,但首先都需要从.add()方法开始。

gui.name()//设置label
gui.min() //滑块最小值
gui.max()//滑块最大值
gui.onChange()//触发事件
gui.add(model,"key",{
    "name1":0,
    "name2":1
}) //下拉框