（转） Arcgis4js实现链家找房的效果

http://blog.csdn.net/gisshixisheng/article/details/71009901

概述

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

 

功能效果

1、数据的聚合展示

2、地图高亮

3、聚合数据的钻取

4、列表展示

 

编码实现

1、数据的聚合展示

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

之后，在地图上做展示，关键代码如下：

 

[javascript] view plain copy
 
 print?
  1.        $("#network").on("click",function(){  
  2.         for(var i=0;i<data.length;i++){  
  3.             var _d = data[i];  
  4.             var geometry = getGeomByWKT(_d.wkt);  
  5.             var pt = geometry.getCentroid();  
  6.             var sms = new SimpleMarkerSymbol(  
  7.         SimpleMarkerSymbol.STYLE_CIRCLE, 60,  
  8.         new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
  9.     new Color([255,0,0]), 2),  
  10.   new Color([255,0,0,0.5]));  
  11. var tsname = new TextSymbol(_d.counname).setOffset(0, 6).setColor(new Color([255,255,255])) ;    
  12. var tsprice = new TextSymbol(_d.price.toFixed(2)+"万").setOffset(0, -7).setColor(new Color([255,255,255]));   
  13. var tscount = new TextSymbol(_d.count+"套").setOffset(0, -22).setColor(new Color([255,255,255]));  
  14. var _gd = _d;  
  15. _d.index = i;  
  16. _gd.id="graphic"+i;  
  17. gLayer.add(new Graphic(pt, sms, _gd));  
  18. gLayer.add(new Graphic(pt, tsname,_d));  
  19. gLayer.add(new Graphic(pt, tsprice,_d));  
  20. gLayer.add(new Graphic(pt, tscount,_d));  
  21.         }  
  22.        });  

 

实现后效果入下：

2、地图高亮展示

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

 

[javascript] view plain copy
 
 print?
  1.          gLayer.on("mouse-over",function(e){  
  2.             map.setMapCursor("pointer");  
  3.             var sms = new SimpleMarkerSymbol(  
  4.                 SimpleMarkerSymbol.STYLE_CIRCLE, 60,  
  5.                 new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
  6.         new Color([0,0,255]), 2),  
  7.     new Color([0,0,255,0.5]));  
  8. var _zoneG = getGraphicById("graphic"+e.graphic.attributes.index);  
  9. _zoneG.setSymbol(sms);  
  10. gLayer.redraw();  
  11. zLayer.clear();  
  12.   var geometry = getGeomByWKT(e.graphic.attributes.wkt);  
  13.   var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,  
  14.    new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,  
  15.    new Color([0,0,255]), 2),new Color([0,0,255,0.25])  
  16.  );  
  17.   var gfx = new Graphic(geometry,sfs);  
  18.         zLayer.add(gfx);  
  19.          });  
  20.          gLayer.on("mouse-out",function(e){  
  21.             map.setMapCursor("default");  
  22.             var sms = new SimpleMarkerSymbol(  
  23.                 SimpleMarkerSymbol.STYLE_CIRCLE, 60,  
  24.                 new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
  25.         new Color([255,0,0]), 2),  
  26.     new Color([255,0,0,0.5]));  
  27. var _zoneG = getGraphicById("graphic"+e.graphic.attributes.index);  
  28.  _zoneG.setSymbol(sms);  
  29. gLayer.redraw();  
  30. zLayer.clear();  
  31.          })  

实现后效果入下：

 

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

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

 

