• （转） 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.          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.                 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.                 30px;  
    78.                 line-height:15px;  
    79.             }  
    80.             .popup_main ul li .image img{  
    81.                 height: 100%;  
    82.             }  
    83.             .popup_main ul li .content{  
    84.                      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.              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)
  • 相关阅读:
    关于基本的线程的生命周期
    HTML Response ContentType 大全
    IE与Firefox的CSS兼容大全
    文件上传代码
    C#.NET里面抽象类和接口有什么区别
    用SQL命令创建数据库
    JS根据生日算岁数
    改变Iframe的Src
    JS做加法精度问题
    真正的问题应该在我身上……
  • 原文地址：https://www.cnblogs.com/telwanggs/p/7280970.html
Copyright © 2020-2023  润新知