化石原创文章,转载请注明来源并保留原文链接


看到现在的孩子学习的东西,突然发现要学的东西真多。所以突发奇想,想看看有没有非常好的,或者说是有效的学习方式。网络搜索看到的第一个关键词就是终极学习法:费曼学习法。看了36氪上的《费曼学习法凭什么号称终极学习法》,被这个学习法和学习法名字的来源的创始人说的那句名言吸引:因为学习法一看就可行性很高,步骤也很简单。人生这么多年,大致也明白能把复杂问题简单化才珍贵。所以这里把步骤记录下来(感觉又要开个学习法的文章系列,:))。学习法共四步:

1、确定学习目标;

2、模拟教学学习法;

3、回顾;

4、简化。

前三步个人觉得从字义上就可以解释,所以不多说。第四步主要是:

一个技巧:类比。
对于完全不懂生物学概念的小白来说,“原始且未特化的细胞、未充分分化、具有再生各种组织器官的潜在功能的一类细胞”可能太过于抽象,不如举个类比生活的例子:
一块面团,湿润时它可以捏成各种形状,捏面团的过程是分化、特化的过程,捏成的成品,就是各种组织细胞,而最初的面团,就是干细胞。
这样一来,即使是小白,也能听懂了。


化石原创文章,转载请注明来源并保留原文链接



化石原创文章,转载请注明来源并保留原文链接


javascript的世界果然庞大,这两天一直发现有好东西,早晨刚写完这个整合(早些日子整合了Bootstrap),刚才又发现了Layer。尝试跟Cesium混着用了一下,记录如下:

1、引入layer库

Layer似乎没有cdn的地址,官方网站只看到了绿色下载,所以就直接下载zip文件到本地,然后解压缩。解压出来的文件夹根目录下有子文件夹layer,拷贝出来放置到cesium\Apps\Sandcastle\ThirdParty路径下。

2、在html的head里面,写入 <script src=”../ThirdParty/layer/layer.js”></script>

注意这个脚本必须放置在require.js前

3、在网页的一个按钮里尝试使用layer的功能

按钮按下后的方法(使用layer)

    function test() {
        layer.confirm('您是如何看待前端开发?', {
            btn: ['重要','奇葩'] //按钮
            }, function(){
            layer.msg('的确很重要', {icon: 1});
            }, function(){
            layer.msg('也可以这样', {
                time: 20000, //20s后自动关闭
                btn: ['明白了', '知道了']
            });
        });
    }

按钮本身代码:

<div id="echartsmain" style="width: 600px;height:400px;"></div>

结果是按下按钮后在屏幕中间弹出一个对话框,点击确认后,对话框消失,代替一个几秒后自动关闭的信息框。


化石原创文章,转载请注明来源并保留原文链接



化石原创文章,转载请注明来源并保留原文链接


刚整合过Bootstrap(这里)。无意中看到了ECharts,一个做数据可视化非常方便的javascript库?(用问号是我还不知道怎么精确的叫这类库)。第一时间就感觉到以后Cesium做数据可视化的时候可以用这个东西,所以尝试整合了一下,非常的方便。

第一步:引入库

在require.js引入前,引入ECharts的cdn的script链接:

<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>

第二步:给定一个ECharts的绘图区域

在Cesium的例子的toolbar div中,我们放入一个div块

 <div id="toolbar">
    <nav class="nav">
        <a href="#" class="nav-item nav-link active">Home</a>
        <a href="#" class="nav-item nav-link">Profile</a>
        <a href="#" class="nav-item nav-link">Messages</a>
        <a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
    </nav>
    <body>
        <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
        <div id="echartsmain" style="width: 600px;height:400px;"></div>
    </body> 
    ...
</div>

第三步:测试的javascript,放在Cesium的javascript块前面即可

<script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('echartsmain'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

最后是这个例子的截图,因为背景是黑色的,所以可能字不是很清楚。但是结果正如预期。

Cesium整合ECharts


化石原创文章,转载请注明来源并保留原文链接



化石原创文章,转载请注明来源并保留原文链接


Cesium默认的demo信息,在它的场景下方,都有一段显示内容,大致是很多这类引擎都会做的一件事情,类似power by xxx,用来展示引擎自身。在二次开发的时候,我相信基本上没有人会让这个信息就按原来的方式显示。因为UI风格肯定不同。所以这里我们来把这段信息做隐藏。

在基于webgl的应用中,UI肯定属于这两种中的一种:

1、Canvas UI;

2、Element UI。

所谓Canvas UI,就是UI元素,比如button,是通过webgl的方式显示区域(一般含图片)、自己侦听事件(对button来说,有hover、click、mouse down、mouse up等)、自己处理事件,现在的很多Html5的引擎,比如LayaBox(现在叫LayaAir),比如白鹭,我想应该都会用这种方式。这种方式,对引擎制作的人员来说,需要花费大量的时间来编制各种UI控件(元素)的代码,工作量因支持的控件(元素)的数量而定。

Element UI就是使用HTML语言的基本元素,比如<button>、<input>等。这些东西的显示和事件都由浏览器本身做了,所以就没有上面所说到的相应的开发量。

Cesium显然用的是后一种,所以我们只要找相应的css,改动相应的css让这段东西不显示就可以。Cesium用的css基本上都在 Apps/Sandcastle/templates/bucket.css里面,通过关键字我们看到有个带credits字眼的,改成如下:

.cesium-widget-credits {
    display: none!important;
    visibility: hidden!important;
}

大功告成。


化石原创文章,转载请注明来源并保留原文链接