D3、openlayers的一次尝试

近期尝试了一个webgl相关的内容,有些小激动,及时分享一下我的测试示例,效果如下:

此示例分从业务角度分为两部分,一个部分为d3展示的柱图,另一部分则为用openlayers展示的地图。而其难点却在界面的交互效果。实现内容的翻面。

一、翻面效果的实现

此效果看似神奇,理解清楚原理后也还是很简单的。主要用到css3的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的父级的参照,在现代浏览上此处可以不加入3d变换属性,而Ie则需要加入。front和back这两个div都是需要加上3d变换效果的。而对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);
}

二、JS部分实现

JS代码的结构图:

flip.js:为此组件 入口

flip.ol.js:openlayer的具体实现

flip.d3.js:d3绘制柱图的具体实现

flip.store.js:数据接口,用于返回从后台接口获取到的数据

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

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

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

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

本示例主要以flip.js为主,在组合d3和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方法进行数据的获取和绘制,具体细节下载代码查看

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Phoenix的Android之旅

如何加载一张超大高清图

"大图片加载容易做,可是这个需求要保证在不OOM的情况下能放大查看,还要能清晰展示,这得怎么呢?",愁眉苦脸的小呼说到。

10420
来自专栏韩东吉的Unity杂货铺

零基础入门 4: 窗口介绍(完)

上一篇将Unity里几个比较重要的窗口先进行了讲解,以及如何自定义窗口布局,不知道大家都消化的怎么样,今天这篇窗口介绍,将把剩余window的窗口一一进行介绍。

17110
来自专栏魏艾斯博客www.vpsss.net

屏幕 GIF 动态图捕获软件及录制过程

作为站长有时候需要录制屏幕 GIF 动态图片,就得现学现卖。这不魏艾斯博客在使用遨游浏览器的过程中遇到一些 bug 需要提交给官方,遨游技术员希望老魏提供一段正...

25320
来自专栏司想君

2017前端开发手册四-前端开发人员应该掌握的Web技术

碰见过真正难相处的人,才知道身边的伙伴们多么值得珍惜。 ? 前端开发人员应掌握以下核心网络技术(考虑按此顺序学习): 统一资源定位器(又名URL) 超文本传输协...

39180
来自专栏Java技术分享

IntelliJ Idea 常用快捷键 列表(实战终极总结!!!!)

1. -----------自动代码--------  常用的有fori/sout/psvm+Tab即可生成循环、System.out、main方法等boil...

26070
来自专栏企鹅号快讯

再见!陪伴我多年的setuna

hi,又到了charming的时间,平日里用setuna截图小工具的人肯定大有人在,但是最近我发现了一个比它更好用的小工具——PureRef,借此机会推荐一下~...

310100
来自专栏木子昭的博客

Python综合Web案例_在线为头像添加装饰第二步:上传头像, 并实时裁剪第三步: 生成图片,长按保存

前几天元旦, 用Python为自家公众号做了一个"革面"的活动页面,活动的效果非常好,分享一下实现过程 前端: BootStrap, Jquery, Jcro...

37560
来自专栏腾讯移动品质中心TMQ的专栏

VR中的动画就是这么玩哒

导读 大家是不是觉得VR中的动画特别神奇,其实它是基于Unity中的动画系统Mecanim实现的,Unity在5.0之后,Mecanim动画控制越来越强大好用...

30860
来自专栏顶级程序员

12 款 JavaScript 代码测试必备工具

每天都会产生新的代码、用户测试工具和框架。下面的列表列出了可以完成各种测试需求的代码工具。你应该调查研究一下,看这些工具是否适用于你的技术栈和技术需求。 01...

394100
来自专栏落影的专栏

直播APP的性能优化-礼物篇

介绍 记录、总结开发遇到一些问题,大家一起交流学习。 这次带来,对直播APP性能优化的总结,以QA的形式总结。 欢迎关注文集-直播Live 实现方式 1、Q:...

39960

扫码关注云+社区

领取腾讯云代金券