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

（转） 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);
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. })
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. });
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. });
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. }
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)
相关阅读:
php防止刷流量攻击
 PHP序列化变量的4种方法
 php递归操作目录递归对参数转义
 php 图像裁剪(自定义裁剪图片大小)
jquery实现点击文字后变成文本框且可修改
 mysql查看表注释和字段注释的方法
 php 获取中文字符串首字母
 Nginx.conf配置
 光盘作为yum源
 win7下安装mongodb
原文地址：https://www.cnblogs.com/telwanggs/p/7280970.html

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

概述

功能效果

编码实现