首页 > 代码库 > 【云图】如何制作中国贪官落马图？
【云图】如何制作中国贪官落马图？
原文:【云图】如何制作中国贪官落马图？
点开展开数据点击展开全部源代码
摘要：之前的文章都是利用云索引来完成数据的分类显示的，今天教大家用云检索来制作有趣的地图。云检索的优点是，在结果展现的时候，可以让数据呈现出更棒的自定义效果。比如，结果面板的点击效果，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
云检索代码：
//使用云检索CloudDataSearchfunction 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="http://www.mamicode.com/+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 onm ouseout_MarkerStyle(pointid,thiss) { thiss.style.background=""; }
第四步、添加时间控件
时间控件在网上找了许多个，最后决定用JQ的jquery-ui-1.10.4.custom.js。
function sliderChanged(event, ui){ var value= http://www.mamicode.com/$("#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 = http://www.mamicode.com/$( ‘#‘+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="http://www.mamicode.com/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.css"> <style>#slider { margin: 0px; } </style> <script src="http://www.mamicode.com/jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script> <script src="http://www.mamicode.com/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 onl oad="mapInit();"> <p>------------------------------------------------------------</p> <div><h1>2013年-2014年贪官落马地图</h1></div> <h2>（数据来源于新闻）</h2> <p>------------------------------------------------------------</p> <div id="mySlider"> <div id="slider"><img src="http://www.mamicode.com/tanguan_bg.jpg"></div> <input type=button value="http://www.mamicode.com/播放" 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= http://www.mamicode.com/$("#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 = http://www.mamicode.com/$( ‘#‘+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(); } //使用云检索CloudDataSearchfunction 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="http://www.mamicode.com/+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) + "‘ onm ouseover=‘openMarkerTipById1(" + i + ",this)‘ onm ouseout=‘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 onm ouseout_MarkerStyle(pointid,thiss) { thiss.style.background=""; } </script></html>再看一遍效果：
demo地址：http://zhaoziang.com/amap/tanguan.html
【云图】如何制作中国贪官落马图？
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。