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

<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(&quot;img/zoombar.png&quot;); 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";
            });

效果如下:

OpenLayers3 实现自定义放大缩小滑块,自定义方向按钮的更多相关文章

  1. 自定义ImageView实现图片手势滑动,多点触摸放大缩小效果

    首先呢,还是一贯作风,我们先来看看众多应用中的示例:(这种效果是很常见的,可以说应用的必须品.)                搜狐客户端                               ...

  2. 自定义mousewheel事件,实现图片放大缩小功能实现

    本文是承接 上一篇的<自定义鼠标滚动事件>  的基础上实现的,建议大家先看一下上一篇的mousewheel的实现,再浏览下文: 上篇中我们介绍到: $element.mousewheel( ...

  3. PhotoView实现图片随手势的放大缩小的效果

    项目需求:在listView的条目中如果有图片,点击条目,实现图片的放大,并且图片可以根据手势来控制图片放大缩小的比例.类似于微信朋友圈中查看好友发布的照片所实现的效果. 思路是这样的:当点击条目的时 ...

  4. Android 手势滑动,多点触摸放大缩小图片

    效果展示: 基本思路: <1>首先写一个图片控制类ImageControl,实现对图片控制的的基本操作,我们的图片控制类ImageControl是继承自ImageView自定义的视图: & ...

  5. Android DIY之路 (一) 指定区域多图片合成 放大 缩小 镜像 旋转 等(转)

    惯例先看效果图 // 注意做类似这种模板功能时候 方位由后台数据提供,这里我们用假数据 4个点 或者xy 加区域来做示例 //一开始我们公司用的是透明盖住 操作图片 但发现 局限性较大.后来直接限定区 ...

  6. javascript仿新浪微博图片放大缩小及旋转效果

    javascript仿新浪微博图片放大缩小及旋转效果 经常看到新浪微博里有图片放大缩小旋转效果,感觉效果还不错,所以就想试着做一个类似的demo出来,至于旋转对于IE可以用滤镜来解决,标准的浏览器可以 ...

  7. Android多点触控技术,实现对图片的放大缩小平移,惯性滑动等功能

    首先推荐一下鸿洋大大的打造个性的图片预览与多点触控视频教程,这套教程教我们一步一步实现了多点触控实现对图片的平移和缩放的功能.这篇文章我将在鸿洋大大的基础之上做了一些扩展功能: 1.图片的惯性滑动 2 ...

  8. QT5 OpenGL (六, 键盘事件, 开关灯,放大缩小综合运用)

    概要 实例效果图 立体图放大图 立体图缩小图 不加矢量开灯图 不加矢量关灯图 加矢量关灯图1 加矢量关灯图2 部分代码展示 主要内容解析 QT键盘事件 立体图形的放大和缩小 上下左右键以及A键D争键控 ...

  9. 【开源】专业K线绘制[K线主副图、趋势图、成交量、滚动、放大缩小、MACD、KDJ等)

    这是一个iOS项目雅黑深邃的K线的绘制. 实现功能包括K线主副图.趋势图.成交量.滚动.放大缩小.MACD.KDJ,长按显示辅助线等功能 预览图 最后的最后,这是项目的开源地址:https://git ...

随机推荐

  1. PHP获取对象的纯数字属性

    php的对象属性 我们知道获取php的对象属性用箭头: echo $obj->name; 如果属性名是一个变量,那么可以用: $var = 'name'; echo $obj->$var; ...

  2. leecode刷题(3)-- 旋转数组

    leecode刷题(3)-- 旋转数组 旋转数组 给定一个数组,将数组中的元素向右移动 K 个位置,其中 K 是非负数. 示例: 输入: [1,2,3,4,5,6,7] 和 k = 3 输出: [5, ...

  3. 题解 CF500D 【New Year Santa Network】

    题目链接 这道题首先是要看看该如何化简,先把三元组化成二元组. 之后统计经过某条边的 次数$*$权值  的和. 最后除以总基数 $tot$ 其中,每条边被计算的次数为 子树的点数$*$非子树的点数 ( ...

  4. linux下 zip解压 tar解压 gz解压 bz2等各种解压文件命令

    .tar 解包:tar xvf FileName.tar 打包:tar cvf FileName.tar DirName (注:tar是打包,不是压缩!) ——————————————— .gz 解压 ...

  5. JS 对象的三种创建方式

    变量 instanceof 类型的名字----->布尔类型,true就是这种类型,false不是这种类型 在当前的对象的方法中,可以使用this关键字代表当前的对象   1.调用系统的构造函数创 ...

  6. java线程面试

    1) 什么是线程? 线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位.程序员可以通过它进行多处理器编程,你可以使用多线程对运算密集型任务提速.比如,如果一个线程完成 ...

  7. mac 添加环境变量

    1.Mac系统的环境变量,加载顺序为: a. /etc/profile b. /etc/paths c. ~/.bash_profile d. ~/.bash_login e. ~/.profile ...

  8. Python web前端 07 函数及作用域

    Python web前端 07 函数及作用域 一.函数 1.有名函数和匿名函数 #函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 #函数就是包裹在花括号里面的代码块,前面使用了关键字fun ...

  9. vue-persist 为 vuex 持久化!!

    npm install --save vuex-persist import VuexPersistence from 'vuex-persist' const vuexLocal = new Vue ...

  10. 基于JsonPath和XmlPath的对象映射(Object Mapping)

    rest-assured支持映射Java对象到Json和XML以及从Json和XML中映射到Java对象.Json映射需要在classpath 中有Jackson.Jackson 2或者是Gson,X ...