【云图】如何制作引擎图？

原创

酸奶小妹GIS 2014-06-06 13:29:31 ©著作权

©著作权归作者所有：来自51CTO博客作者酸奶小妹GIS的原创作品，请联系作者获取转载授权，否则将追究法律责任

摘要：之前的文章都是利用云索引来完成数据的分类显示的，今天教大家用云检索来制作有趣的地图。云检索的优点是，在结果展现的时候，可以让数据呈现出更棒的自定义效果。比如，结果面板的点击效果，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({
        p_w_picpath:d.p_w_picpath,
        p_w_picpathSize: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.p_w_picpath+"></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);