lzugis——Arcgis Server for JavaScript API之POI

POI（Point Of Interest），感兴趣点。事实上呢，严格意义上说应该不是POI，可是单位就这样叫了，我也就这样叫了，事实上现的功能大致是这种：用过百度地图的朋友们都知道你在百度地图时，当鼠标经过某个点时会显示这个对象的名称，点击该对象，会弹出该对象的具体信息。例如以下图所看到的：

实现后的效果呢就是这样子的，以下呢我来说说在Arcgis Server for JavaScript API下。我实现该效果的思路与想法。

首先，得有一个图层用于显示这些点对象。这个图层能够是切片，也能够是WMS。也能够是featurelayer。反正仅仅要是能将这些东西在地图上显示出来就Ok了。

map = new Map("map",{
	logo:false,
	center: [106.6854, 35.8364],
	slider: true
});

var tiledLayer = new Tiled(tiledUrl);
map.addLayer(tiledLayer);	

接下来说说这些点到底是怎么回事，事实上呢，这些点呢就是一个JSON格式的数据。里面的每个对象包括了该对象的属性信息。返回的JSON格式的大概例如以下：

{
	total:3,
	layerpoi:[
		{poiCode:'0',poiTitle:'wlmq',poix:9748157.53561782,poiy:5429353.112666599 },
		{poiCode:'1',poiTitle:'hhht',poix:12453416.840686005,poiy:4997253.113785474 },
		{poiCode:'2',poiTitle:'lz',poix:11528834.54654876,poiy:4319715.295065851 }
	]
}

注意，每个对象必须得有一个id。name，x，y，前面这四个是必须的，其它的可有可无，至于说怎么返回，这个事情你自己考虑，怎么方便怎么来，asp.net能够用*.ashx。java能够考虑servlet或者别的。反正能返回这个JSON就Ok。

那么。我何时请求让他返回呢。有两个时间：1、地图初始化载入的时候。2、地图的extent发生变化的时候。

我们能够用ajax来实现：

function excuteData(dataUrl){
	$.ajax({
		type: "post",
		dataType: "JSON",
		url: dataUrl,
		data: {level: mapLevel, bbox: bbox},
		success: function(json){      					
			var data = json.layerpoi;
			total=json.total; 
			if(total!=0){
				for(var i in data){
					var xmin,ymin,xmax,ymax;
					xmin=data[i].poix-offset;
					ymin=data[i].poiy-offset;
					xmax=data[i].poix+offset;
					ymax=data[i].poiy+offset;
					var poiExtent = new esri.geometry.Extent(xmin,ymin,xmax,ymax,map.spatialReference);
					poiArray[i] = new POI(data[i].poiType,data[i].poiTitle,data[i].poix,data[i].poiy,poiExtent);	      							
				}
			}
		}
	});
}

分析上面的代码，ajax请求。传递的參数为level（地图的级别）。bbox（地图当前的四至），意思就是通过当前地图的级别和四至推断当前但是范围内所包括的点对象的个数与信息，success后返回JSON，首先，推断total的个数是否为0。不为0，说明有点对象。这时。依据地图的比例尺计算一个合理的offset，依据x、y、offset给每个点对象创建一个extent。你能够建一个对象类将这些对象点的信息存储起来：

function POI(code,title,x,y,extent){
	this.code=code;
	this.title=title;
	this.x=x;
	this.y=y;
	this.extent=extent;
}

接着。实现移动鼠标去推断鼠标当前所在点是否被对象点所包括，包括了，显示该对象的信息。并高亮显示给对象：

	    //鼠标移动事件
            function mapMouseMove(evt){
            	var point = evt.mapPoint;
            	for(var i = 0; i < poiArray.length; i++){	            		
            		var extent=poiArray[i].extent;	
            		if(extent.contains(point)){
            			console.log("true");
            			poipoint = new esri.geometry.Point([poiArray[i].x,poiArray[i].y],map.spatialReference);
            			var graphicMarker = new esri.Graphic(poipoint, pmsHover);
            			map.graphics.add(graphicMarker);
            			var font  = new esri.symbol.Font();
        			font.setSize("10pt");
        			font.setFamily("微软雅黑");
        			var text = new esri.symbol.TextSymbol(poiArray[i].title);
        			text.setFont(font);
        			text.setColor(new dojo.Color([0,0,0,100]));
        			text.setOffset(15,-20);
        			var graphicLabel = new esri.Graphic(poipoint,text);
        			map.graphics.add(graphicLabel);
            			flag=i;

				break;
            		}
            		else{
            			console.log("false");
            			map.graphics.clear();          			
            			flag=null;
            		}
            	}
            }
            map.on("mouse-move",mapMouseMove);

给地图加入鼠标移动事件，当移动到对象出现对象名称时，点击该对象。出现对象的具体信息。所以给地图加入click事件：

	   function mapClick(evt){
            	if(flag==null){
            		return;
            	}
            	else{
            		map.centerAt(poipoint);
            		map.infoWindow.setTitle(poiArray[flag].title);
    				map.infoWindow.setContent("类型:"+poiArray[flag].type
    						+"<br>X:"+poiArray[flag].x
    						+"<br>Y:"+poiArray[flag].y);
    				map.infoWindow.show(poipoint);
            	}
            }
            map.on("click",mapClick);

上面说了，请求返回JSON数据的时间有俩。所以还得给地图加入extent-change事件：

	    function extentChange(evt){
            	mapLevel=map.getLevel();
            	bbox=this.map.extent.xmin+","+this.map.extent.ymin+","+this.map.extent.xmax+","+this.map.extent.ymax;
            	excuteData(dataUrl);
            }
            map.on("extent-change",extentChange);

这样，我所要的功能就基本上实现了。效果例如以下：

初始状态

鼠标经过时显示该对象的名称并高亮显示

单击时显示该对象的具体信息

到此，我的介绍就结束了。欢迎您关注lzugis

lzugis，关注GIS。gis路上有我，你并不孤独！