vue+svg构建地图系统心路历程

总篇184篇 2022年第59篇1.概述家家职场（空间管理系统）是用来将职场的工位、会议室、功能房、物资等进行可视化的室内地图系统，并且员工可通过手机扫码或在地图上预定工位，员工信息自动关联到地图上；可以实时的查看职场资源的使用情况、物资的健康状况，通过报表系统可以明显的看出职场的资源使用率、BU的分布架构及人员变化，提高职场资源管理效率。2.功能模块2.1 地图编辑模块2.2 工位资源逐级分配功能模块2.3 全员资源可视化检索功能模块2.4 权限管理模块 （本文不展开讨论）2.5 资产管理平台/报表平台（本文不展开讨论）3.效果展示3.1地图编辑功能展示3.2工位资源逐级分配模块功能展示3.3全员资源可视化检索功能4.技术选型4.1外采? vs? 自研? ?在外采与自研的选择上，从与现有系统融合、后期维护与扩展开发、成本等几个方面综合考虑，选择了自研。4.2svg? vs? canvas?在图形的绘制上 svg 与 canvas 两种方式都可以实现相关功能，经以下对比，选择SVG作为绘图工具。4.3vue? vs? react?vue和react都是出色的js开发框架，在这两者的选择上，更依赖于上面选择的SVG技术 ，xml类型的dom结构，配合vue的template风格来操作非常方便;项目前期的demo制作时，并不希望构建庞大的前端系统，一个html+vue可以实现大多数的前端功能，后期构建项目时又可以重用代码，综上选择VUE作为JS开发框架。?5.技术细节5.1定义物体坐标四元数坐标(x,y,w,h)，下面所有计算基于此定义:x:物体左上角点的 x 坐标y:物体左上角点的 y 坐标w:物体横向宽度h:物体纵向高度?5.2定义坐标系统最初设计系统时，最大的疑问就是，现实中的物体怎么生成到系统中，怎么做出对应关系，墙体、桌椅、其它物资怎么在系统中表达。在这个问题的基础上就产生了底图(由楼层图生成，包含墙体，房间布局)、物体模型(如：桌椅、摄像头等物体的定义图形)、物体对象(把模型放置到地图中之后生成的物体)、自定义坐标系(物体的相对位置)等概念 ; 以画布的左上角为（0，0）原点坐标，将底图固定放置于画布中，以底图为基准放置物体，这样生成的图中物体、底图的坐标都是相对原点（0，0）的绝对位置，互相之间的位置也就确定了，生成的坐标就是自定义坐标系统数据。?5.3定义地图对象5.3.1 底图(将大厦 CAD 图精简为线条形式的简图，作为地图的位置参考系)5.3.2 画布(地图渲染的容器，所有元素在容器中渲染)5.3.3 大厦(底图及元素所在大厦)5.3.4 楼层(底图及元素所在楼层)5.3.5 楼层区域(A 区、B 区)5.3.6 地图资源对象(放置在地图上的物体对象，类似于 java 中 new 出的对象)5.3.7 资源模型 （生成地图中对象的模板，类似于 java 中的 class）5.3.8 资源分类(工位、资产、物资、空间等，每个分类的物体有不同的"属性")5.3.9 工具栏 （缩放?，拖拽?，单选?， 多选?，? 框选）?5.3.10 信息栏：资源配置信息展示及修改5.3.11 权限系统（对接内部系统权限管理，根据权限展示不同的地图资源）5.4地图生成与显示—?地图编辑系统涉及的概念及计算方法?一个全新的系统上线，必须经历的一个过程是基础数据的生成，开发人员不了解工区的布局，比如：工位、消防栓、空调、喷淋等资产的位置和编号等信息，没有办法直接初始化数据，行政人员不了解技术知识，没有办法直接生成技术口径的数据 ; 而且工区的布局会不定时的变化，不能由技术直接操作数据，所以一个方便、简单易用的编辑功能成为整个系统的重点。下面介绍一下编辑功能开发过程中遇到的一些概念和计算方法。? 5.4.1? 碰撞检测向地图上放置物体对象时，同类别的物体不能交叉放置，如：工位、冰箱、空调等 ; 而不同类别的物体可以交叉放置，如：工位上方可以放置摄像头、空调等，由于是 2D 效果图，显示出来的效果就是层叠放置。由此引出一个问题，怎样判断两个物体碰撞了。在放置元素时，扫描所有页面对象，与当前要放置的元素对比，如果元素区域发生交集，判定为碰撞，即：已知两个元素 P1(x1,y1,w1,h1) P2(x2,y2,w2,h2)，判断是否碰撞。①? x轴交叉条件：(x2>x1&x2x2&x1>x2+w2)②? y轴交叉条件: (y2>y1&y2y2&y1>y2+h2)③ 【x轴交叉条件】与 【y轴交叉条件】同时满足时，为碰撞。?5.4.2? 画面的缩放与拖拽? 方案 1：transform: translate(0px, 0px) scale(1.5)?通过 scale 按比例缩放，再通过 translate 将画面移动到某个位置的方式来控制缩放和移动,这种方式有坐标系对应不上的问题，缩放后的坐标系需要换算，引起缩放不平滑或缩放跳跃,最终放弃了这种方式的控制。? 方案 2（使用中）：ViewBox(x, y, width, height)① x,y 为需要显示的画面的左上角坐标，width,height定义矩形的尺寸②? 获取矩形的内容，扩大到画布尺寸，即完成了图像的放大操作③? 控制x,y的位置，拖动画面④? 控制w,h的大小，控制画布的缩放系统中定义的坐标也是来源于 Viewbox 的控制方式。? 5.4.3? 物体的拖拽JS 通用的拖拽控制方式，通过鼠标的按下，移动与抬起控制拖拽。① Pstart(x1,y1)：拖拽的起始位置② Pend(x2,y2)：鼠标的当前位置③ mouseDown：开始拖拽 记录Pstart④ mouseMove: 获取Pend 计算 Xp=x2-x1? Yp=y2-y1 ,并将结果赋值给元素⑤ mouseUp:结束拖拽? 5.4.4? 物体的单选在物体上添加 click 事件，被点击时记录为被选中即可完成单选操作。? 5.4.5? 物体的框选（多选）?已知鼠标按下与抬起的两点：start(x1,y1) end(x2,y2) 判断元素 P1(x,y,w,h)是否被框选，利用碰撞检测方案，将框选的区域看做一个物体（min(x1,x2),min(y1,y2),x1+x2,y1+y2），与它碰撞的物体都在框选范围内，标记为被选中,这种框选的方式来源于 windows 文件夹的操作方式。? 5.4.6? 物体的批量移动(键盘事件)键盘事件发生时，判断上下左右键，分别“周期性的(300ms)”处理所有选中的元素 左(x--)右(x++)上(y++)下(y--)? ，周期的大小选择会影响移动的顺滑程度。5.4.7 物体的对齐问题（单排/双排批量放置）在物体摆放时，工位的体量是最大的，而工位的布局又是整排摆放，如果一个一个工位去放置，工作量非常大，而且工位之间无法做到完美地对齐,基于上述问题，系统设计了一套可自定义数量，按单排、双排、横向排列、纵向排列的操作方式，大大减轻了地图部局的工作量。5.4.8? 自动避让弹窗选中物体时，如果弹出明细信息把它遮挡，用户没办法知道自己点击的是哪个物体，所以需要使弹出的信息不遮挡目标物体。同样利用碰撞检测方案，将弹窗定义为一个物体，并从 HTML 坐标系映射到 SVG 坐标系，进行碰撞检测。?5.4.9 右键菜单分享位置的实现右键菜单其实是一个简单的功能，屏蔽掉系统的右键菜单以后，自己在右键事件中制作一个菜单就可以完成，但是在右键菜单中分享 SVG 中的一个位置，就会出现一个 html 坐标系统中获取到的坐标与 SVG 中的坐标不一致的问题;SVG 中显示的图形可以放大、缩小、移动,从 HTML 坐标系中获取到的坐标并不能直接感知到这些操作，需要在获取到坐标以后，结合 SVG 图形的变换参数计算出最终要分享的坐标。?6.扩展?可扩展室内定位功能：6.1定位方式 wifi / 蓝牙wifi：零成本，利用公司现有AP即可完成定位，精度不高；蓝牙：有较低的成本，需要5米间隔部署低成本硬件，精度较高。6.2整合方案APP/小程序 直接访问地图站点页面，将获取到的 rssi 信息参数传递给页面，由 js 执行定位，并将地图加载到定位的位置，增加图钉，完成实时位置的显示。作者简介? 牛俊福C端及中台产研中心-效能平台部-信息系统团队2014年加入汽车之家，现任职于C端及中台产研中心-效能平台部-信息系统团队，负责财务/行政类信息系统的研发工作,主要使用java、react、RN、vue等前后端技术。阅读更多：汽车之家IM即时通讯平台技术分享强化学习在之家图像理解中的应用React Native瀑布流列表性能优化与实践