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

vue + svg 构建地图系统心路历程右键菜单其实是一个简单的功能,屏蔽掉系统的右键菜单以后,自己在右键事件中制作一个菜单就可以完成,但是在右键菜单中分享 SVG 中的一个位置,就会

欢迎大家来到IT世界,在知识的湖畔探索吧!


1.概述

家家职场(空间管理系统)是用来将职场的工位、会议室、功能房、物资等进行可视化的室内地图系统,并且员工可通过手机扫码或在地图上预定工位,员工信息自动关联到地图上;可以实时的查看职场资源的使用情况、物资的健康状况,通过报表系统可以明显的看出职场的资源使用率、BU的分布架构及人员变化,提高职场资源管理效率。

2.功能模块

2.1 地图编辑模块

2.2 工位资源逐级分配功能模块

2.3 全员资源可视化检索功能模块

2.4 权限管理模块 (本文不展开讨论)

2.5 资产管理平台/报表平台(本文不展开讨论)

3.效果展示

3.1

地图编辑功能展示

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

3.2

工位资源逐级分配模块功能展示

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

3.3

全员资源可视化检索功能

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

4.技术选型

4.1

外采 vs 自研

在外采与自研的选择上,从与现有系统融合、后期维护与扩展开发、成本等几个方面综合考虑,选择了自研。

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

4.2

svg vs canvas

在图形的绘制上 svg 与 canvas 两种方式都可以实现相关功能,经以下对比,选择SVG作为绘图工具。

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

4.3

vue 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

定义地图对象

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

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 文件夹的操作方式。

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

► 5.4.6 物体的批量移动(键盘事件)

键盘事件发生时,判断上下左右键,分别“周期性的(300ms)”处理所有选中的元素 左(x–)右(x++)上(y++)下(y–) ,周期的大小选择会影响移动的顺滑程度。

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

► 5.4.7 物体的对齐问题(单排/双排批量放置)

在物体摆放时,工位的体量是最大的,而工位的布局又是整排摆放,如果一个一个工位去放置,工作量非常大,而且工位之间无法做到完美地对齐,基于上述问题,系统设计了一套可自定义数量,按单排、双排、横向排列、纵向排列的操作方式,大大减轻了地图部局的工作量。

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

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

► 5.4.8 自动避让弹窗

选中物体时,如果弹出明细信息把它遮挡,用户没办法知道自己点击的是哪个物体,所以需要使弹出的信息不遮挡目标物体。同样利用碰撞检测方案,将弹窗定义为一个物体,并从 HTML 坐标系映射到 SVG 坐标系,进行碰撞检测。

vue + 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等前后端技术。

作者:牛俊福

来源:微信公众号:之家技术

出处:https://mp.weixin.qq.com/s/VVWosXhD8FTiilv-aFJOUA

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/43299.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信