H5页面手绘轨迹路径-过程中允许拖动+缩放地图

这篇具有很好参考价值的文章主要介绍了H5页面手绘轨迹路径-过程中允许拖动+缩放地图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文章可以参考解决的问题:H5端的多指、单指操作混乱的问题; mapbox-gl手绘轨迹线。

希望本文能帮助到其他人!
 

对于“在H5页面支持在地图上手绘轨迹"这个需求,从需求层面看比较简单。

作为开发,你会怎么做?

第一映像是 锁定地图,绘制过程中地图不跟随移动,否则手指在移动过程中手指的坐标不会变化,这样就完成了这一需求。

可以的!完全没问题。

但优秀吗?

从用户体验上,一旦锁定地图,在绘制过程中用户要操作的区域到可视区之外的话,则不好完了,怎么办?增加锁定、释放,移动等一系列辅助按钮?

功能上可以了,满足。

但完美吗?

从UI层面,增加了按钮,增加用户操作,体验不太好。

怎么让用户操作起来更丝滑?尽量保留地图的原生操作:1. 双指放大缩小地图。 2. 单指移动地图。直接上代码片段:

// 几种特殊情况: 多指开始->中间一个一个单指结束 ,单指开始 -> 中间加入多指。 处理方式:只要存在多指情况则不处理,且注意延迟。
let lnglats = [], moveTempLnglat = [], lastLnglat, locusChanging = false, touchCount = 0,handleTimer, singleTouch = true, handling = false // 1-单指, 2-双指。从开始start 到结束 end 一次操作才算完成
const tolerance = {10: 1000, 11: 1000, 12: 800, 13: 400, 14: 200, 15: 100, 16: 50, 17: 20, 18: 10, 19: 5, 20: 2, 21: 1}
const setLocus = () => {
    map.getSource("mylocus").setData({
        type: "FeatureCollection",
        features: [
            {
                type: "Feature",
                properties: {},
                geometry: {
                    type: "LineString",
                    coordinates: lnglats
                }
            }
        ]
    })
}


const startHandler = e => {
    const touchLen = e.originalEvent.changedTouches.length
    touchCount += touchLen
    // 任一超一个触点,则视为多指,必须在所有触点释放后才能做后续操作
    if (touchCount > 1) {
        singleTouch = false
    }
    // 检查是否在附近,只有在附近才视为连续绘制
    if (singleTouch && touchLen === 1 && lnglats.length > 1) {
        const dis = turf.rhumbDistance(turf.point(lnglats[lnglats.length - 1]), turf.point([e.lngLat.lng, e.lngLat.lat]), {units: "meters"})
        if (dis > tolerance[Math.round(map.getZoom())]){
            map.dragPan.enable()
            return
        }
    }
    clearTimeout(handleTimer)
    // 清空移动预存
    moveTempLnglat = []
    // 避免双指延迟
    handleTimer = setTimeout(() => {
        if (singleTouch && touchLen === 1) {
            handling = true
            lnglats.push([e.lngLat.lng, e.lngLat.lat], ...moveTempLnglat.splice(0, moveTempLnglat.length))
            setLocus()
        }
    }, 200)
}

const moveHandler = e => {
    const touchLen = e.originalEvent.targetTouches.length
    if (singleTouch && touchLen === 1) {
        if (handling) {
            lnglats.push([e.lngLat.lng, e.lngLat.lat])
            setLocus()
        } else {
            moveTempLnglat.push([e.lngLat.lng, e.lngLat.lat])
        }
    }
}

const endHandler = e => {
    const touchLen = e.originalEvent.changedTouches.length
    touchCount -= touchLen
    // 之前是单指模式,则开始动作
    if (singleTouch && touchLen === 1 && handling) {
        lnglats.push([e.lngLat.lng, e.lngLat.lat])
        setLocus()
    }

    if (touchCount === 0) {
        singleTouch = true
        handling = false
    }
    if (locusChanging) {
        map.dragPan.disable()
    }
}

const startChangeLocus = () => {
    const map = mapObj.value
    lnglats = []
    moveTempLnglat = []
    handling = false

    map.dragPan.disable()
    // 测试:锁定地图,不允许拖动
    if (!map.getLayer("mylocus")) {
        map.addLayer({
            id: "mylocus",
            type: "line",
            source: {
                type: "geojson",
                data: {type: "FeatureCollection", features: []}
            }
        })
    } else {
        setLocus()
    }
    if (!locusChanging) {
        map.on("touchstart", startHandler)
        map.on("touchmove", moveHandler)
        map.on("touchend", endHandler)
    }
    locusChanging = true
}
const stopChangeLocus = () => {
    const map = mapObj.value
    map.dragPan.enable()
    map.off("touchstart", startHandler)
    map.off("touchmove", moveHandler)
    map.off("touchend", endHandler)
    locusChanging = false
}

主要思路: 只要触发了多触点,则视为当前多指操作,不做绘制;同时,预留了双指两个指头不同步的情况。

总结:

在使用触摸事件时,注意 changeTouches,touches,targetTouches 属性的在touchstart,touchmove,touchend 事件中分别的含义。

