CINXE.COM
Mapv - 数据可视化开源库
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Mapv - 数据可视化开源库</title> <meta name="keywords" content="Mapv,数据可视化,canvas,地图可视化,百度慧眼,大数据,轨迹,定位"/> <meta name="description" content="Mapv 是一款基于百度地图的大数据可视化开源库，可以用来展示大量的点、线、面的数据，每种数据也有不同的展示类型，如直接打点、热力图、网格、聚合等方式展示数据。" /> <!-- Bootstrap Core CSS --> <link href="index/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom CSS --> <link href="index/css/landing-page.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- Navigation --> <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation"> <div class="container topnav"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="topnav" href="#"><img src="index/img/logo.png?t=1" style="height:50px;"/></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li> <a href="https://github.com/huiyan-fe/mapv/wiki/v1" target="_blank">Wiki</a> </li> <li> <a href="./demo/build/" target="_blank">Demo</a> </li> <li> <a href="http://mapv.baidu.com/editor/" target="_blank">Editor</a> </li> <li> <a href="https://github.com/huiyan-fe/mapv/tree/v1" target="_blank">Github</a> </li> <li> <a href="../" target="_blank">V2</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav> <!-- Header --> <a name="about"></a> <div class="intro-header"> <div class="container"> <div class="row" style="opacity:0;transition: all 1s;"> <div class="col-lg-12"> <div class="intro-message"> <h1>MapV</h1> <h3>A totaly new map view for Big Data</h3> <hr class="intro-divider"> <ul class="list-inline intro-social-buttons"> <!-- <li> <a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a> </li> --> <li> <a href="https://github.com/huiyan-fe/mapv" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a> </li> <!-- <li> <a href="#" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a> </li> --> </ul> </div> </div> </div> </div> <!-- /.container --> <canvas class="canvas" style="transition: all 1s;background:rgb(20, 20, 255);position:absolute;left:0;top:0;width:100%;height:100%;"></canvas> </div> <!-- /.intro-header --> <!-- Page Content --> <a name="services"></a> <div class="content-section-a"> <div class="container"> <div class="row"> <div class="col-lg-5 col-sm-6"> <hr class="section-heading-spacer"> <div class="clearfix"></div> <h2 class="section-heading">展示大量点数据</h2> <p class="lead">展示大量的点数据，形式可以为热力图、网格、蜂窝状、点聚合、按颜色区间、按半径大小等。</p> </div> <div class="col-lg-5 col-lg-offset-2 col-sm-6"> <img class="img-responsive" src="index/img/ipad.png" alt=""> </div> </div> </div> <!-- /.container --> </div> <!-- /.content-section-a --> <div class="content-section-b"> <div class="container"> <div class="row"> <div class="col-lg-5 col-lg-offset-1 col-sm-push-6 col-sm-6"> <hr class="section-heading-spacer"> <div class="clearfix"></div> <h2 class="section-heading">展示大量线数据</h2> <p class="lead">可展示大量的线数据，有各种展示方式，如普通画线、高亮叠加、热力线数据展示等方式，还有各种动画效果，适合用于呈现大量轨迹的场景。</p> </div> <div class="col-lg-5 col-sm-pull-6 col-sm-6"> <img class="img-responsive" src="index/img/dog.png" alt=""> </div> </div> </div> <!-- /.container --> </div> <!-- /.content-section-b --> <div class="content-section-a"> <div class="container"> <div class="row"> <div class="col-lg-5 col-sm-6"> <hr class="section-heading-spacer"> <div class="clearfix"></div> <h2 class="section-heading">展示大量面数据</h2> <p class="lead">可展示大量的自定义面数据，也可按颜色区间来展示，行政区域也是其中一种应用场景，可直接使用。</p> </div> <div class="col-lg-5 col-lg-offset-2 col-sm-6"> <img class="img-responsive" src="index/img/phones.png" alt=""> </div> </div> </div> <!-- /.container --> </div> <!-- /.content-section-a --> <a name="contact"></a> <div class="banner"> <div class="container"> <div class="row"> <div class="col-lg-6"> <h2>Connect to Start Mapv:</h2> </div> <div class="col-lg-6"> <ul class="list-inline banner-social-buttons"> <!-- <li> <a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a> </li> --> <li>QQ群号：321519841</li> <li> <a href="https://github.com/huiyan-fe/mapv" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a> </li> <!-- <li> <a href="#" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a> </li> --> </ul> </div> </div> </div> <!-- /.container --> </div> <!-- /.banner --> <!-- Footer --> <footer> <div class="container"> <div class="row"> <div class="col-lg-12"> <ul class="list-inline"> <li> <a href="#">Home</a> </li> <li class="footer-menu-divider">⋅</li> <li> <a href="#about">About</a> </li> <li class="footer-menu-divider">⋅</li> <li> <a href="#services">Services</a> </li> <li class="footer-menu-divider">⋅</li> <li> <a href="#contact">Contact</a> </li> </ul> <p class="copyright text-muted small">Copyright © <a href="http://huiyan.baidu.com">huiyan</a> 2015. All Rights Reserved</p> </div> </div> </div> </footer> <!-- jQuery --> <script src="index/js/jquery.js"></script> <!-- Bootstrap Core JavaScript --> <script src="index/js/bootstrap.min.js"></script> <script src="index/js/shape-shifter.js"></script> <div style="display:none;"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?0d1a62942662d252f0aea2b6f85c7f3d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> </body> </html>