菜单

D叁、openlayers的2回尝试

2019年5月5日 - XML

近期尝试了2个webgl相关的原委,有个别小激动,及时享受一下本身的测试示例,效果如下:

图片 1

此示例分从业务角度分为两局地,一个局地为d三展现的柱图,另一片段则为用openlayers显示的地图。而其难点却在分界面的相互功能。达成内容的翻面。

 

1、翻面效果的兑现

此成效类似美妙,精晓精晓原理后也依旧很简短的。首要用到css三的backface-visibility属性,他意味着成分正面运动到用户不可知的职务时,当前成分是还是不是可知。

<div class="flip-container">
        <div class="flip-wrap">
            <div class="front">
            </div>
            <div class="back">
            </div>
        </div>
    </div>

    
以上是html代码的布局,flip-container作为最外层的卷入,在其下边使用了perspective属性(此属性的详尽解释可参考此小说),表示视距,他能影响到我们3d转变效果是不是更仿佛真实;flip-wrap作为前、后三个div的父级的参照,在现世浏览上这里能够不插足三d转变属性,而Ie则需求参加。front和back那三个div都以内需加上三d转换效果的。而对front的z-index层级加高,是为了让其私下认可呈现在最前方。back默许让其旋转至-180deg,是为着让其过滤效果尤其流畅和平滑。

.flip-container{    
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    perspective: 1000;
    width: 600px;
    height: 400px;
    margin: 0 auto;
}
.flip-wrap{
    position: relative;
    width: 100%;
    height: 100%; 
    /*transform-style设置在父级,为了兼容IE*/
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
}
.flip-wrap > .front, .flip-wrap >.back{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    -moz-transition: .6s;
    -ms-transition: .6s;
    transition: .6s;
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    backface-visibility: hidden; /*动画完成后,没正面面向用户,则隐藏*/
}
.flip-wrap > .front{
    background: red;
    transform: rotateY(0deg);
    z-index: 2; /*z轴高一点,覆盖back层*/
}
.flip-wrap > .back{
    background: green;
    transform:  rotateY(-180deg); 
}

.flip-container:hover .front{
    transform: rotateY(180deg);
}
.flip-container:hover .back{
    transform: rotateY(0deg);
}

2、JS部分达成

JS代码的布局图:

图片 2

flip.js:为此组件 入口

flip.ol.js:openlayer的现实贯彻

flip.d三.js:d三绘制柱图的求实贯彻

flip.store.js:数据接口,用于再次来到从后台接口获取到的数目

city.js:城市名称数据字典

adapter/d叁.js:用于将后台数据调换为d3可用的数据格式

adapter/ol.js:用于将后台数据转变为openlayers可用的数码格式

adapter/provider.js:转换器工厂进口

本示例主要以flip.js为主,在组合d三和ol相关职能。

class Flip {
    constructor(options){
        this.options = _.assign(Flip.Default, options);
        this.d3 = new d3(this.options);
        this.ol = new ol(this.options);
        this.store = new store();
        this.adapterProvider = new AdapterProvider();
    } 
    /**
     * 组件的渲染
     */
    render (){
        //这里发送数据到内部进行渲染
        var promise = this.store.getData();//这里应该是个异步
        //还需要一个数据转换工厂,实现数据=>d3,或者数据=>ol的转换
        promise.then((data)=>{            
            var d3Data = this.adapterProvider.convert(data, AdapterProvider.type.d3); //同步
            var olData = this.adapterProvider.convert(data, AdapterProvider.type.ol);
            this.d3.render(d3Data);
            this.ol.render(olData);
        });
    }
}

在构造函数中对存款和储蓄器、转变器、d3和ol举行实例化,然后提供render方法进行数量的获取和制图,具体细节下载代码查看

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图