TouchEvent.changedTouches - Web API 接口参考 | MDN

TouchEvent.targetTouches - Web API 接口参考 | MDN

TouchEvent.touches - Web API 接口参考 | MDN文章来源地址https://www.toymoban.com/news/detail-838380.html

到了这里,关于H5页面手绘轨迹路径-过程中允许拖动+缩放地图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • QGraphicsItem鼠标拖动图元进行缩放拉伸(四)

    QGraphicsItem图元的简单使用(一) QGraphicsItem图元拖动绘制(二) QGraphicsItem图元旋转缩放和自定义图元(三) 接上一篇,本章将讲解如何通过鼠标拖动图元进行缩放拉伸 需要先在打开图元接受鼠标悬浮事件的开关,构造函数中添加如下代码: 计算鼠标各个悬浮区域,鼠标悬

    2024年02月11日
    浏览(41)
  • Android 点击图片,放大查看,实现缩放拖动等功能

    实现方法:点击图片时,把图片url传到另一个activity中实现放大拖动, 图片点击事件触发: Intent intent = new Intent(); intent.setClass(mContext, PictureActivity.class); intent.putExtra(“url”,R.drawable.ic_logo); mContext.startActivity(intent); 然后创建一个activity的内容如下: public class PictureActivity extend

    2024年02月11日
    浏览(51)
  • ThreeJS-3D教学三:平移缩放+物体沿轨迹运动

    我们在项目中会有一些这样的需求,我们可视化一个场景,需要俯视、平移、缩放,方便观察场景中的数据或者模型,之所以把这个案例拿出来 1、这是个很实用的需求,我相信很多人会用到 2、我自己认为在实际案例中我们可以学习相关知识点更易吸收些 为了丰富本篇文章

    2024年02月03日
    浏览(47)
  • Android控件双指缩放及双指拖动

    本文章分为两部分,第一部分先讲解下需要用到的知识点,第二部分提供代码实例。 以上就是全部内容了,谢谢观看。

    2024年02月14日
    浏览(43)
  • QT QChartView 鼠标随动 十字线 缩放 平移 拖动

    QChart添加跟随鼠标的十字线_x县豆瓣酱的博客-CSDN博客_qchart鼠标跟踪线 最近在做这么一个东西,需要十字线。我参考自上面的博主的内容,但是他没写全。很多人不知道这个QGraphicsLineItem 是怎么创建的,然后x_line 和y_line 是如何弄到chartview 的Scene中的。 下面试我的效果,实现

    2024年02月12日
    浏览(40)
  • Canvas鼠标滚轮缩放以及画布拖动(图文并茂版)

    本文会带大家认识Canvas中常用的坐标变换方法 translate 和 scale,并结合这两个方法,实现鼠标滚轮缩放以及画布拖动功能。 Canvas 绘图的缩放以及画布拖动主要通过 CanvasRenderingContext2D 提供的 translate 和 scale 两个方法实现的,先来认识下这两个方法。 translate 方法 语法: trans

    2023年04月09日
    浏览(48)
  • 实现Qwidget窗口填满整个主窗口,并跟随鼠标的拖动自动缩放

    实现Qwidget窗口填满整个主窗口,并跟随鼠标的拖动自动缩放 新建一个窗口,我想在这个窗口上放一个QWidget,并且这个QWidget能够布满整个窗口,还可以随着随鼠标的拖动自动缩放 1、首先给大家介绍一个好用的组件库:qt-material-widgets (1)开源地址(基于QWidgets) 基于Qt Qui

    2024年02月10日
    浏览(47)
  • 【Java AWT 图形界面编程】使用鼠标滚轮缩放 Canvas 画布中绘制的背景图像 ( 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心 示例 )

    鼠标指针指向界面中的 Canvas 画布某个位置 , Canvas 画布中绘制着一张超大图片 , 以该位置为中心 , 滑动鼠标滚轮时进行缩放 ; 使用鼠标滚轮缩放后 , 在 Canvas 中绘制的图片的尺寸肯定是放大或者缩小了 , 尺寸发生了改变 ; 图片缩放时 , 鼠标指针指向一个位置 , 该位置对应着一

    2024年02月15日
    浏览(90)
  • 机器人轨迹生成:轨迹规划与路径规划

    机器人轨迹生成涉及到轨迹规划和路径规划两个关键概念,它们是机器人运动控制中的重要组成部分。下面对轨迹规划和路径规划进行深入比较。 轨迹规划(Trajectory Planning): 定义:轨迹规划是指在机器人运动中确定机器人末端或关节的期望轨迹。它是在特定的工作空间中

    2024年02月12日
    浏览(52)
  • 使用Vue2开发一个图片预览组件,支持多图切换、缩放旋转、鼠标滚轮、键盘按键、拖动等等操作

    话不多说,咱们赶紧来开启本章的内容,这次小编给各位带来的依旧是实用类文章,分享如何开发一个完整的 图片预览组件 ,它支持多图切换、放大缩小、旋转、鼠标滚轮操作、键盘按键控制、拖动等等的功能,并且使用方便、易扩展,零依赖。 项目演示技术小编采用的是

    2024年02月09日
    浏览(74)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包