Cesium界面学习以及隐藏界面控件

不念不忘少年蓝@ 2022-12-24 14:59 371阅读 0赞

这一跑起来界面很多元素；都是控件；先来学习一下；

![20201129023349418.png][]

这5个是：  
    查找位置控件，找到之后镜头会对准找到的地址；  
    视角返回初始位置；  
    选择视角的模式：3D,2D，哥伦布视图；  
    图层选择器；  
    导航按钮；

左下角是动画器件；没播放之前；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70][]

播放了看一下；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 1][]

刻度的这个是时间线控件，指示当前时间；

Credits Display：版权显示，必选；

全屏按钮，如下图，右下角；

![20201129023422144.png][]

把代码放到tomcat目录下；把tomcat运行起来；然后运行helloworld程序；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 2][]

界面控件太多；先隐藏；不同的时候有不同的需要；

代码没有格式化，自己看；如下图是教程提供的隐藏控件代码；但是完全按教程会出现

Uncaught TypeError: Cannot read property 'appendChild' of null

错误；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 3][]

这个错误一般是<script>xxxx</script>的位置引起；尝试放到不同位置，head内，body内，</body>之后，整个文件最后；都是一样的错误；

那么现在按照开发的一般经验，因为它是一行代码（一个true或false）控制一个控件的隐藏或显示；下面把控件全部去掉，一个一个加进来看，是哪个控件的控制引起了问题；

经查是 creditContainer:"credit" 这一行引起；只要去掉这行就好；隐藏了控件之后的结果如下图；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 4][]

[20201129023349418.png]: /images/20221120/2e7b5f09b2a44696ac204cc2df975258.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201129023359860.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201129023410632.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24=,size_16,color_FFFFFF,t_70
[20201129023422144.png]: https://img-blog.csdnimg.cn/20201129023422144.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201129024226461.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201129023434115.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201129023446594.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24=,size_16,color_FFFFFF,t_70