openlayers3自定义工具条

来源：互联网发布：走火入魔朱清时知乎编辑：程序博客网时间：2024/05/30 23:12

对于一个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），点击切换地图，再重新设置图层的可见性。

1 0