[javascript] view plain copy
 
 print?
  1. function addZoneData(attr){  
  2.     var geometry = getGeomByWKT(attr.wkt);  
  3.    var extent = geometry.getExtent();  
  4.    map.setExtent(extent);  
  5.    var data = getZoneData(extent);  
  6.     $(".popup_main").show();  
  7.     var nsrlist = $("#nsrlist").html("");  
  8.     lLayer.clear();  
  9.     lLayer.show();  
  10.     var path = "m127,193l103,0l0,33l-56,0l-11,12l-11,-11l-25.00003,0.00002l0.00003,-34.00002z";  
  11.     var _sum = 0;  
  12.     for(var i=0;i<data.length;i++){  
  13.         var _d = data[i];  
  14.         var pt = new Point(_d.X, _d.Y, map.spatialReference);  
  15.       var pms = new PictureMarkerSymbol("img/marker.png",24,24);  
  16.       lLayer.add(new Graphic(pt, pms,_d));  
  17.       var _li = $("<li/>").css("position","relative").appendTo(nsrlist);  
  18.       _li.append('<div class="image"><img src="img/marker.png" /></div>');  
  19.       _li.append('<div class="content">'+  
  20.         '<div class="item-tle">'+_d.NSRNAME+'</div>'+_d.NSRSUM+'万'+  
  21.         '</div>');  
  22.         _sum+=_d.NSRSUM;  
  23.       _li.data("attr",_d);  
  24.       _li.on("click",function(){  
  25.         var _attr = $(this).data("attr");  
  26.         showObjInfo(_attr);  
  27.       });  
  28.     }  
  29.     $("#summary").html(attr.counname+"共有纳税人"+data.length+"人，共纳税"+_sum.toFixed(3)+"万元。")  
  30.     $("#block_close").on("click",function(){  
  31.         $(".popup_main").hide();  
  32.         lLayer.clear();  
  33.                     map.infoWindow.hide();  
  34.     });  
  35. }  

实现效果如下：

 

 


上述实现完整代码如下：

 

 

