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