【雲圖】如何製做中國貪官落馬圖？

摘要：以前的文章都是利用雲索引來完成數據的分類顯示的，今天教你們用雲檢索來製做有趣的地圖。雲檢索的優勢是，在結果展示的時候，可讓數據呈現出更棒的自定義效果。好比，結果面板的點擊效果，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