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

摘要：之前的文章都是利用云索引来完成数据的分类显示的，今天教大家用云检索来制作有趣的地图。云检索的优点是，在结果展现的时候，可以让数据呈现出更棒的自定义效果。比如，结果面板的点击效果，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{  80%; height:400px;float:left;}
    #resultList{  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