ajax数据交互(arcgis server)

目录：

　　　　　　一、效果

　　　　　　二、操作

 

　　通过ajax来调用服务器map数据，来实现搜索功能。

　　　

一、先看效果：

　　1.我要搜索下中国移动的地理信息：

　　2.会搜出17条消息，然后把他们分页显示，一页6条；

 

　　3.每一页的6条数据，会在map生成一个6条marker；

　　4.点击marker的时候会弹出一个popup出来；

二、实际操作：
1.首先把所有数据查出来；

其中在这个图层上面有1000条数据：

 

 

 

 

 

 

 

 

 

 

---

 

$("#btn").click(function() {
　　　　var gridObj,markers,marker_arr=[],popup_arr=[];
    $.ajax({
                    type: "get",
                    url: "http://192.168.1.156:6080/arcgis/rest/services/epyzt/EP_DMDZ/MapServer/0/query",
                    data: {
                        outFeilds: "*",
                        f: "json",
                        where: "NAME='中国移动'", //TextString='河排林场'
                        returnGeometry: true,
                        geometry: "",
                        geometryType: "esriGeometryPolygon",
                        spatialRel: "esriSpatialRelIntersects"
                    },
                    dataType: "json",
                    success: initPagination,
                    error: function() {
                        alert("报错")
                    }
                })

}

2.再把获取到的数据绘制成表格：//详见下下面得PS部分

function initPagination(xhr) {
//这里的表格有个v_index，对应的是json数据的key；而xhr是个复杂的json，在key对应的还是一个对象，所以得重新构造一个数组，数组里面是一个个对象，所以obj都写在function里面，不然每条表格的数据都一样的了。
                    var arr = [];
                    $.each(xhr.features, function(i, n) {
                        var obj = {};
                        obj.px=i+1;
                        obj.img=i+1+".png",
                        obj.sf = n.attributes.PROVINCE;
                        obj.geometry_x = n.geometry.x;
                        obj.geometry_y = n.geometry.y;
                        arr.push(obj)
                    });
                    gridObj = $.fn.bsgrid.init('searchTable', {
                        localData: arr,
                        pageSize: 6,//6行
                        additionalAfterRenderGrid:table_complete//绘制完表格之后调用
                    });
                    
                }
//渲染表格
function operate(record, rowIndex, colIndex, options) {
                    return '<a href="#" onclick="alert(\'ID=' + gridObj.getRecordIndexValue(record, 'ID') + '\');">Operate</a>';
                

 

3.再绘制出当前页的marker

function table_complete (){
　　//先删除所有的marker，再加上当年页的marker；
                    for(var i in marker_arr){
                            markers.removeMarker(marker_arr[i])
                        }
                    for (var i=0;i<gridObj.getPageSize();i++) {
                            var x=gridObj.getCellRecordValue(i,2);
                            var y=gridObj.getCellRecordValue(i,3);
                            var img=gridObj.getCellRecordValue(i,0);
                            addmarker(x,y,img);
                        }
                    
                }
                function addmarker(x, y,img) {
                    markers = new OpenLayers.Layer.Markers("marker Layer", {
                        displayInLayerSwitcher: false
                    }); //加载图片标注图层
                    markers.removeMarker();
                    map.addLayer(markers);
                    lonlat = new OpenLayers.LonLat(x,y).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
                    var size = new OpenLayers.Size(30, 25);
                    var icon = new OpenLayers.Icon(
                        'img/'+img+'.png',
                        size, null);
                    marker = new OpenLayers.Marker(lonlat, icon);
                    
                    marker_arr.push(marker);
                    markers.addMarker(marker);
                    
                }

4.在给每个marker注册一个click事件

marker.events.register("click",marker,function(param){
                        for(var i in popup_arr){
                            map.removePopup(popup_arr[i])
                        }
                        infoWindow(this.lonlat);
                    });
//给每个marker加上popup
function infoWindow (n){
                    
                    var popup=new OpenLayers.Popup(
                        "popup",
                        n,
                        new OpenLayers.Size(100,50),
                        "<div>1232324</div>",
                        true
                    )
                    popup_arr.push(popup)
                    map.addPopup(popup);
                }

 

值得注意的几个是：

　　1.其中有不少技巧，最好用的是一个构造JSON对象，有用过jqgrid或者bsgrid插件的应该都会感觉很爽

　　2.没有得到具体的marker或者popup的时候，可以先创个数据，一个个把它们push进去，再删除的时候一个个遍历，就可以全解决，不用一个个去找。

ps：正常的能够被grid用到的json应该是这种：

var localData = [
    {
        "ID": 202,
        "CHAR": "1",
        "TEXT": "TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_1",
        "NUM": 11.2,
        "XH": 1
    },
    {
        "ID": 201,
        "CHAR": "111",
        "TEXT": "TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_2",
        "XH": 2
    },
    {
        "ID": 200,
        "CHAR": "200",
        "TEXT": "TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_3",
        "XH": 3
    },
    {
        "ID": 199,
        "CHAR": "199",
        "XH": 4
    },
    {
        "ID": 32,
        "CHAR": "34",
        "NUM": 12.1,
        "XH": 5
    }];

但是从后台拿到的数据是这样的，这特么怎么可能可以用，所以得重新构造一组；

ok，年前最后一遍就写到这里了。

欢迎来我得小窝：传奇上帝www.leggod.com