OpenLayer(Style & CSS)

    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是全局变量。




转载自:https://blog.csdn.net/whynottrythis/article/details/12904819

You may also like...