自定义openlayer控制面板

先上效果：（效果如下，由于图片大小的限制，质量有点差，凑合看吧）

官方的例子：http://openlayers.org/dev/examples/accessible-panel.html

我对该例子进行了一些修改，使其更能适应实际项目的应用，

$(document).ready(
	function(){		
	    var map = new OpenLayers.Map("mapDiv");
	    var gmap = new OpenLayers.Layer.Google("Google Streets", {
		type: G_SATELLITE_MAP
	    });						
							
	    var panel = new OpenLayers.Control.Panel({
		    createControlMarkup: function() {
		        return $(myControl)[0];			
	              }
	    });
	    panel.addControls([new OpenLayers.Control.Button()]);
	    map.addLayer(gmap);
	    map.addControl(panel);
	    map.setCenter(new OpenLayers.LonLat(114.04, 22.85466),10);
	    $("#MyMapPanel li").click(
		function(){
			alert($($(this).children("span")[0]).text());
		}
	    );
    });

其中上面的myControl变量其实就是一个事先写好的html：

var myControl="<ul id='MyMapPanel'>
                    <li><image class='MyMapPanel_image' src='image/hanleng.jpg'/>
                    <br/><span  class='MyMapPanel_span'>寒冷</span>
                    </li>
                    <li><image class='MyMapPanel_image' src='image/senlinhuoxian.jpg'/>
                    <br/><span  class='MyMapPanel_span'>森林火险</span>
                    </li>
                    <li><image class='MyMapPanel_image' src='image/bingbao.jpg'/>
                    <br/><span  class='MyMapPanel_span'>冰雹</span>
                    </li>
                    <li><image class='MyMapPanel_image' src='image/baoyu.jpg'/>
                    <br/><span  class='MyMapPanel_span'>暴雨</span>
                    </li><li><image class='MyMapPanel_image' src='image/daolujiebing.jpg'/>
                    <br/><span  class='MyMapPanel_span'>道路结冰</span>
                    </li>
                 </ul>"

再加上css对上面的html进行样式控制：

#MyMapPanel{
			list-style: none;
			width: 150px;
			height: 320px;
			margin: 0px;
			margin-left:5px;
			margin-top:5px;
			padding: 0px;
			border-style: solid;
			border-color: #6E8FC0;
		}
		#MyMapPanel li{
			float: left;
			text-align: center;
			padding: 10px;
		}
		#MyMapPanel li:hover{
			background-color: aliceBlue;
		}		
		#MyMapPanel li img{
			height:50px;
			width:50px;
			float: left;
		}
		#MyMapPanel li span{
			font-size: 12px;
		}

这样控制面板基本上可以随心所欲了！

转载于:https://my.oschina.net/LinBandit/blog/86589