备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

【云图】如何制作中国贪官落马图？

2015-01-08 1039
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:【云图】如何制作中国贪官落马图？ 摘要：之前的文章都是利用云索引来完成数据的分类显示的，今天教大家用云检索来制作有趣的地图。云检索的优点是，在结果展现的时候，可以让数据呈现出更棒的自定义效果。比如，结果面板的点击效果，markder的鼠标效果，信息窗口的自定义展示等。

原文:【云图】如何制作中国贪官落马图？

摘要：之前的文章都是利用云索引来完成数据的分类显示的，今天教大家用云检索来制作有趣的地图。云检索的优点是，在结果展现的时候，可以让数据呈现出更棒的自定义效果。比如，结果面板的点击效果，markder的鼠标效果，信息窗口的自定义展示等。并且，教程中第一次使用了时间轴这样的插件！根据时间进度来播放整个地图标注加载的过程。

----------------------------------------------------------------

效果提前看一眼：http://zhaoziang.com/amap/tanguan.html

 

第一步、制作一张云图

登录云图管理台 http://yuntu.amap.com/datamanager/index.html 

新建一张地图，这时后台会自动生成一个key。

 

准备原始数据，并将数据上传至云图。

新建地图：http://yuntu.amap.com/datamanager/index.html

 

 

导入数据

附贪官落马数据：

点开展开数据

 

预览一下

 

这时云图已经制作完成，你可以进行分享。

如果不想写代码的朋友，制作到这里，就可以分享你的云图给好友了。甚至可以用<iframe></iframe>的形式，嵌入到您的网站里。

当然，想要更加炫酷效果的朋友们，就要继续往下看，写两句代码啦。

 

 

第二步、云检索

对于自己云数据的检索，我们可以使用多边形检索，附近检索，还有ID检索。这里给出的例子是多边形检索，如下图，给中国区域画个大概的图。

自制简易的坐标拾取工具：http://zhaoziang.com/amap/picpoint.html

云检索代码：

//使用云检索CloudDataSearch
function cloudSearch() {  
    var arr = new Array();  
    //绘制多边形   
    arr.push(new AMap.LngLat(73.388672,50.578345)); 
    arr.push(new AMap.LngLat(73.388672,34.578345));
    arr.push(new AMap.LngLat(78.388672,28.264383));
    arr.push(new AMap.LngLat(88.388672,21.578345));        
    arr.push(new AMap.LngLat(118.912109,20.264383));  
    arr.push(new AMap.LngLat(125.912109,39.264383));         
    arr.push(new AMap.LngLat(134.912109,43.578345));  
    arr.push(new AMap.LngLat(134.912123,56.578309)); 
    arr.push(new AMap.LngLat(100.912123,45.578309));
    arr.push(new AMap.LngLat(73.388672,50.578345)); 
    
    var polygon = new AMap.Polygon({  
        map:mapObj,   
        path:arr,   
        strokeColor:"#3366FF",   
        strokeOpacity:0.2,   
        strokeWeight:2,   
        fillColor: "#3366FF",   
        fillOpacity: 0.2   
    });    
    polygon.setMap(mapObj);  
    
    var search;  
    var searchOptions = {  
        keywords:"",
        orderBy:"time:ASC"
    }; 

    mapObj.plugin(["AMap.Scale"],function(){  
    var scale = new AMap.Scale();  
    mapObj.addControl(scale);     
    });  

    //加载CloudDataSearch服务插件  
    mapObj.plugin(["AMap.CloudDataSearch"], function() {         
        search = new AMap.CloudDataSearch('53549433e4b0a8066457c35b', searchOptions); //构造云数据检索类  
        AMap.event.addListener(search, "complete", cloudSearch_CallBack); //查询成功时的回调函数  
        AMap.event.addListener(search, "error", errorInfo); //查询失败时的回调函数  
        search.searchInPolygon(arr); //多边形检索  
    });  
}

 

添加信息窗口和覆盖物

