openlayers3自定义工具条

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

1、工具条功能内容内容

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

2、最终工具条效果图

                 

                              
                                                                 

3、具体实现

构建页面HTML元素

  

<div id="fullscreen" class="fullscreen" style="height: 100%;"><!--style="height:630px;"-->
    
<div id="map" class="map" onmouseout="outOfMap()"style="position:relative;margin:0;width: 100%;height: 100%;border:1px solid #aaaaaa;"></div>
    		
<div id="layerbox" class="layerbox usel" style="position:absolute;z-index:999;right: 0px; top: 0px;">
				<div id="layerbox_item"> <div class="show-list"> <i class="red-point"></i>
				<div class="layer_item switchmap item " onclick="switchBaseMap();"><span class="icon"></span><span class="name">切换地图</span> </div>
                <div class="layer_item measure item " onclick="showMeasureTool();"><span class="icon"></span><span class="name">测量</span> </div>				
                <div class="layer_item layercontrol item " onclick="showlayersControl();"><span class="icon"></span><span class="name">图层控制</span> </div>
                <div class="layer_item fullscreenbutton item" id="fullscreenbutton" onclick="fullscreen();"><span class="icon"></span><span class="name">全屏</span> </div>
			 </div></div></div>
           
 <div class="measureTool" id="measureTool">  
                <a class="tool_item measurePoint item " onclick="addInteraction('length');"> 
                <span class="icon-c"><span class="icon"></span></span>
                <span class="name">测距</span> </a>  
                <a class="tool_item measurePolygon item "onclick="addInteraction('area');"> 
                <span class="icon-c"><span class="icon"></span></span>
                <span class="name">测面</span> </a>
                <a class="tool_item clearMeasure item " onclick="clearMeasure();"> 
                <span class="icon-c"><span class="icon"></span></span>
                <span class="name">清除</span> </a>  
            </div>
    		
<div id='layersControl'>
				<div id="layersControlTitle" align="center">图层控制</div>
                <a href="#" id="layersControl-closer" class="layersControl-closer" onclick="hidelayersControl();"style="color:#fff;"></a>
				<div id="layercontent" style="overflow-y: auto">
				<ul id="treeDemo" class="ztree"></ul>
				</div>
			
</div>

建立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),点击切换地图,再重新设置图层的可见性。

You may also like...