OpenLayers3 实现自定义放大缩小滑块，自定义方向按钮

由于项目需要，需要自定义滑块。为此记录如下：

"map" class = "map">
        
"zoombar" class="zoombar">
            
"position:absolute;width:63px;height:62px;">    
                "position:relative;width:63px;height:62px" src ="img/compass.png"/>
                 
"Control.PanZoomBar.panup" style="position: absolute; left: 24px; top: 5px; width: 16px; height: 16px; cursor: pointer;" class="olButton olpanup" onclick ="panDirection('north')">
                   "Control.PanZoomBar.panup_innerImage" style="position: relative; width: 16px; height: 16px;" class="olAlphaImg" src="img/north-mini.png">
                 
"Control.PanZoomBar.panleft" style="position: absolute; left: 6px; top: 23px; width: 16px; height: 16px; cursor: pointer;" class="olButton olpanleft" onclick ="panDirection('west')">
                   "Control.PanZoomBar.panleft_innerImage" style="position: relative; width: 16px; height: 16px;" class="olAlphaImg" src="img/west-mini.png">
                 
"Control.PanZoomBar.panright" style="position: absolute; left: 42px; top: 23px; width: 16px; height: 16px; cursor: pointer;" class="olButton olpanright" onclick ="panDirection('east')">
                   "Control.PanZoomBar.panright_innerImage" style="position: relative; width: 16px; height: 16px;" class="olAlphaImg" src="img/east-mini.png">
                 
"Control.PanZoomBar.pandown" style="position: absolute; left: 24px; top: 39px; width: 16px; height: 16px; cursor: pointer;" class="olButton olpandown" onclick ="panDirection('south')">
                   "Control.PanZoomBar.pandown_innerImage" style="position: relative; width: 16px; height: 16px;" class="olAlphaImg" src="img/south-mini.png">
             
   
                 
"Control.PanZoomBar.zoomin" style="position: absolute; left: 24px; top: 63px; width: 16px; height: 16px; cursor: pointer;" class="olButton olzoomin" onclick ="ZoomOut()">
                   "Control.PanZoomBar.zoomin_innerImage" style="position: relative; width: 16px; height: 16px;" class="olAlphaImg" src="img/zoom-plus-mini.png">
                 
"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">
                 
"Control.PanZoomBar.OpenLayers.Map_7" style="position: absolute; left: 0px; top: 46px; width: 16px; height: 16px; cursor: move;">
                   "Control.PanZoomBar.OpenLayers.Map_7_innerImage" style="position: relative; width: 16px; height: 16px;" class="olAlphaImg" src="img/slider.png">
                 
   
                 
"Control.PanZoomBar.zoomout" style="position: absolute; left: 24px; top: 189px; width: 16px; height: 16px; cursor: pointer;" class="olButton olzoomout" οnclick="ZoomIn()">
                    "Control.PanZoomBar.zoomout_innerImage" style="position: relative; width: 16px; height: 16px;" class="olAlphaImg" src="img/zoom-minus-mini.png">
        
        
"overly" class="overlay">
    

然后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";
            });

 效果如下：

 

转载于:https://www.cnblogs.com/sjfsjf/p/6282655.html