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();
											});
										}

实现效果如下:

上述实现完整代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" href="http://jsapi.thinkgis.cn/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
      .info-content a{
      	float:right;
      }
      .popup_main{
      	border:1px solid #cdcdcd;
				z-index:1001;
				position:absolute;
				background:#fff;
				overflow:hidden;
				left:20px;
				top:100px;
				width:330px;
				display: none;
      }
      .popup_main .title {
				border-bottom:1px solid #dadada;
				height:25px;
				line-height:25px;
				font-size:12px;
				color:#4c4c4c;
				padding-left:7px;
			}
			.popup_main .summary {
				margin:2px;
				background: #ccc;
				padding: 8px;
				border-bottom:1px solid #ddd;
			}
			.popup_main .content {
				height:auto;
				padding: 8px;
				border-bottom:1px solid #ddd;
			}
			.popup_main ul{
				list-style: none;
				margin: -0px 0;
				overflow:hidden;
				overflow-y:auto;
				max-height: 500px;
			}
			.popup_main ul li {
				position: relative;
				margin-left: -40px;
				position: relative;
				border-bottom:1px solid #ddd;
				cursor: pointer;
				height: 50px;
			}
			.popup_main ul li:hover{
				background: #ccc;
			}
			.popup_main ul li .image{
				position:absolute;
				left:8px;
				top: 10px;
				height:30px;
				text-align:center;
				width:30px;
				line-height:15px;
			}
			.popup_main ul li .image img{
				height: 100%;
			}
			.popup_main ul li .content{
				    width: 85%;
				    float: right;
				    border: none;
			}
			.popup_main ul li .content div.item-tle{
				  font-size: 14px;
					color: #262626;
					font-weight: 800;
					overflow: hidden;
					text-overflow: ellipsis;
					line-height: 1;
			}
			.popup_main button{
		    position: absolute;
		    z-index: 50;
		    top: 7px;
		    right: 6px;
		    width: 12px;
		    height: 12px;
		    background: url(img/popup_close_15d2283.gif) no-repeat;
		    border: 0;
		    cursor: pointer;
		  }
    </style>    
    <script type="text/javascript">
	    dojoConfig = {
	      parseOnLoad: true,
	      packages: [{
	        name: 'tdlib',
	        location: this.location.pathname.replace(/\/[^/]+$/, "")+"/tdtlib"
	      }]
	    };
	  </script>
	<script src="http://jsapi.thinkgis.cn/init.js"></script>
	<script src="http://lzugis.d152.ptzygj.com/app/js/jquery/jquery-1.8.3.js"></script>
	<script src="terraformer/terraformer.js"></script>
  <script src="terraformer/terraformer-wkt-parser.js"></script>
  <script src="terraformer/terraformer-arcgis-parser.js"></script>
	<script src="data.js"></script>
    <script>
      var map;
        require([
            "esri/map",
            "tdlib/TDTTilesLayer",
            "esri/layers/GraphicsLayer",
            "esri/geometry/Point",
            "esri/geometry/Extent",
            "esri/geometry/Polyline",
            "esri/symbols/SimpleLineSymbol",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/PictureMarkerSymbol",
            "esri/symbols/SimpleFillSymbol",
            "esri/symbols/TextSymbol",
            "esri/Color",
            "esri/geometry/jsonUtils",
            "esri/graphic",
             "esri/dijit/InfoWindow",
            "dojo/domReady!"],
                function(Map,
                     TDTTilesLayer,
                     GraphicsLayer,
                     Point,
                     Extent,
                Polyline,
                SimpleLineSymbol,
                SimpleMarkerSymbol,
                PictureMarkerSymbol,
                SimpleFillSymbol,
                TextSymbol,
                Color,
                geometryJsonUtils,
                Graphic,InfoWindow)
                {
                   	map = new Map("map", { 
											logo: false,
											center: [116.43228121152976, 40.20122178384614], // longitude, latitude
									    zoom: 7
										});
								    var vec_c = new TDTTilesLayer("vec")
								    map.addLayer(vec_c);
								    var zLayer = new GraphicsLayer();
                    map.addLayer(zLayer);
                    var gLayer = new GraphicsLayer();
                    map.addLayer(gLayer);
                    var lLayer = new GraphicsLayer();
                    map.addLayer(lLayer);
                    
                    lLayer.on("mouse-over",function(e){
                    	map.setMapCursor("pointer");
                    })
                    lLayer.on("mouse-out",function(e){
                    	map.setMapCursor("default");
                    })
                    lLayer.on("click",function(e){
                    	var attr = e.graphic.attributes;
                    	if(attr){
                    		showObjInfo(attr);
                    	}
                    })
                    
                   	 map.on("zoom-end",function(anchor,extent,level,zoomFactor){
                   	 	if(map.getZoom()<8){
                   	 		gLayer.show();
                   	 		lLayer.hide();
                   	 		map.infoWindow.hide();
                   	 	};
                   	 });
                    
                    $("#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));
                    	}
                    });
                    
                    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();
                    })
                    gLayer.on("click",function(e){
                    	gLayer.hide();
									    addZoneData(e.graphic.attributes);
                    });
                    function getGraphicById(id){
                    	var g = null;
                    	var graphics = gLayer.graphics;
                    	for(var i=0,len = graphics.length;i<len;i++){
                    		var graphic = graphics[i];
                    		if(graphic.attributes.id===id){
                    			g = graphic;
                    			break;
                    		}
                    	}
                    	return g;
                    }
                    function getGeomByWKT(wkt){
                    	var primitive = Terraformer.WKT.parse(wkt);
									    var arcgis = Terraformer.ArcGIS.convert(primitive);
									    return geometryJsonUtils.fromJson(arcgis);
                    }
                    function getZoneData(extent){
                    	var data = [];
                    	for(var i=0;i<10;i++){
                    		var nusnum = GetRandomNum(10,100).toFixed(3);
                    		nusnum = parseFloat(nusnum);
                    		data.push({
                    			X:GetRandomNum(extent.xmin,extent.xmax),
                    			Y:GetRandomNum(extent.ymin,extent.ymax),
                    			NSRNAME:"name"+i,
                    			NSRSUM:nusnum,
                    			URL:"#"
                    		});
                    	}
                    	return data;
                    }
										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();
											});
										}
										
										function showObjInfo(data){
											var location = new Point(data.X, data.Y, map.spatialReference);
											map.infoWindow.setTitle(data.NSRNAME);
											var content= $("<div/>").addClass("info-content");
											content.append("<b>纳税人名称:</b>"+data.NSRNAME);
											content.append("<br/><b>纳税人金额:</b>"+data.NSRSUM);
											content.append("<br/><a href="+data.URL+">详细信息>></a>");
											map.infoWindow.setContent(content[0]);
											map.infoWindow.show(location, InfoWindow.ANCHOR_UPPERRIGHT);
											map.centerAt(location);
										}
                });
			function GetRandomNum(min, max){
            var r = Math.random()*(max - min);
            var re=r+min;
            return re;
      }
    </script>
  </head>
  <body>
    <div id="map">
    	<div class="popup_main">
    		<div class="title">列表</div>
    		<div class="summary" id="summary">温泉镇共有纳税人100人,共纳税100万元。</div>
    		<ul id="nsrlist">
    		</ul>
    		<button id="block_close" title="关闭"></button>
    	</div>
    	<button style="position:absolute;top:10px;right:10px;z-index: 99;" id="network">network</button>
    </div>
  </body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员互动联盟