//添加marker和infowindow     
function addmarker(i, d, mon){ 
    var lngX = d._location.getLng();  
    var latY = d._location.getLat();  
    var s=new AMap.Size(40, 50);
    var iconimg = new AMap.Icon({
        image:d.image,
        imageSize:s,     
        size:s            
    });
    var markerOption = {  
        map:mapObj,  
        icon:iconimg,
        offset: new AMap.Pixel(-10,-30),
        position:new AMap.LngLat(lngX, latY)    
    };              
    mar = new AMap.Marker(markerOption);    
    marker.push(new AMap.LngLat(lngX, latY));  

    var datetime1 = d.time;
    var datetimestr=d.time.toString()
    var year1 = datetimestr[0]+datetimestr[1]+datetimestr[2]+datetimestr[3];
    var month1 = datetimestr[4]+datetimestr[5];
    var date1 = datetimestr[6]+datetimestr[7];

    var infoWindow = new AMap.InfoWindow({  
        content:"<h3><font face=\"微软雅黑\"color=\"#3366FF\">"+(i+1) + "."+ d._name +"</font></h3><hr />" + "官职：" + d.title + "<br />" + "落马时间：" + year1 + "年"+month1+"月"+date1+"日" +  "<br />"+ "简介：" + d.profile + "<br />" + "<img class='touxiang' src="+d.image+"></img>",  
        size:new AMap.Size(300, 0),  
        autoMove:true,  
        offset:new AMap.Pixel(0,-30)  
    });    
    windowsArr.push(infoWindow);     
    var aa = function(){infoWindow.open(mapObj, mar.getPosition());};    
    AMap.event.addListener(mar, "click", aa);        
}

云检索的简单示例，大家可以直接参考官网：http://api.amap.com/javascript/example/num/1903

 

第三步、结果面板

结果面板就是展示搜索结果的地方。当检索到数据后，在右侧展示出来。

并且点击结果时，打开对应的信息窗口。

//回调函数   
    function cloudSearch_CallBack(data) {    
        resultArr = data.datas;
    }
    
    //回调函数  
    function errorInfo(data) {  
        resultStr = data.info;  
        document.getElementById("result").innerHTML = resultStr;  
    }  
    //根据id打开搜索结果点tip  
    function openMarkerTipById1(pointid,thiss){      
        thiss.style.background='#CAE1FF';    
       windowsArr[pointid].open(mapObj, marker[pointid]);        
    }    
    //鼠标移开后点样式恢复  
    function onmouseout_MarkerStyle(pointid,thiss) {     
       thiss.style.background="";    
    }

 

 

第四步、添加时间控件

时间控件在网上找了许多个，最后决定用JQ的jquery-ui-1.10.4.custom.js。

function sliderChanged(event, ui)
{
    var value= $( "#slider" ).slider( "option", "value" )/10 + "";
    mon = value;
    mapObj.clearMap();  
    if (value < 10)
        mon = "20130" + value.substring(0,2) + "30";
    else if(9 < value && value < 13)
        mon = "2013" + value + "00";
    else if(12 < value && value < 22)
        mon = "2014" + value-12 + "00";    
    else if(21 < value && value < 25)
        mon = "2014" + value-12 + "30";            
    addmarkertest(mon);
};

function SliderOn(sliderId,ministep)
{
    var value = $( '#'+sliderId ).slider( "option", "value" );
    var max = $( '#'+sliderId ).slider( "option", "max" );
    if(value>=max)
    {
        clearInterval(intervalId);
        return;
    }
    $( '#'+sliderId ).slider( "option", "value", value + ministep );
};
    $( "#slider" ).slider();
    $( "#slider" ).slider( "option", "max", 240 );
    $( "#slider" ).slider( "option", "step", 10 );
    $( "#slider" ).slider( "option", "animate", "slow" );  
    $( "#slider" ).on( "slide", sliderChanged);
    $( "#slider" ).on( "slidechange", sliderChanged);
    intervalId = setInterval("SliderOn('slider',10)",300);

 

 

完结。

-----------------------------------------------------------------------------------------

全部源代码：

<!DOCTYPE HTML>  
<html>
<head>
  <meta charset="utf-8">
  <title>贪官地图</title>
  <script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=46799a1920f8b8914ad7d0a2db0096d1"></script>  
  <link rel="stylesheet" type="text/css" href="http://api.amap.com/Public/css/demo.Default.css" />
  <link rel="stylesheet" href="jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.css">
  <style>#slider { margin: 0px; }    </style>
  <script src="jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script>
  <script src="jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script>
  <style>
    #mapLeft{ width: 80%; height:400px;float:left;}
    #resultList{ width: 20%; float:left; }
    #slider{ height: 40px;}
    #mySlider a.ui-state-default{ background:red; height:40px;}
    #result{height:470px;}
    #iCenter{height:500px;}
  </style>
