OL2中实现百度地图ABCD marker的效果

概述：

上文中提到了在Arcgis for JS中实现百度地图ABCD的marker效果，在本文，讲述如何在OpenLayers2中实现类似的效果。

 

效果：

为直观期间，先将效果贴出来。

效果图1

联动展示

思路：

1、列表与地图的互动

鼠标经过列表时，修改列表图标，并根据列表返回的值在地图上绘蓝色的marker；鼠标移出，修改列表图标为红色，清空地图marker图层。

关键代码：

[javascript] view plain copy print?
  1. title.on("mouseover",function(){  
  2.     var i = $(this).attr("i");  
  3.     $("#img"+i).attr("src","img/blue.png");  
  4.     var data = $(this).data("attr");  
  5.     var hpt = new OpenLayers.LonLat(data.x,data.y);  
  6.     var hicon = new OpenLayers.Icon('img/blue.png',size,offset);  
  7.     hMarker = new OpenLayers.Marker(hpt,hicon);  
  8.     markerLyr.addMarker(hMarker);  
  9.     showName(hpt,data.name,"item-label-name");  
  10. });  
  11. title.on("mouseout",function(){  
  12.     var i = $(this).attr("i");  
  13.     $("#img"+i).attr("src","img/red.png");  
  14.     markerLyr.removeMarker(hMarker);  
  15.     hlabelLyr.clear();  
  16. });  
  17. title.on("click",function(){  
  18.     var data = $(this).data("attr");  
  19.     showInfowindow(data.name,data.desc);  
  20. });  

2、地图与列表的互动

鼠标经过地图红色的marker时，修改对应列表图标，并将红色 marker的图片换成蓝色的；鼠标移出，修改对应列表图标，并修改marker为红色。

关键代码：

[javascript] view plain copy print?
  1. marker.events.register("click", feature, function(e){  
  2.     var data = e.object.attr;  
  3.     showInfowindow(data.name,data.desc);  
  4. });  
  5. marker.events.register("mouseover", feature, function(e){  
  6.     map.layerContainerDiv.style.cursor = "pointer";  
  7.     var id= e.object.id;  
  8.     $("#img"+id).attr("src","img/blue.png");  
  9.     $("#li"+id).css("background","#f2f2f2");  
  10.     var data = e.object.attr;  
  11.     var hpt = new OpenLayers.LonLat(data.x, data.y);  
  12.     showName(hpt,data.name,"item-label-name-map");  
  13. });  
  14. marker.events.register("mouseout", feature, function(e){  
  15.     map.layerContainerDiv.style.cursor = "url("  
  16.         + OpenLayers.Util.getRootPath()  
  17.         + "img/pan.cur),default";  
  18.     var id= e.object.id;  
  19.     $("#img"+id).attr("src","red.png");  
  20.     $("#li"+id).css("background","#ffffff");  
  21.     hlabelLyr.clear();  
  22. });  
  23. markerLyr.addMarker(marker);  
  24. var label = new OpenLayers.Label(pt,i+1,"item-label");  
  25. labelLyr.add(label);  


3、地图上的1,2,3,4...等数字是一个label图层，不参与联动；

4、数据以JSON的形式传递，在本实例中，根据地图的四至动态生成的，如下：

[javascript] view plain copy print?
  1. function getRandomXY(){  
  2.     var json = new Array();  
  3.     for(var i=0;i<8;i++){  
  4.         var w = bounds.getWidth();  
  5.         var h = bounds.getHeight();  
  6.         var x = Math.random() * w + bounds.left;  
  7.         var y = Math.random() * h + bounds.bottom;  
  8.         json.push({  
  9.             id:i,  
  10.             name:"name"+i,  
  11.             desc:"this is the name"+i,  
  12.             x:x,  
  13.             y:y  
  14.         })  
  15.     }  
  16.     return json;  
  17. }  


