Arcgis for Javascript API下类似于百度搜索A、B、C、D marker的实现方式

原文:Arcgis for Javascript API下类似于百度搜索A、B、C、D marker的实现方式

多说无益，首先贴两张图让大家看看具体的效果：

图1、百度地图搜索结果

图2、Arcgis for JavaScript实现的效果

看到了效果，是不是各位有点小鸡动，是不是也宠宠欲动，有木有？但是具体是怎么实现的呢？下面我来详细的给各位说说我的实现思路吧。

第一，数据。

其实搜索的对象从类型上来说，应该是点、线、面都支持的，但是在实际的操作过程中，不论是百度还是我自己做的时候，都会将所有的对象抽成点对象，也就是将每一个对象转换成为POI热点，再将对象的坐标信息提取出来，将所有对象入库。

第二，实现。

实现该效果，首先，根据用户的查询条件从数据库里面获取数据，数据返回给web端的是JSON格式的。获取到数据之后，接着做数据在左侧的分页展示与地图上与左侧列表相对应的展示，左侧列表的展示我就不详细说了，做过web的大家都有一万种方法去实现它，重点说说地图上的展示。

这些红色的气泡是一个graphiclayer，每一个气泡是一个graphic，只是根据不同的顺序，graphic的PictureMarkerSymbol不同而已，下面是实现的代码：

1. <span style="white-space:pre">    </span>addQueryPopup = function(data){
2. redPopupLayer.clear();
3. var mlpoint = new esri.geometry.Multipoint(new esri.SpatialReference({ wkid:4326}));
4. var graphic = null;
5. for(var i=0;i<data.length;i++){
6. var att=data[i];
7. var pt = new esri.geometry.Point(att.x,att.y,new esri.SpatialReference({ wkid:4326}));
8. mlpoint.addPoint(pt);
9. var sms = null;
10. switch(i){
11. case 0:{
12. sms = new esri.symbol.PictureMarkerSymbol("index/css/map/images/location_icon/A.PNG",15,19);
13. break;
14. }
15. case 1:{
16. sms = new esri.symbol.PictureMarkerSymbol("index/css/map/images/location_icon/B.PNG",15,19);
17. break;
18. }
19. case 2:{
20. sms = new esri.symbol.PictureMarkerSymbol("index/css/map/images/location_icon/C.PNG",15,19);
21. break;
22. }
23. case 3:{
24. sms = new esri.symbol.PictureMarkerSymbol("index/css/map/images/location_icon/D.PNG",15,19);
25. break;
26. }
27. case 4:{
28. sms = new esri.symbol.PictureMarkerSymbol("index/css/map/images/location_icon/E.PNG",15,19);
29. break;
30. }
31. case 5:{
32. sms = new esri.symbol.PictureMarkerSymbol("index/css/map/images/location_icon/F.PNG",15,19);
33. break;
34. }
35. case 6:{
36. sms = new esri.symbol.PictureMarkerSymbol("index/css/map/images/location_icon/G.PNG",15,19);
37. break;
38. }
39. case 7:{
40. sms = new esri.symbol.PictureMarkerSymbol("index/css/map/images/location_icon/H.PNG",15,19);
41. break;
42. }
43. case 8:{
44. sms = new esri.symbol.PictureMarkerSymbol("index/css/map/images/location_icon/I.PNG",15,19);
45. break;
46. }
47. default:{
48. sms = new esri.symbol.PictureMarkerSymbol("index/css/map/images/location_icon/J.PNG",15,19);
49. }
50. }
51. graphic = new esri.Graphic(pt, sms, att);
52. redPopupLayer.add(graphic);
53. }
54. var extent = mlpoint.getExtent();
55. map.setExtent(extent.expand(2));
56. };

这样，就实现了类似于上图的效果。

第三，联动。

联动，是个什么概念呢？对于搜索出来的结果，点击气泡，会弹出该对象的信息，如下：

图3、百度地图的信息框

图4、arcgis的信息框

所谓的联动呢，就是点击左侧列表也能弹出点击红气泡一样的信息框，那么在Arcgis中如何实现呢？下面再说说我实现该效果的思路。

一般来说，信息框里面显示的内容大都是动态获取的，所以我的处理方式是给传递一个该对象唯一编码id的参数，在后台获取到数据之后在后台拼html代码或者传到前台拼html代码，实现方法如下：

1. <span style="white-space:pre">    </span>/**
2. * 显示对象信息框InfoWindow
3. */
4. showObjInfo = function(id){
5. $.ajax({
6. url:"wateruserbaseController.do?baseInfoSummary&id="+id,
7. type:"POST",
8. dataType:"html",
9. success:function(data){
10. data=eval(data);
11. var pt = new esri.geometry.Point(data.x,data.y,{wkid:4326});
12. var name = data.name;
13. map.infoWindow.resize(350,300);
14. map.infoWindow.setTitle(name+"  <a class='detailsinfo' id='detailsinfo'>详细</a>");
15. $("#detailsinfo").on("click",function(){
16. showObjDetailInfo(id,name);
17. });
18. map.infoWindow.setContent(data.html);
19. map.infoWindow.show(pt);
20. }
21. });
22. };

有了以上方法,在左侧列表和marker对象点击的时候调用相同的方法，传递参数为该对象的唯一编码id即可。

眼细的朋友可能看到了，在信息框的标题栏还有一个详细的链接，是的，这个链接是起作用的，点击详细链接，弹出该对象的详细信息，调用的方法如下：

1. <span style="white-space:pre">    </span>/**
2. * 显示详细信息
3. */
4. showObjDetailInfo = function(id){       <pre name="code" class="javascript"><span style="white-space:pre">      </span>$.ajax({
5. url:"wateruserbaseController.do?baseInfo&id="+id,
6. type:"POST",
7. dataType:"html",
8. success:function(data){
9. data=eval(data);
10. var name = data.name;
11. $.Window.setTitle(name);

1. <span style="white-space:pre">            </span>$.Window.setContent(data.html);
2. $.Window.show();
3. }
4. });

};