ajax数据交互(arcgis server)

时间:2022-11-10 12:31:02
目录:

      一、效果

      二、操作

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

   

一、先看效果

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

ajax数据交互(arcgis server)

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

ajax数据交互(arcgis server)

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

ajax数据交互(arcgis server)

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

ajax数据交互(arcgis server)

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

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

ajax数据交互(arcgis server)ajax数据交互(arcgis server)


 $("#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
}];

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

ajax数据交互(arcgis server)

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

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