自定义地图鱼骨缩放控件

2023-11-05 20:10

本文主要是介绍自定义地图鱼骨缩放控件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

地图的展示都会涉及到级别的切换,百度、google、esri地图服务、bing等,都有自己的鱼骨控件实现地图级别的设置。
    map和control互动的控件,原理为:
                    

  • 点击红框内位置,滑块切换级别定位,调用zoom,然后map跟着进行缩放
  • 拖动滑块,mouseup时滑块切换级别定位(滑动效果),调用zoom,然后map跟着进行缩放
  • map缩放,获取map的缩放级别level,然后对控件进行相应的修改(滑动至相应级别)
最近工作中遇到鱼骨控件的问题,做以下分析。
1. 制作鱼骨控件的方法
1). jquery UI的库,早期计划使用该方法,但考虑到库过大最后放弃;
2). html5控件range,目前使用该方法,绑定change事件实现level的切换,当然不支持拖动效果,其他还是ok的,但是ie等浏览器不支持,所以只是 暂时可行;              
    $("<input type=\"range\"/>").css("width", "20px").css("height", "200px").attr("max", lods.length - 1).attr("min", 0).attr("step", 1).attr("value", level).css("-webkit-appearance", "slider-vertical").bind("change", function (evt, ul) {              })

   3).从网上找第三方控件包装后,修改样式等可以使用,但是发现找不到;

  4).自定义鱼骨控件,已经实现了,下面分享一些心得。 

 

2.自定义鱼骨控件的规则
滑块沿线拖动
鱼骨有刻度(间隔固定&总长度根据地图lods可变)
拖动过程中无级
停止时有级
 3.基本思路
1). 红色边框定义为<div></div>,绑定mousedown事件、mouseup事件。
2). 滑块为<img/>元素,绑定mousedown事件。
3). 地图鱼控件要互动,即地图缩放时控件重新定位、控件有新位置时地图做相应缩放。
4). body绑定mousemove和mouseup事件,因为当事件为滑块拖动时,mousedown触发后,只要没有处于move状态没有up,无论鼠标在页面的什么位置都应该能监听到滑块的移动事件。(具体可以参考百度、谷歌地图效果)
5). 记录鼠标的offsetX、offsetY和pageX、pageY,来计算滑块的新位置。
4.解决方案
1)点击红色div,滑块定位
div绑定mousedown、mouseup,mousedown时记录鼠标点击处的offsetY位置和pageY1;
body的mouseup判断鼠标up的点pageY2与pageY1的差值,因为红色div的长度是根据lods生成的,因而判断pageY差值和滑块初始位置的关系, 使用offsetY判断最适级别, 就可以区分三种状态:滑块在最大级别、最小级别、中间某级别,分别根据滑块的absolute定位的top属性来定义位置。
 2)滑块拖动后定位
滑块绑定mousedown事件,记录当前滑块位置和pageY1
body的mousemove是事件,根据当前鼠标点pageY2和pageY1差值,根据此差值和最初滑块位置区分三种状态,并绝对定位滑块位置。
ps:
div相对定位&滑块绝对定位;
div的宽度为23px;以小图片 根据lods填充,图片是一个对称图形,保证填充时鱼骨连续; 
  img滑块图片 ;
此处只介绍思路,就不附代码了,有不详尽的可以再作讨论!

这篇关于自定义地图鱼骨缩放控件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/352188

相关文章

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

如何自定义Nginx JSON日志格式配置

《如何自定义NginxJSON日志格式配置》Nginx作为最流行的Web服务器之一,其灵活的日志配置能力允许我们根据需求定制日志格式,本文将详细介绍如何配置Nginx以JSON格式记录访问日志,这种... 目录前言为什么选择jsON格式日志?配置步骤详解1. 安装Nginx服务2. 自定义JSON日志格式各

Android自定义Scrollbar的两种实现方式

《Android自定义Scrollbar的两种实现方式》本文介绍两种实现自定义滚动条的方法,分别通过ItemDecoration方案和独立View方案实现滚动条定制化,文章通过代码示例讲解的非常详细,... 目录方案一:ItemDecoration实现(推荐用于RecyclerView)实现原理完整代码实现

基于Spring实现自定义错误信息返回详解

《基于Spring实现自定义错误信息返回详解》这篇文章主要为大家详细介绍了如何基于Spring实现自定义错误信息返回效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录背景目标实现产出背景Spring 提供了 @RestConChina编程trollerAdvice 用来实现 HTT

SpringSecurity 认证、注销、权限控制功能(注销、记住密码、自定义登入页)

《SpringSecurity认证、注销、权限控制功能(注销、记住密码、自定义登入页)》SpringSecurity是一个强大的Java框架,用于保护应用程序的安全性,它提供了一套全面的安全解决方案... 目录简介认识Spring Security“认证”(Authentication)“授权” (Auth

使用Folium在Python中进行地图可视化的操作指南

《使用Folium在Python中进行地图可视化的操作指南》在数据分析和可视化领域,地图可视化是一项非常重要的技能,它能够帮助我们更直观地理解和展示地理空间数据,Folium是一个基于Python的地... 目录引言一、Folium简介与安装1. Folium简介2. 安装Folium二、基础使用1. 创建

SpringBoot自定义注解如何解决公共字段填充问题

《SpringBoot自定义注解如何解决公共字段填充问题》本文介绍了在系统开发中,如何使用AOP切面编程实现公共字段自动填充的功能,从而简化代码,通过自定义注解和切面类,可以统一处理创建时间和修改时间... 目录1.1 问题分析1.2 实现思路1.3 代码开发1.3.1 步骤一1.3.2 步骤二1.3.3

dubbo3 filter(过滤器)如何自定义过滤器

《dubbo3filter(过滤器)如何自定义过滤器》dubbo3filter(过滤器)类似于javaweb中的filter和springmvc中的intercaptor,用于在请求发送前或到达前进... 目录dubbo3 filter(过滤器)简介dubbo 过滤器运行时机自定义 filter第一种 @A

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》:本文主要介绍了如何使用CSS自定义浏览器滚动条的样式,包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式,并提供了完整的CSS代码示例,通过这些技巧,你可以为你的网站添加个性化的滚动条样式,从而提升用户体验,详细内容请阅读本文,希望能对你有所帮助...

Python将大量遥感数据的值缩放指定倍数的方法(推荐)

《Python将大量遥感数据的值缩放指定倍数的方法(推荐)》本文介绍基于Python中的gdal模块,批量读取大量多波段遥感影像文件,分别对各波段数据加以数值处理,并将所得处理后数据保存为新的遥感影像... 本文介绍基于python中的gdal模块,批量读取大量多波段遥感影像文件,分别对各波段数据加以数值处