</head>
<body onload="mapInit();"> 
        <p>------------------------------------------------------------</p>
        <div><h1>2013年-2014年贪官落马地图</h1></div>
        <h2>（数据来源于新闻）</h2>
        <p>------------------------------------------------------------</p>
        <div id="mySlider">
            <div id="slider"><img src="tanguan_bg.jpg"></div>
            <input type=button value="播放" onclick="play();"/>
        </div>
        <div id="mapLeft">
            <div id="iCenter"></div>
        </div>
        <div id="resultList">
            <div class="resultbox">  
                <div id="r_title"><b>结果:</b></div>  
                <div id="result"> </div>  
            </div>   
        </div>        
</body>  
    
<script type ="text/javascript"> 
function play()
{
    clearInterval(intervalId);
    $( "#slider" ).slider( 'value' , 0);   
    intervalId = setInterval("SliderOn('slider',10)",500); 
}
</script> 


<script>
var intervalId = null;
var mapObj;  
var marker = new Array();  
var windowsArr = new Array(); 

var mon;
var resultArr;
var resultStr="";  
var mar;
var sum = 0;
//var mon = "20130100";


function sliderChanged(event, ui)
{
    var value= $( "#slider" ).slider( "option", "value" )/10 + "";
    mon = value;
    mapObj.clearMap();  
    if (value < 10)
        mon = "20130" + value.substring(0,2) + "30";
    else if(9 < value && value < 13)
        mon = "2013" + value + "00";
    else if(12 < value && value < 22)
        mon = "2014" + value-12 + "00";    
    else if(21 < value && value < 25)
        mon = "2014" + value-12 + "30";            
    addmarkertest(mon);
};

function SliderOn(sliderId,ministep)
{
    var value = $( '#'+sliderId ).slider( "option", "value" );
    var max = $( '#'+sliderId ).slider( "option", "max" );
    if(value>=max)
    {
        clearInterval(intervalId);
        return;
    }
    $( '#'+sliderId ).slider( "option", "value", value + ministep );
};
    $( "#slider" ).slider();
    $( "#slider" ).slider( "option", "max", 240 );
    $( "#slider" ).slider( "option", "step", 10 );
    $( "#slider" ).slider( "option", "animate", "slow" );  
    $( "#slider" ).on( "slide", sliderChanged);
    $( "#slider" ).on( "slidechange", sliderChanged);
    intervalId = setInterval("SliderOn('slider',10)",300); 

    //基本地图加载  
function mapInit() 
{     
    mapObj = new AMap.Map("iCenter",{center:new AMap.LngLat(104.354166,37),level:4});   
    //mapObj.setFitView();  
    cloudSearch();  
    
}  

    
//使用云检索CloudDataSearch
function cloudSearch() {  
    var arr = new Array();  
    //绘制多边形   
    arr.push(new AMap.LngLat(73.388672,50.578345)); 
    arr.push(new AMap.LngLat(73.388672,34.578345));
    arr.push(new AMap.LngLat(78.388672,28.264383));
    arr.push(new AMap.LngLat(88.388672,21.578345));        
    arr.push(new AMap.LngLat(118.912109,20.264383));  
    arr.push(new AMap.LngLat(125.912109,39.264383));         
    arr.push(new AMap.LngLat(134.912109,43.578345));  
    arr.push(new AMap.LngLat(134.912123,56.578309)); 
    arr.push(new AMap.LngLat(100.912123,45.578309));
    arr.push(new AMap.LngLat(73.388672,50.578345)); 
    
    var polygon = new AMap.Polygon({  
        map:mapObj,   
        path:arr,   
        strokeColor:"#3366FF",   
        strokeOpacity:0.2,   
        strokeWeight:2,   
        fillColor: "#3366FF",   
        fillOpacity: 0.2   
    });    
    polygon.setMap(mapObj);  
    
    var search;  
    var searchOptions = {  
        keywords:"",
        orderBy:"time:ASC"
    }; 

    mapObj.plugin(["AMap.Scale"],function(){  
    var scale = new AMap.Scale();  
    mapObj.addControl(scale);     
    });  

    //加载CloudDataSearch服务插件  
    mapObj.plugin(["AMap.CloudDataSearch"], function() {         
        search = new AMap.CloudDataSearch('53549433e4b0a8066457c35b', searchOptions); //构造云数据检索类  
        AMap.event.addListener(search, "complete", cloudSearch_CallBack); //查询成功时的回调函数  
        AMap.event.addListener(search, "error", errorInfo); //查询失败时的回调函数  
        search.searchInPolygon(arr); //多边形检索  
    });  
}  

