openlayers3自定义工具条

对于一个WEB地图应用来说，地图工具条可以说是不可或缺的一个部分，但由于一些样式、功能往往并不能满足实际项目需要，所以仍要对此部分进行定制，从这里将说明如何利用Oplenayers 3根据项目要求做一个定制化的工具条。这里我是仿高得地图的样式，做的工具条。

1、工具条功能内容内容

• 切换地图(影像地图、地形地图)
• 测量(点击测量会弹出测量选项框)
• 图层控制（点击图层控制会弹出图层控制菜单）
• 全屏和取消全屏

2、最终工具条效果图

                 

                                                                                                 

3、具体实现

构建页面HTML元素

  

    

    		

				
 
 
				
切换地图 
                
测量 
				
                
图层控制 
                
全屏 
			 
           
 
  
                 
                
                测距   
                 
                
                测面 
                 
                
                清除   
            
    		

				
图层控制
                
				

				

				
			

建立CSS样式文件

#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下好像有问题还没解决）

var fullscreen = function() {
    var elem = document.body;
    if (elem.webkitRequestFullScreen) {
        elem.webkitRequestFullScreen()
    } else {
        if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen()
        } else {
            if (elem.msRequestFullscreen) {
                elem.msRequestFullscreen()
            } else {
                if (elem.requestFullScreen) {
                    elem.requestFullscreen()
                } else {
                    alert("浏览器不支持全屏")
                }
            }
        }
    }
};

var exitFullscreen = function() {
    var elem = parent.document;
    if (elem.webkitCancelFullScreen) {
        elem.webkitCancelFullScreen()
    } else {
        if (elem.mozCancelFullScreen) {
            elem.mozCancelFullScreen()
        } else {
            if (elem.cancelFullScreen) {
                elem.cancelFullScreen()
            } else {
                if (elem.msExitFullscreen) {
                    elem.msExitFullscreen()
                } else {
                    if (elem.exitFullscreen) {
                        elem.exitFullscreen()
                    } else {
                        alert("浏览器不支持全屏")
                    }
                }
            }
        }
    }
};

测量的实现：

点击测量菜单，弹出测量框，有测距、测面、清除三个选项，具体源码参考官方examples：http://openlayers.org/en/latest/examples/measure.html?q=measure

清除就是将测量的图层remove掉。

图层控制的实现：

点击图层控制，弹出图层控制菜单div，这里我使用了jquery.ztree将图层类和图层类下面的设备生成树，外面的复选框控制某类图层的显示与否，图层下面的设备点击后，会在地图中定位到该设备。

切换地图的实现：

这里首先加载了两个layer，设置其中一个为不可见（setVisible），点击切换地图，再重新设置图层的可见性。