ajax数据交互(arcgis server)

达人科技 2017-01-18 17:01

目录：

　　　　　　一、效果

　　　　　　二、操作

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

一、先看效果：

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

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

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

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

二、实际操作：

1.首先把所有数据查出来；

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

 1 $("#btn").click(function {

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

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

3.再绘制出当前页的marker

 1 function table_complete {

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

 1 marker.events.register("click",marker,function(param){
 2 for(var i in popup_arr){
 3  map.removePopup(popup_arr[i])
 4  }
 5 infoWindow(this.lonlat);
 6  });
 7 //给每个marker加上popup
 8 function infoWindow (n){
 9 
10 var popup=new OpenLayers.Popup(
11 "popup",
12  n,
13 new OpenLayers.Size(100,50),
14 "<div>1232324</div>",
15 true
16  )
17  popup_arr.push(popup)
18  map.addPopup(popup);
19 }

值得注意的几个是：

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

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

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

 1 var localData = [
 2     {
 3         "ID": 202,
 4         "CHAR": "1",
 5         "TEXT": "TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_1",
 6         "NUM": 11.2,
 7         "XH": 1
 8     },
 9     {
10         "ID": 201,
11         "CHAR": "111",
12         "TEXT": "TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_2",
13         "XH": 2
14     },
15     {
16         "ID": 200,
17         "CHAR": "200",
18         "TEXT": "TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_TEXT_3",
19         "XH": 3
20     },
21     {
22         "ID": 199,
23         "CHAR": "199",
24         "XH": 4
25     },
26     {
27         "ID": 32,
28         "CHAR": "34",
29         "NUM": 12.1,
30         "XH": 5
31     }];

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

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

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