OpenLayers3 实现自定义放大缩小滑块，自定义方向按钮
由于项目需要，需要自定义滑块。为此记录如下：
<div id="map" class = "map"> <div id = "zoombar" class="zoombar"> <div style="position:absolute;width:63px;height:62px;"> <img style="position:relative;width:63px;height:62px" src ="img/compass.png"/> <div id="Control.PanZoomBar.panup" style="position: absolute; left: 24px; top: 5px; width: 16px; height: 16px; cursor: pointer;" class="olButton olpanup" onclick ="panDirection('north')"> <img id="Control.PanZoomBar.panup_innerImage" style="position: relative; width: 16px; height: 16px;" class="olAlphaImg" src="img/north-mini.png"></div> <div id="Control.PanZoomBar.panleft" style="position: absolute; left: 6px; top: 23px; width: 16px; height: 16px; cursor: pointer;" class="olButton olpanleft" onclick ="panDirection('west')"> <img id="Control.PanZoomBar.panleft_innerImage" style="position: relative; width: 16px; height: 16px;" class="olAlphaImg" src="img/west-mini.png"></div> <div id="Control.PanZoomBar.panright" style="position: absolute; left: 42px; top: 23px; width: 16px; height: 16px; cursor: pointer;" class="olButton olpanright" onclick ="panDirection('east')"> <img id="Control.PanZoomBar.panright_innerImage" style="position: relative; width: 16px; height: 16px;" class="olAlphaImg" src="img/east-mini.png"></div> <div id="Control.PanZoomBar.pandown" style="position: absolute; left: 24px; top: 39px; width: 16px; height: 16px; cursor: pointer;" class="olButton olpandown" onclick ="panDirection('south')"> <img id="Control.PanZoomBar.pandown_innerImage" style="position: relative; width: 16px; height: 16px;" class="olAlphaImg" src="img/south-mini.png"></div> </div> <div id="Control.PanZoomBar.zoomin" style="position: absolute; left: 24px; top: 63px; width: 16px; height: 16px; cursor: pointer;" class="olButton olzoomin" onclick ="ZoomOut()"> <img id="Control.PanZoomBar.zoomin_innerImage" style="position: relative; width: 16px; height: 16px;" class="olAlphaImg" src="img/zoom-plus-mini.png"></div> <div style="background-image: url("img/zoombar.png"); left: 24px; top: 79px; width: 16px; height: 110px; position: absolute; cursor: pointer;" id="OpenLayers_Control_PanZoomBar_ZoombarOpenLayers.Map_7" class="olButton olPanZoomBar"> <div id="Control.PanZoomBar.OpenLayers.Map_7" style="position: absolute; left: 0px; top: 46px; width: 16px; height: 16px; cursor: move;"> <img id="Control.PanZoomBar.OpenLayers.Map_7_innerImage" style="position: relative; width: 16px; height: 16px;" class="olAlphaImg" src="img/slider.png"></div> </div> <div id="Control.PanZoomBar.zoomout" style="position: absolute; left: 24px; top: 189px; width: 16px; height: 16px; cursor: pointer;" class="olButton olzoomout" onclick="ZoomIn()"> <img id="Control.PanZoomBar.zoomout_innerImage" style="position: relative; width: 16px; height: 16px;" class="olAlphaImg" src="img/zoom-minus-mini.png"></div> </div> <div id = "overly" class="overlay"></div> </div>
然后js代码：
//放大 function ZoomOut() { view.setZoom(view.getZoom() +1); } //缩小 function ZoomIn() { view.setZoom(view.getZoom() - 1); } //地图平移 function panDirection(direction) { var lonlat = 0.06;//平移系数 var pan = ol.animation.pan({ duration: 250,//动画的持续时间,以毫秒为单位。默认是1000。 source: (view.getCenter()) }); map.beforeRender(pan); var mapCenter = view.getCenter(); switch (direction) { case "north": mapCenter[1] += lonlat * Math.pow(2, 30 - view.getZoom()); break; case "south": mapCenter[1] -= lonlat * Math.pow(2, 30 - view.getZoom()); break; case "west": mapCenter[0] -= lonlat * Math.pow(2, 30 - view.getZoom()); break; case "east": mapCenter[0] += lonlat * Math.pow(2, 30 - view.getZoom()); break; } //更改center 实现地图平移 view.setCenter(mapCenter); //对地图进行渲染 map.render(); } //获取滑块div var zoombardiv = document.getElementById("Control.PanZoomBar.OpenLayers.Map_7"); //得到滑块top值 var high_top = parseInt(document.getElementById("Control.PanZoomBar.OpenLayers.Map_7").style.top); //定义滑块初始值 var y1; //滑块鼠标按下事件 zoombardiv.onmousedown = function (e1) { y1 = e1.clientY; //鼠标按下事件下触发鼠标移动事件，使滑块进行移动 document.onmousemove = function (e2) { var diffY = e2.clientY - y1; var realY = high_top + diffY; document.getElementById("Control.PanZoomBar.OpenLayers.Map_7").style.top = realY + "px"; //根据滑块top值计算地图缩放zoom值 var realzoom = Math.ceil(18 - 18 * realY / (110 - 16));//此处的18为地图最大的放大级数，110为滑块轴的高度，16位滑块的高度单位为px,对计算出来的小数向上取整 //设置view zoom值 view.setZoom(realzoom); } } //鼠标抬起事件 document.onmouseup = function () { //移除鼠标移动事件 document.onmousemove = null; }
//view上绑定zoom改变事件
view.on('change:resolution', function (e) {
var zommleve = view.getZoom();
var high = (18 - zommleve) * (110 - 16) / 18;//此处的18为地图最大的放大级数，110为滑块轴的高度，16位滑块的高度
document.getElementById("Control.PanZoomBar.OpenLayers.Map_7").style.top = high+"px";
});
效果如下：