完整代码如下：

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title>openlayers map</title>  
  6.     <link rel="stylesheet" type="text/css" href="http://localhost/olapi/theme/default/style.css"/>  
  7.     <style>  
  8.         html, body, #map{  
  9.             padding:0;  
  10.             margin:0;  
  11.             height:100%;  
  12.             width:100%;  
  13.             overflow: hidden;  
  14.             font-size: 12.5px;  
  15.             font-family:"宋体"  
  16.         }  
  17.         .item-list{  
  18.             position: absolute;  
  19.             top:100px;  
  20.             left: 20px;  
  21.             z-index: 999;  
  22.             border: 1px solid #ccc;  
  23.             width: 200px;  
  24.             background: #fff;  
  25.         }  
  26.         .list-close{  
  27.             background: url("img/panel_tools.png");  
  28.             width: 16px;  
  29.             height: 16px;  
  30.             float: right;  
  31.             margin: 3px 3px;  
  32.             background-position: -16px 0px;  
  33.         }  
  34.         .list-close:hover{  
  35.             cursor: pointer;  
  36.         }  
  37.         .list-title{  
  38.             background: #009dda;  
  39.             color: #fff;  
  40.             padding: 5px 8px;  
  41.             font-weight: bold;  
  42.         }  
  43.         ul{  
  44.             list-style: none;  
  45.             margin: -0px 0;  
  46.         }  
  47.         ul li{  
  48.             border-bottom: 1px dotted #eee;  
  49.             margin-left: -40px;  
  50.             margin-top: 5px;  
  51.             position: relative;  
  52.         }  
  53.         ul li:hover{  
  54.             background: #f2f2f2;  
  55.         }  
  56.         .item{  
  57.             padding: 2px 5px;  
  58.         }  
  59.         .item:hover{  
  60.             cursor: pointer;  
  61.         }  
  62.         .item-num{  
  63.             position: absolute;  
  64.             top: 4px;  
  65.             left: 12px;  
  66.             color:#fff;  
  67.             font-size: 15px;  
  68.             font-weight: bold;  
  69.         }  
  70.         .item-title{  
  71.             float: right;  
  72.             font-weight: bold;  
  73.             margin-right: 10px;  
  74.         }  
  75.         .item-content{  
  76.             padding: 3px 5px;  
  77.         }  
  78.         .item-detail{  
  79.             margin: 3px 5px;  
  80.             float: right;  
  81.         }  
  82.         .item-detail:hover{  
  83.             text-decoration: underline;  
  84.             color: #01A4F8;  
  85.             cursor: pointer;  
  86.         }  
  87.         .item-label{  
  88.             color:#fff;  
  89.             font-size: 15px;  
  90.             font-weight: bold;  
  91.             margin-top: 2px;  
  92.             margin-left: 7px;  
  93.         }  
  94.         .item-label-name,.item-label-name-map{  
  95.             border:1px solid #a6c9e2;  
  96.             background: #fff;  
  97.             padding: 3px 5px;  
  98.             font-size: 12px;  
  99.             margin-top: 23px;  
  100.             margin-left: 15px;  
  101.             border-radius: 5px;  
  102.         }  
  103.         .item-label-name-map{  
  104.             margin-left: 25px;  
  105.         }  
  106.     </style>  
  107.     <!--引入jquery 库 -->  
  108.     <script type="text/javascript" src="http://localhost/olapi/OpenLayers.js"></script>  
  109.     <script type="text/javascript" src="http://localhost/olapi/lib/OpenLayers/Lang/zh-CN.js"></script>  
  110.     <script src="http://localhost/jquery/jquery-1.8.3.js"></script>  
  111.     <script src="extend/LabelLayer.js"></script>  
  112.     <script>  
  113.         var map;  
  114.         var tiled;  
  115.         $(window).load(function() {  
  116.             var bounds = new OpenLayers.Bounds(  
  117.                     87.57582859314434, 19.969920291221204,  
  118.                     126.56713756740385, 45.693810203800794  
  119.             );  
  120.             var options = {  
  121.                 controls: [],  
  122.                 maxExtent: bounds,  
  123.                 maxResolution: 0.1523098006807012,  
  124.                 projection: "EPSG:4326",  
  125.                 units: 'degrees'  
  126.             };  
  127.             map = new OpenLayers.Map('map', options);  
  128.             map.addControl(new OpenLayers.Control.Zoom());  
  129.             map.addControl(new OpenLayers.Control.Navigation());  
  130.             map.addControl( new OpenLayers.Control.MousePosition());  
  131.             var tiled = new OpenLayers.Layer.WMS(  
  132.                     "province", "http://localhost:8088/geoserver/lzugis/wms",  
  133.                     {  
  134.                         "LAYERS": 'province',  
  135.                         "STYLES": '',  
  136.                         format: 'image/png'  
  137.                     },  
  138.                     {  
  139.                         buffer: 0,  
  140.                         displayOutsideMaxExtent: true,  
  141.                         isBaseLayer: true,  
  142.                         yx : {'EPSG:4326' : true}  
  143.                     }  
  144.             );  
  145.             var markerLyr = new OpenLayers.Layer.Markers("marker");  
  146.             var labelLyr = new OpenLayers.Layer.Labels("label");  
  147.             var hlabelLyr = new OpenLayers.Layer.Labels("hlabelLyr");  
  148.             map.addLayers([tiled,markerLyr,labelLyr,hlabelLyr]);  
  149.             map.zoomToExtent(bounds);  
  150.   
  151.             var data = getRandomXY();  
  152.             console.log(data);  
  153.             var ul = $("#items");  
  154.             var size = new OpenLayers.Size(24,26);  
  155.             var offset = new OpenLayers.Pixel(0, 0);  
  156.             var hMarker=null;  
  157.             for(var i=0;i<data.length;i++) {  
  158.                 /**  
  159.                  * 地图内容  
  160.                  */  
  161.                 var pt =  new OpenLayers.LonLat(data[i].x, data[i].y);  
  162.                 var icon = new OpenLayers.Icon('img/red.png',size,offset);  
  163.                 var feature = new OpenLayers.Feature(markerLyr,  
  164.                         pt,  
  165.                         {'icon': icon,'attr':data[i]});  
  166.                 var marker = feature.createMarker();  
  167.                 marker.attr = data[i];  
  168.                 marker.id = i;  
  169.                 marker.events.register("click", feature, function(e){  
  170.                     var data = e.object.attr;  
  171.                     showInfowindow(data.name,data.desc);  
  172.                 });  
  173.                 marker.events.register("mouseover", feature, function(e){  
  174.                     map.layerContainerDiv.style.cursor = "pointer";  
  175.                     var id= e.object.id;  
  176.                     $("#img"+id).attr("src","img/blue.png");  
  177.                     $("#li"+id).css("background","#f2f2f2");  
  178.                     var data = e.object.attr;  
  179.                     var hpt = new OpenLayers.LonLat(data.x, data.y);  
  180.                     showName(hpt,data.name,"item-label-name-map");  
  181.                 });  
  182.                 marker.events.register("mouseout", feature, function(e){  
  183.                     map.layerContainerDiv.style.cursor = "url("  
  184.                         + OpenLayers.Util.getRootPath()  
  185.                         + "img/pan.cur),default";  
  186.                     var id= e.object.id;  
  187.                     $("#img"+id).attr("src","red.png");  
  188.                     $("#li"+id).css("background","#ffffff");  
  189.                     hlabelLyr.clear();  
  190.                 });  
  191.                 markerLyr.addMarker(marker);  
  192.                 var label = new OpenLayers.Label(pt,i+1,"item-label");  
  193.                 labelLyr.add(label);  
  194.                 /**  
  195.                  * 列表内容  
  196.                  */  
  197.                 var li = $("<li />").attr("id","li"+i).appendTo(ul);  
  198.                 var title = $("<div />").addClass("item").attr("i",i).data("attr",data[i]);  
  199.                 var img = $("<img />").attr("id","img"+i).attr("src", "img/red.png")/*.attr("width", "16").attr("height", "18")*/;  
  200.                 var num = $("<a />").addClass("item-num").html(i+1);  
  201.                 var name = $("<div />").addClass("item-title").html(data[i].name);  
  202.                 title.append(img).append(num).append(name);  
  203.                 var content = $("<a />").addClass("item-content").html(data[i].desc);  
  204.                 var detail = $("<a />").addClass("item-detail").html("详细>>");  
  205.                 li.append(title).append(content).append(detail);  
  206.                 title.on("mouseover",function(){  
  207.                     var i = $(this).attr("i");  
  208.                     $("#img"+i).attr("src","img/blue.png");  
  209.                     var data = $(this).data("attr");  
  210.                     var hpt = new OpenLayers.LonLat(data.x,data.y);  
  211.                     var hicon = new OpenLayers.Icon('img/blue.png',size,offset);  
  212.                     hMarker = new OpenLayers.Marker(hpt,hicon);  
  213.                     markerLyr.addMarker(hMarker);  
  214.                     showName(hpt,data.name,"item-label-name");  
  215.                 });  
  216.                 title.on("mouseout",function(){  
  217.                     var i = $(this).attr("i");  
  218.                     $("#img"+i).attr("src","img/red.png");  
  219.                     markerLyr.removeMarker(hMarker);  
  220.                     hlabelLyr.clear();  
  221.                 });  
  222.                 title.on("click",function(){  
  223.                     var data = $(this).data("attr");  
  224.                     showInfowindow(data.name,data.desc);  
  225.                 });  
  226.             }  
  227.   
  228.             $(".item-list").draggable({  
  229.                 handle:'.list-title'  
  230.             });  
  231.             $("#close").on("click",function(){  
  232.                 $(".item-list").hide();  
  233.             });  
  234.   
  235.             function showName(pt,name,classname){  
  236.                 var label = new OpenLayers.Label(pt,name,classname);  
  237.                 hlabelLyr.add(label);  
  238.             }  
  239.             function showInfowindow(title,content){  
  240.                 $("<div />").window({  
  241.                     width:200,  
  242.                     height:80,  
  243.                     modal:true,  
  244.                     maximizable:false,  
  245.                     minimizable:false,  
  246.                     collapsible:false,  
  247.                     closable:true,  
  248.                     title:title,  
  249.                     content:content  
  250.                 });  
  251.             }  
  252.   
  253.             function getRandomXY(){  
  254.                 var json = new Array();  
  255.                 for(var i=0;i<8;i++){  
  256.                     var w = bounds.getWidth();  
  257.                     var h = bounds.getHeight();  
  258.                     var x = Math.random() * w + bounds.left;  
  259.                     var y = Math.random() * h + bounds.bottom;  
  260.                     json.push({  
  261.                         id:i,  
  262.                         name:"name"+i,  
  263.                         desc:"this is the name"+i,  
  264.                         x:x,  
  265.                         y:y  
  266.                     })  
  267.                 }  
  268.                 return json;  
  269.             }  
  270.         });  
  271.     </script>  
  272. </head>  
  273. <body>  
  274. <div id="map"></div>  
  275.     <div class="item-list">  
  276.         <div id="close" class="list-close"></div>  
  277.         <div class="list-title">结果列表</div>  
  278.         <ul id="items">  
  279.         </ul>  
  280.     </div>  
  281. </body>  
  282. </html>  
      http://blog.csdn.net/gisshixisheng/article/details/48830833

 

posted @ 2016-07-18 15:15  韩慧兵  阅读(372)  评论(0)  编辑  收藏  举报