OpenLayer(Style & CSS)

来源：互联网发布：javaweb数据字典使用编辑：程序博客网时间：2024/05/21 07:11

css样式，搞前端人应该都有了感。我对css的了感程度，也就能看懂别人写的css代码，会一些简单的布局，什么pix了，像素了，百分比了仍然是一头雾水！

不过，既然遇见了，也得写写说说！

在上一篇文章里应该已经介绍了很多，OpenLayers中的Control都有默认的注册类属性，简单的组合描述就是：.olControlControlNameExtra。对一些Control来说，Extra部分就不需要，比如ScaleLine；但是对Button，就存在Inactive等附加。在这个例子中，大家没有接触的CSS也就Overmap，它的附加比较多，比如Eelement，MaximizeButton，所以注意这个就可以了。

在代码中了感吧！

<!doctype html><html><head><meta charset="utf-8"><title>创建一个简单的电子地图</title><script type="text/javascript" src="code/OpenLayers.js"></script><link href="../map style/theme.css" type="text/css" /> </head><body onLoad="init()"><div id='panel_div'></div><div id="map_element" style="width:500px; height:500px; margin-left:220px; margin-top:200px;"></div><script type="text/javascript" >/*全局变量*/var map;function init(){//初始化mapmap=new OpenLayers.Map('map_element',{controls:[new OpenLayers.Control.Navigation()]});//初始化一个图层var wms_layer=new OpenLayers.Layer.WMS('OpenLayer WMS','http://vmap0.tiles.osgeo.org/wms/vmap0',{layers:'basic'},{attribution:'OpenLayer WMS A',opacity:.5,isBaseLayer:true});map.addControls([new OpenLayers.Control.ScaleLine(),new OpenLayers.Control.NavToolbar(),new OpenLayers.Control.OverviewMap()]);map.addLayers([wms_layer]);if(map.getCenter()){map.zoomToMaxExtent();}}</script></body></html>

之后便是CSS的属性文件，注意引用用的标签是link

/* CSS Document */.olControlScaleLine{background:#777777;color:#ffffff;}.olControlNavToolbar{top:0;}.olControlNavigationItemInactive{background:#787878 !important;border:2px solid #306;cursor:pointer;left:0 !important;top:0 !important;}.olControlNavigationItemActive{background:#dedede !important;border:2px solid #787878;cursor:pointer;left:0 !important;top:0 !important;}.olControlZoomBoxItemInactive{background:#336699 !important;border:1px solid #232323;cursor:pointer;left:0 !important;top:0 !important;}.olControlZoomBoxItemActive{background:#77aadd !important;border:1px solid #5588aa;cursor:pointer;left:0 !important;top:0 !important;}.olControlOverviewMapMaximizeButton,.olControlOverviewMapMinimizeButton{buttom:0  !important;}.olControlOverviewMapElement{background:#cdcdcd !important;}.olControlOverviewMapExtentRectangle{background:rgba(60,90,120,0.7);border:1px solid #22dd22 !important;}

效果图如下：

`--------------------

说说LayerSwitch的CSS

向上面的例子中追加LayerSwitch，

switch_control=new OpenLayers.Control.LayerSwitcher({div:document.getElementById('layer_switch_control'),roundedCorner:false});

然后是设置LayerSwitch的样式，这里需要特别注意：注意这里的layer_switch_control是存放该控件的div

<style>#layer_switch_control{border:1px solid #00C;padding:2px;background-color:#9F0;}#layer_switch_control .baseLbl{background:#cdcdcd;font-size:1.3em;font-weight:bold;}#layer_switch_control .baseLayersDiv .labelSpan{font-style:italic;font-weight:bold;}</style>

展示一下效果图，以及在以后的过程中，怎么样知道设置控件的样式，这里就需要用到FireBug，比如在这个例子中，layerSwitch控件的大小话按钮不见了，设置那个css类属性来实现这个样式。

将该控件定义成全局变量，在控制台中直接访问，观察该控件的属性。当然也可以通过map.controls[]数组来直接访问，前提map是全局变量。