1. 程式人生 > >openlayers3自定義工具條

openlayers3自定義工具條

#layersControl{
			  background-color: rgb(255,255,255);
			  border:1px solid #888888;
			  position:absolute;
			  z-index:999;
			  right:0px;
			  top:38px;
			  display:none;
		  }
		  #layersControlTitle{
			  font:bold 12px sans-serif;
			  background-color: #3bb5ff;
			  color:#ffffff;
			  height:30px;
			  line-height: 30px;
		  }
		  #layercontent{
			  height:250px;
			  width:180px;
		  }
		  #layerbox{
			  background: #fff;
			  z-index: 112;
			  border-radius: 1px;
			  box-shadow: 1px 2px 1px rgba(0,0,0,.15);
			  font-size: 12px;
			  line-height: 1.5;
			  color: #565656;
			  word-wrap: break-word;
			  font-family: Arial,sans-serif;
		  }
		  #layerbox_item{
			  font-size: 12px;
			  line-height: 1.5;
			  color: #565656;
			  word-wrap: break-word;
		  }
		  #layerbox_item .item, #layerbox_item .item span,#measureTool .item span{
			  display: inline-block;
			  vertical-align: middle;  /*內部圖片的位置*/
		  }
		  #layerbox_item .item {
			  height: 16px;
			  padding: 0 6px;
			  border-right: 1px #e5e5e5 solid;
			  cursor: pointer;
		  }
		  #layerbox_item {
			  padding: 7px 0 12px;
			  background: #fff;
		  }
		  #layerbox_item .item .icon {		  
			  width: 16px;
			  height: 16px;
			  margin-right: 5px;
		  }
		  #layerbox_item .switchmap .icon {
			  background-image: url('/Areas/GIS/Content/Images/switchmap.png');
			  background-repeat:no-repeat;
			  background-size:16px;
		  }
		   #layerbox_item .layercontrol .icon {
			   background-image: url('/Areas/GIS/Content/Images/layerscontrol.png');
			   background-repeat:no-repeat;
			   background-size:16px;
		  }
		  #layerbox_item .fullscreenbutton .icon {
			   background-image: url('/Areas/GIS/Content/Images/fullscreen.png');
			   background-repeat:no-repeat;
			   background-size:16px;
		  }
		  #layerbox_item .measure .icon {
			   background-image: url('/Areas/GIS/Content/Images/measure.png');
			   background-repeat:no-repeat;
			   background-size:16px;
		  }
		  .layersControl-closer {
			  text-decoration: none;
			  position: absolute;
			  top: 2px;
			  right: 8px;
			  font:bold 12px sans-serif;
			  line-height: 25px;
		  }
		  .layersControl-closer:after {
			  content: "✖";
		  }
		  
		  .measureTool{
		     position : absolute;
             display: none;
             top: 37px;
             right:100px;
             background-color: #fff;
             padding: 0 6px 8px;
             z-index: 999;
             box-shadow: 1px 1px 1px rgba(0,0,0,.15);
             -webkit-border-radius: 1px;
             -moz-border-radius: 1px;
             -o-border-radius: 1px;
             border-radius: 1px;
             border: 1px solid #ddd;
		  }
		  .measureTool .item{
		      background-color: #fff;
              display: inline-block;
              border-right: 0;
              padding: 13px 0 4px;
              width: 46px;
              height: auto;
              text-align: center;
              float: left;
              color: #565656; 
              cursor: pointer;
		  }
		  .measureTool .item .icon-c{
		      width: 32px;
              height: 32px;
              -webkit-border-radius: 50%;
              -moz-border-radius: 50%;
              -ms-border-radius: 50%;
              border-radius: 50%;
              border: 1px solid #eaeaea;
              text-align: center; 
		 }
		.measureTool .item .icon-c .icon{
		     margin: 8px 0 0 5px;
		     background-image: url('/Areas/GIS/Content/Images/measure.png');
			 background-repeat:no-repeat;
			 background-size:16px;
			 width: 16px;
			 height: 16px;
			 margin-right: 5px;
		 }
 
        a:link,a:visited{color:#565656;text-decoration:none;}
        a:hover{color:#565656;text-decoration:none;}
全屏和取消全屏的實現(ie11下好像有問題還沒解決)