Arcgis4js实现链家找房的效果

Posted LZU-GIS

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Arcgis4js实现链家找房的效果相关的知识,希望对你有一定的参考价值。

概述

买房的各位亲们不知是否留意过链家的"地图找房",这样的功能对于使用者来说,是非常方便的,大家可通过连接(https://bj.lianjia.com/ditu/)查看具体效果。鉴于此,本文结合该效果与功能,介绍在Arcgis4js中如何实现类似的效果。


功能效果

1、数据的聚合展示


2、地图高亮


3、聚合数据的钻取


4、列表展示



编码实现

1、数据的聚合展示

链家的实现是基于距离的一个聚合展示,在本实例中做了简化,聚合是通过后台统计查询实现的,其数据组织格式如下:


之后,在地图上做展示,关键代码如下:

                    $("#network").on("click",function(){
                    	for(var i=0;i<data.length;i++){
                    		var _d = data[i];
                    		var geometry = getGeomByWKT(_d.wkt);
                    		var pt = geometry.getCentroid();
                    		var sms = new SimpleMarkerSymbol(
				    							SimpleMarkerSymbol.STYLE_CIRCLE, 60,
				    							new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
											    	new Color([255,0,0]), 2),
											    new Color([255,0,0,0.5]));
											  var tsname = new TextSymbol(_d.counname).setOffset(0, 6).setColor(new Color([255,255,255])) ;  
											  var tsprice = new TextSymbol(_d.price.toFixed(2)+"万").setOffset(0, -7).setColor(new Color([255,255,255])); 
											  var tscount = new TextSymbol(_d.count+"套").setOffset(0, -22).setColor(new Color([255,255,255]));
											  var _gd = _d;
											  _d.index = i;
											  _gd.id="graphic"+i;
											  gLayer.add(new Graphic(pt, sms, _gd));
											  gLayer.add(new Graphic(pt, tsname,_d));
											  gLayer.add(new Graphic(pt, tsprice,_d));
											  gLayer.add(new Graphic(pt, tscount,_d));
                    	}
                    });

实现后效果入下:


2、地图高亮展示

地图高亮展示是鼠标经过聚合点时高亮展示该区域,代码如下:

                    gLayer.on("mouse-over",function(e){
                    	map.setMapCursor("pointer");
                    	var sms = new SimpleMarkerSymbol(
				    							SimpleMarkerSymbol.STYLE_CIRCLE, 60,
				    							new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
											    	new Color([0,0,255]), 2),
											    new Color([0,0,255,0.5]));
											var _zoneG = getGraphicById("graphic"+e.graphic.attributes.index);
											_zoneG.setSymbol(sms);
											gLayer.redraw();
											zLayer.clear();
									    var geometry = getGeomByWKT(e.graphic.attributes.wkt);
									    var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
										    new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
										    new Color([0,0,255]), 2),new Color([0,0,255,0.25])
										  );
									    var gfx = new Graphic(geometry,sfs);
				    					zLayer.add(gfx);
                    });
                    gLayer.on("mouse-out",function(e){
                    	map.setMapCursor("default");
                    	var sms = new SimpleMarkerSymbol(
				    							SimpleMarkerSymbol.STYLE_CIRCLE, 60,
				    							new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
											    	new Color([255,0,0]), 2),
											    new Color([255,0,0,0.5]));
											var _zoneG = getGraphicById("graphic"+e.graphic.attributes.index);
										  _zoneG.setSymbol(sms);
											gLayer.redraw();
											zLayer.clear();
                    })
实现后效果入下:


3、聚合数据的钻取与列表展示

点击聚合数据点,钻取数据,数据分别以地图和列表两种方式进行展示,关键代码如下:

										function addZoneData(attr){
											var geometry = getGeomByWKT(attr.wkt);
									    var extent = geometry.getExtent();
									    map.setExtent(extent);
									    var data = getZoneData(extent);
											$(".popup_main").show();
											var nsrlist = $("#nsrlist").html("");
											lLayer.clear();
											lLayer.show();
											var path = "m127,193l103,0l0,33l-56,0l-11,12l-11,-11l-25.00003,0.00002l0.00003,-34.00002z";
											var _sum = 0;
											for(var i=0;i<data.length;i++){
												var _d = data[i];
												var pt = new Point(_d.X, _d.Y, map.spatialReference);
											  var pms = new PictureMarkerSymbol("img/marker.png",24,24);
											  lLayer.add(new Graphic(pt, pms,_d));
											  var _li = $("<li/>").css("position","relative").appendTo(nsrlist);
											  _li.append('<div class="image"><img src="img/marker.png" /></div>');
											  _li.append('<div class="content">'+
											  	'<div class="item-tle">'+_d.NSRNAME+'</div>'+_d.NSRSUM+'万'+
											  	'</div>');
											  	_sum+=_d.NSRSUM;
											  _li.data("attr",_d);
											  _li.on("click",function(){
											  	var _attr = $(this).data("attr");
											  	showObjInfo(_attr);
											  });
											}
											$("#summary").html(attr.counname+"共有纳税人"+data.length+"人,共纳税"+_sum.toFixed(3)+"万元。")
											$("#block_close").on("click",function(){
												$(".popup_main").hide();
												lLayer.clear();
                   	 		map.infoWindow.hide();
											});
										}
实现效果如下: