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