//添加marker和infowindow     
function addmarker(i, d, mon){ 
    var lngX = d._location.getLng();  
    var latY = d._location.getLat();  
    var s=new AMap.Size(40, 50);
    var iconimg = new AMap.Icon({
        image:d.image,
        imageSize:s,     
        size:s            
    });
    var markerOption = {  
        map:mapObj,  
        icon:iconimg,
        offset: new AMap.Pixel(-10,-30),
        position:new AMap.LngLat(lngX, latY)    
    };              
    mar = new AMap.Marker(markerOption);    
    marker.push(new AMap.LngLat(lngX, latY));  

    var datetime1 = d.time;
    var datetimestr=d.time.toString()
    var year1 = datetimestr[0]+datetimestr[1]+datetimestr[2]+datetimestr[3];
    var month1 = datetimestr[4]+datetimestr[5];
    var date1 = datetimestr[6]+datetimestr[7];

    var infoWindow = new AMap.InfoWindow({  
        content:"<h3><font face=\"微软雅黑\"color=\"#3366FF\">"+(i+1) + "."+ d._name +"</font></h3><hr />" + "官职：" + d.title + "<br />" + "落马时间：" + year1 + "年"+month1+"月"+date1+"日" +  "<br />"+ "简介：" + d.profile + "<br />" + "<img class='touxiang' src="+d.image+"></img>",  
        size:new AMap.Size(300, 0),  
        autoMove:true,  
        offset:new AMap.Pixel(0,-30)  
    });    
    windowsArr.push(infoWindow);     
    var aa = function(){infoWindow.open(mapObj, mar.getPosition());};    
    AMap.event.addListener(mar, "click", aa);        
}  