android apk 防反编译技术第一篇-加壳技术

做android framework方面的工作将近三年的时间了,现在公司让做一下android apk安全方面的研究,于是最近就在网上找大量的资料来学习。现在...

66080
来自专栏移动开发面面观

ProgressiveJpeg介绍与在Android中的使用

27940
来自专栏Android中高级开发

Android开发之漫漫长途 XI——从I到X的小结

该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列。该系列引用了《Android开发艺术探索...

13820
来自专栏Seebug漏洞平台

“盲”逆向:iOS 应用 Blind 寻踪

原文:https://exceptionlevelone.blogspot.tw/2017/10/blind-reversing.html 译者:hello19...

520140
来自专栏程序员的SOD蜜

用事实说话,成熟的ORM性能不是瓶颈,灵活性不是问题:EF5.0、PDF.NET5.0、Dapper原理分析与测试手记

[本文篇幅较长,可以通过目录查看您感兴趣的内容,或者下载格式良好的PDF版本文件查看]  目录 一、ORM的"三国志"    2 1,PDF.NET诞生历程...

51290
来自专栏数据分析

使用Visual Studio 2010 一步一步创建Powershell Module 和 Cmdlet

之前写了一个C# 调用PowerShell方法, 那么怎么反过来操作呢,也就是怎么样用C#写一个powershell命令呢? 现在就用C#写一个超级简单的Mod...

45390
来自专栏人工智能LeadAI

实时Android语音对讲系统架构

本文属于Android局域网内的语音对讲项目(https://github.com/yhthu/intercom)系列,《通过UDP广播实现Android局域网...

1.6K40
来自专栏祝威廉

PySpark如何设置worker的python命令

因为最近在研究spark-deep-learning项目,所以重点补习了下之前PySpark相关的知识,跟着源码走了一遍。希望能够对本文的读者有所帮助。

11120
来自专栏跟着阿笨一起玩NET

C#如何快速高效地导出大量数据?

本文转载:http://www.cnblogs.com/herbert/archive/2010/07/28/1787095.html

49110
来自专栏Seebug漏洞平台

“盲”逆向:iOS 应用 Blind 寻踪

原文地址:《"BLIND" Reversing - A Look At The Blind iOS App》

40770

扫码关注云+社区

领取腾讯云代金券