[html] view plain copy
 
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>  
  6.     <title>Simple Map</title>  
  7.     <link rel="stylesheet" href="http://jsapi.thinkgis.cn/esri/css/esri.css">  
  8.     <style>  
  9.       html, body, #map {  
  10.         height: 100%;  
  11.         width: 100%;  
  12.         margin: 0;  
  13.         padding: 0;  
  14.       }  
  15.       body {  
  16.         background-color: #FFF;  
  17.         overflow: hidden;  
  18.         font-family: "Trebuchet MS";  
  19.       }  
  20.       .info-content a{  
  21.         float:right;  
  22.       }  
  23.       .popup_main{  
  24.         border:1px solid #cdcdcd;  
  25.                 z-index:1001;  
  26.                 position:absolute;  
  27.                 background:#fff;  
  28.                 overflow:hidden;  
  29.                 left:20px;  
  30.                 top:100px;  
  31.                 width:330px;  
  32.                 display: none;  
  33.       }  
  34.       .popup_main .title {  
  35.                 border-bottom:1px solid #dadada;  
  36.                 height:25px;  
  37.                 line-height:25px;  
  38.                 font-size:12px;  
  39.                 color:#4c4c4c;  
  40.                 padding-left:7px;  
  41.             }  
  42.             .popup_main .summary {  
  43.                 margin:2px;  
  44.                 background: #ccc;  
  45.                 padding: 8px;  
  46.                 border-bottom:1px solid #ddd;  
  47.             }  
  48.             .popup_main .content {  
  49.                 height:auto;  
  50.                 padding: 8px;  
  51.                 border-bottom:1px solid #ddd;  
  52.             }  
  53.             .popup_main ul{  
  54.                 list-style: none;  
  55.                 margin: -0px 0;  
  56.                 overflow:hidden;  
  57.                 overflow-y:auto;  
  58.                 max-height: 500px;  
  59.             }  
  60.             .popup_main ul li {  
  61.                 position: relative;  
  62.                 margin-left: -40px;  
  63.                 position: relative;  
  64.                 border-bottom:1px solid #ddd;  
  65.                 cursor: pointer;  
  66.                 height: 50px;  
  67.             }  
  68.             .popup_main ul li:hover{  
  69.                 background: #ccc;  
  70.             }  
  71.             .popup_main ul li .image{  
  72.                 position:absolute;  
  73.                 left:8px;  
  74.                 top: 10px;  
  75.                 height:30px;  
  76.                 text-align:center;  
  77.                 width:30px;  
  78.                 line-height:15px;  
  79.             }  
  80.             .popup_main ul li .image img{  
  81.                 height: 100%;  
  82.             }  
  83.             .popup_main ul li .content{  
  84.                     width: 85%;  
  85.                     float: right;  
  86.                     border: none;  
  87.             }  
  88.             .popup_main ul li .content div.item-tle{  
  89.                   font-size: 14px;  
  90.                     color: #262626;  
  91.                     font-weight: 800;  
  92.                     overflow: hidden;  
  93.                     text-overflow: ellipsis;  
  94.                     line-height: 1;  
  95.             }  
  96.             .popup_main button{  
  97.             position: absolute;  
  98.             z-index: 50;  
  99.             top: 7px;  
  100.             right: 6px;  
  101.             width: 12px;  
  102.             height: 12px;  
  103.             background: url(img/popup_close_15d2283.gif) no-repeat;  
  104.             border: 0;  
  105.             cursor: pointer;  
  106.           }  
  107.     </style>      
  108.     <script type="text/javascript">  
  109.         dojoConfig = {  
  110.           parseOnLoad: true,  
  111.           packages: [{  
  112.             name: 'tdlib',  
  113.             location: this.location.pathname.replace(/\/[^/]+$/, "")+"/tdtlib"  
  114.           }]  
  115.         };  
  116.       </script>  
  117.     <script src="http://jsapi.thinkgis.cn/init.js"></script>  
  118.     <script src="http://lzugis.d152.ptzygj.com/app/js/jquery/jquery-1.8.3.js"></script>  
  119.     <script src="terraformer/terraformer.js"></script>  
  120.   <script src="terraformer/terraformer-wkt-parser.js"></script>  
  121.   <script src="terraformer/terraformer-arcgis-parser.js"></script>  
  122.     <script src="data.js"></script>  
  123.     <script>  
  124.       var map;  
  125.         require([  
  126.             "esri/map",  
  127.             "tdlib/TDTTilesLayer",  
  128.             "esri/layers/GraphicsLayer",  
  129.             "esri/geometry/Point",  
  130.             "esri/geometry/Extent",  
  131.             "esri/geometry/Polyline",  
  132.             "esri/symbols/SimpleLineSymbol",  
  133.             "esri/symbols/SimpleMarkerSymbol",  
  134.             "esri/symbols/PictureMarkerSymbol",  
  135.             "esri/symbols/SimpleFillSymbol",  
  136.             "esri/symbols/TextSymbol",  
  137.             "esri/Color",  
  138.             "esri/geometry/jsonUtils",  
  139.             "esri/graphic",  
  140.              "esri/dijit/InfoWindow",  
  141.             "dojo/domReady!"],  
  142.                 function(Map,  
  143.                      TDTTilesLayer,  
  144.                      GraphicsLayer,  
  145.                      Point,  
  146.                      Extent,  
  147.                 Polyline,  
  148.                 SimpleLineSymbol,  
  149.                 SimpleMarkerSymbol,  
  150.                 PictureMarkerSymbol,  
  151.                 SimpleFillSymbol,  
  152.                 TextSymbol,  
  153.                 Color,  
  154.                 geometryJsonUtils,  
  155.                 Graphic,InfoWindow)  
  156.                 {  
  157.                     map = new Map("map", {   
  158.                                             logo: false,  
  159.                                             center: [116.43228121152976, 40.20122178384614], // longitude, latitude  
  160.                                         zoom: 7  
  161.                                         });  
  162.                                     var vec_c = new TDTTilesLayer("vec")  
  163.                                     map.addLayer(vec_c);  
  164.                                     var zLayer = new GraphicsLayer();  
  165.                     map.addLayer(zLayer);  
  166.                     var gLayer = new GraphicsLayer();  
  167.                     map.addLayer(gLayer);  
  168.                     var lLayer = new GraphicsLayer();  
  169.                     map.addLayer(lLayer);  
  170.                       
  171.                     lLayer.on("mouse-over",function(e){  
  172.                         map.setMapCursor("pointer");  
  173.                     })  
  174.                     lLayer.on("mouse-out",function(e){  
  175.                         map.setMapCursor("default");  
  176.                     })  
  177.                     lLayer.on("click",function(e){  
  178.                         var attr = e.graphic.attributes;  
  179.                         if(attr){  
  180.                             showObjInfo(attr);  
  181.                         }  
  182.                     })  
  183.                       
  184.                      map.on("zoom-end",function(anchor,extent,level,zoomFactor){  
  185.                         if(map.getZoom()<8){  
  186.                             gLayer.show();  
  187.                             lLayer.hide();  
  188.                             map.infoWindow.hide();  
  189.                         };  
  190.                      });  
  191.                       
  192.                     $("#network").on("click",function(){  
  193.                         for(var i=0;i<data.length;i++){  
  194.                             var _d = data[i];  
  195.                             var geometry = getGeomByWKT(_d.wkt);  
  196.                             var pt = geometry.getCentroid();  
  197.                             var sms = new SimpleMarkerSymbol(  
  198.                                                 SimpleMarkerSymbol.STYLE_CIRCLE, 60,  
  199.                                                 new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
  200.                                                     new Color([255,0,0]), 2),  
  201.                                                 new Color([255,0,0,0.5]));  
  202.                                               var tsname = new TextSymbol(_d.counname).setOffset(0, 6).setColor(new Color([255,255,255])) ;    
  203.                                               var tsprice = new TextSymbol(_d.price.toFixed(2)+"万").setOffset(0, -7).setColor(new Color([255,255,255]));   
  204.                                               var tscount = new TextSymbol(_d.count+"套").setOffset(0, -22).setColor(new Color([255,255,255]));  
  205.                                               var _gd = _d;  
  206.                                               _d.index = i;  
  207.                                               _gd.id="graphic"+i;  
  208.                                               gLayer.add(new Graphic(pt, sms, _gd));  
  209.                                               gLayer.add(new Graphic(pt, tsname,_d));  
  210.                                               gLayer.add(new Graphic(pt, tsprice,_d));  
  211.                                               gLayer.add(new Graphic(pt, tscount,_d));  
  212.                         }  
  213.                     });  
  214.                       
  215.                     gLayer.on("mouse-over",function(e){  
  216.                         map.setMapCursor("pointer");  
  217.                         var sms = new SimpleMarkerSymbol(  
  218.                                                 SimpleMarkerSymbol.STYLE_CIRCLE, 60,  
  219.                                                 new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
  220.                                                     new Color([0,0,255]), 2),  
  221.                                                 new Color([0,0,255,0.5]));  
  222.                                             var _zoneG = getGraphicById("graphic"+e.graphic.attributes.index);  
  223.                                             _zoneG.setSymbol(sms);  
  224.                                             gLayer.redraw();  
  225.                                             zLayer.clear();  
  226.                                         var geometry = getGeomByWKT(e.graphic.attributes.wkt);  
  227.                                         var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,  
  228.                                             new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,  
  229.                                             new Color([0,0,255]), 2),new Color([0,0,255,0.25])  
  230.                                           );  
  231.                                         var gfx = new Graphic(geometry,sfs);  
  232.                                         zLayer.add(gfx);  
  233.                     });  
  234.                     gLayer.on("mouse-out",function(e){  
  235.                         map.setMapCursor("default");  
  236.                         var sms = new SimpleMarkerSymbol(  
  237.                                                 SimpleMarkerSymbol.STYLE_CIRCLE, 60,  
  238.                                                 new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
  239.                                                     new Color([255,0,0]), 2),  
  240.                                                 new Color([255,0,0,0.5]));  
  241.                                             var _zoneG = getGraphicById("graphic"+e.graphic.attributes.index);  
  242.                                           _zoneG.setSymbol(sms);  
  243.                                             gLayer.redraw();  
  244.                                             zLayer.clear();  
  245.                     })  
  246.                     gLayer.on("click",function(e){  
  247.                         gLayer.hide();  
  248.                                         addZoneData(e.graphic.attributes);  
  249.                     });  
  250.                     function getGraphicById(id){  
  251.                         var g = null;  
  252.                         var graphics = gLayer.graphics;  
  253.                         for(var i=0,len = graphics.length;i<len;i++){  
  254.                             var graphic = graphics[i];  
  255.                             if(graphic.attributes.id===id){  
  256.                                 g = graphic;  
  257.                                 break;  
  258.                             }  
  259.                         }  
  260.                         return g;  
  261.                     }  
  262.                     function getGeomByWKT(wkt){  
  263.                         var primitive = Terraformer.WKT.parse(wkt);  
  264.                                         var arcgis = Terraformer.ArcGIS.convert(primitive);  
  265.                                         return geometryJsonUtils.fromJson(arcgis);  
  266.                     }  
  267.                     function getZoneData(extent){  
  268.                         var data = [];  
  269.                         for(var i=0;i<10;i++){  
  270.                             var nusnum = GetRandomNum(10,100).toFixed(3);  
  271.                             nusnum = parseFloat(nusnum);  
  272.                             data.push({  
  273.                                 X:GetRandomNum(extent.xmin,extent.xmax),  
  274.                                 Y:GetRandomNum(extent.ymin,extent.ymax),  
  275.                                 NSRNAME:"name"+i,  
  276.                                 NSRSUM:nusnum,  
  277.                                 URL:"#"  
  278.                             });  
  279.                         }  
  280.                         return data;  
  281.                     }  
  282.                                         function addZoneData(attr){  
  283.                                             var geometry = getGeomByWKT(attr.wkt);  
  284.                                         var extent = geometry.getExtent();  
  285.                                         map.setExtent(extent);  
  286.                                         var data = getZoneData(extent);  
  287.                                             $(".popup_main").show();  
  288.                                             var nsrlist = $("#nsrlist").html("");  
  289.                                             lLayer.clear();  
  290.                                             lLayer.show();  
  291.                                             var path = "m127,193l103,0l0,33l-56,0l-11,12l-11,-11l-25.00003,0.00002l0.00003,-34.00002z";  
  292.                                             var _sum = 0;  
  293.                                             for(var i=0;i<data.length;i++){  
  294.                                                 var _d = data[i];  
  295.                                                 var pt = new Point(_d.X, _d.Y, map.spatialReference);  
  296.                                               var pms = new PictureMarkerSymbol("img/marker.png",24,24);  
  297.                                               lLayer.add(new Graphic(pt, pms,_d));  
  298.                                               var _li = $("<li/>").css("position","relative").appendTo(nsrlist);  
  299.                                               _li.append('<div class="image"><img src="img/marker.png" /></div>');  
  300.                                               _li.append('<div class="content">'+  
  301.                                                 '<div class="item-tle">'+_d.NSRNAME+'</div>'+_d.NSRSUM+'万'+  
  302.                                                 '</div>');  
  303.                                                 _sum+=_d.NSRSUM;  
  304.                                               _li.data("attr",_d);  
  305.                                               _li.on("click",function(){  
  306.                                                 var _attr = $(this).data("attr");  
  307.                                                 showObjInfo(_attr);  
  308.                                               });  
  309.                                             }  
  310.                                             $("#summary").html(attr.counname+"共有纳税人"+data.length+"人，共纳税"+_sum.toFixed(3)+"万元。")  
  311.                                             $("#block_close").on("click",function(){  
  312.                                                 $(".popup_main").hide();  
  313.                                                 lLayer.clear();  
  314.                             map.infoWindow.hide();  
  315.                                             });  
  316.                                         }  
  317.                                           
  318.                                         function showObjInfo(data){  
  319.                                             var location = new Point(data.X, data.Y, map.spatialReference);  
  320.                                             map.infoWindow.setTitle(data.NSRNAME);  
  321.                                             var content= $("<div/>").addClass("info-content");  
  322.                                             content.append("<b>纳税人名称：</b>"+data.NSRNAME);  
  323.                                             content.append("<br/><b>纳税人金额：</b>"+data.NSRSUM);  
  324.                                             content.append("<br/><a href="+data.URL+">详细信息>></a>");  
  325.                                             map.infoWindow.setContent(content[0]);  
  326.                                             map.infoWindow.show(location, InfoWindow.ANCHOR_UPPERRIGHT);  
  327.                                             map.centerAt(location);  
  328.                                         }  
  329.                 });  
  330.             function GetRandomNum(min, max){  
  331.             var r = Math.random()*(max - min);  
  332.             var re=r+min;  
  333.             return re;  
  334.       }  
  335.     </script>  
  336.   </head>  
  337.   <body>  
  338.     <div id="map">  
  339.         <div class="popup_main">  
  340.             <div class="title">列表</div>  
  341.             <div class="summary" id="summary">温泉镇共有纳税人100人，共纳税100万元。</div>  
  342.             <ul id="nsrlist">  
  343.             </ul>  
  344.             <button id="block_close" title="关闭"></button>  
  345.         </div>  
  346.         <button style="position:absolute;top:10px;right:10px;z-index: 99;" id="network">network</button>  
  347.     </div>  
  348.   </body>  
  349. </html>  

 

 

---------------------------------------------------------------------------------------------------------------

技术博客

CSDN：http://blog.csdn.NET/gisshixisheng

博客园：http://www.cnblogs.com/lzugis/

在线教程

http://edu.csdn.Net/course/detail/799

Github

https://github.com/lzugis/

联系方式

q       q:1004740957

e-mail:niujp08@qq.com

公众号:lzugis15

Q Q 群:452117357(webgis)

             337469080(Android)

posted @ 2017-08-03 17:39  疯子110  阅读(1011)  评论(0)  编辑  收藏  举报