function addmarkertest(mon){
var resultNum = resultArr.length;
resultStr = "";
marker = null;
windowsArr = null;
windowsArr = new Array();
marker = new Array();
for (var i = 0; i < resultNum; i++) { 
//alert(resultArr[i].time);
    if(resultArr[i].time < mon)
        {
            var datetime2 = resultArr[i].time;
            var datetimestr2=datetime2.toString()
            var year2 = datetimestr2[0]+datetimestr2[1]+datetimestr2[2]+datetimestr2[3];
            var month2 = datetimestr2[4]+datetimestr2[5];
            var date2 = datetimestr2[6]+datetimestr2[7];    
            resultStr += "<div id='divid" + (i+1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i+1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:2px 0 4px 2px; border-bottom:1px solid #C1FFC1;\"><table><tr><td><h3><font face=\"微软雅黑\"color=\"#3366FF\">" + (i+1) + "." + resultArr[i]._name + "</font></h3>";  
            resultStr += '<br/>官职：' + resultArr[i].title + "<br/>" + "落马时间：" + year2 + "年"+month2+"月"+date2+"日"+ '<br/>' + "</td></tr></table></div>";  
            addmarker(i, resultArr[i] ,mon); 
        }
        
    else if(resultArr[i].time > mon)
        {
            resultStr += "";    
        }    
}
    sum = sum +1;
    document.getElementById("result").innerHTML = resultStr; 
}
    
    //回调函数   
    function cloudSearch_CallBack(data) {    
        resultArr = data.datas;
    }
    
    //回调函数  
    function errorInfo(data) {  
        resultStr = data.info;  
        document.getElementById("result").innerHTML = resultStr;  
    }  
    //根据id打开搜索结果点tip  
    function openMarkerTipById1(pointid,thiss){      
        thiss.style.background='#CAE1FF';    
       windowsArr[pointid].open(mapObj, marker[pointid]);        
    }    
    //鼠标移开后点样式恢复  
    function onmouseout_MarkerStyle(pointid,thiss) {     
       thiss.style.background="";    
    }      
    
</script>

</html>
点击展开全部源代码

再看一遍效果：

demo地址：http://zhaoziang.com/amap/tanguan.html

文章标签：
定位技术
前端开发
JavaScript
杰克.陈
目录
相关文章
游客wnglizmmzbpno
|
22天前
3D星云图
3D星云图展示
游客wnglizmmzbpno
22 7
Python研究者
|
自然语言处理 数据可视化
我做到了！《斗罗大陆》人物关系可视化
今天辰哥来教大家从一本小说/名著里面**提取出人名**，并对**人名之间的关系**进行统计（同一段里面人名两两出现），根据人名之间的关系进行**绘制关系图**--**gephi**
Python研究者
570 0
行者武松
|
人工智能 机器人
日本展示机器人Erica，看脸还不错
行者武松
1493 0
技术小甜
2星|《麦肯锡图表工作法》：用图表做商业分析的入门演示
技术小甜
1536 0
技术小牛人
如何制作简单的商业图表
技术小牛人
1192 0
技术小阿哥
|
JavaScript BI
ActiveReports 报表应用教程 (5)---解密电子商务领域首张电子发票的诞生(套打报表)
技术小阿哥
1374 0
行者武松
|
搜索推荐
15张图表，一览数字健康的热闹和门道
行者武松
1310 0
异步社区
《潮流时装设计——世界顶级时装CAD制板技巧》——1.5　服装制板中各线条名称
异步社区
1722 0
小旋风柴进
|
大数据
[信息图]成人用品情趣报告——春水堂情趣研究院
小旋风柴进
2060 0
小旋风柴进
|
数据可视化 大数据
震撼可视化|54年全球2053次核爆在地图上的精准显示
小旋风柴进
1485 0

热门文章

最新文章

  • 1
    详细讲解！Canal+Kafka实现MySQL与Redis数据同步！
  • 2
    nslookup 域名结果正确，但是 ping 域名失败
  • 3
    Linux查看进程的内存占用情况
  • 4
    大咖云集，技术宅开趴倒计时 —— 2017 Kubernetes Meetup | 成都站
  • 5
    用无人机和机器人倒垃圾，沃尔沃做到了
  • 6
    [20180123]测试SQLNET.EXPIRE_TIME参数2
  • 7
    Webservice 的设计和模式
  • 8
    良好的代码书写格式:适时的代码缩进
  • 9
    Asp.Net复合控件疑难与解决——尴尬的生命周期
  • 10
    CSS样式的优先级
  • 1
    解放配置之道：Spring引入外部属性文件
    15
  • 2
    公钥密码学：解密加密的魔法世界
    19
  • 3
    深入剖析：OSI模型解密
    20
  • 4
    TCP IP协议簇：网络通信的基石
    16
  • 5
    数字藏品开发原理丨鲸探幻核数字藏品系统开发功能分析
    18
  • 6
    深入探讨MySQL中Varchar(50)和Varchar(500)的区别
    18
  • 7
    如何实现基于Redis的在线人数统计功能？
    19
  • 8
    MySQL锁解密：读锁与写锁
    11
  • 9
    解锁MySQL的奥秘：探究表级锁、行级锁和页级锁的神秘面纱
    10
  • 10
    MySQL锁之较量：悲观锁与乐观锁的对决
    11

    • 相关课程

    更多
  • 跨越N次元 一键变身AI漫画人
  • 场景实践-通过阿里云数据分析工具实现共享单车骑行分析
  • 场景实践 -新手玩转云计算制作一个浪漫的表白网页
  • 【新人赛】工业蒸汽量预测建模算法代码开源分享合集
  • 【科技少年】“天池杯”AI领航计划·高级挑战教程（赛题及baseline解读）
  • 【七月在线】机器学习项目班

    • 相关电子书

    更多
  • 人物写真开源&商业
  • 阿里云、浙大联合发布《城市绿色出行指数白皮书》
  • 电影特效行业与云技术的结合

    • 相关实验场景

    更多
  • 函数计算部署AI艺术字应用，生成新春文字头像
  • 基于阿里云DeepGPU实例，用AI画唯美国风少女
  • 【图生图】一键部署3D卡通风格模型
  • 1分钟制作专属的RFID安全标签
  • 制作开放场景
  • 一键创建和部署高分电影推荐语音技能
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）