您的位置：首页 > Web前端 > CSS

OpenLayer(Style & CSS)

2013-10-21 09:53 197 查看
    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(){
//初始化map
map=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是全局变量。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css
相关文章推荐
新的分享
章节导航