ol与Vue室内定位模式设计

804 阅读4分钟

前期调研

技术分析

图形化导航是绝大部分系统整合资源显示的重要环节、普通的管理系统体感上,分为

  1. 功能级
    即只为功能实现的集合,目的只是从0-1,从无到有的过程,整体功能没有设计性和连贯性。
  2. 易用级
    关联性的功能有适当的穿插链接,业务操作具有连贯性及引导性,可视为从有到易,多为“功能级”的延续优化版本(有长期软件行业从业经历的都应该知道,前期需求不明,基本上很难达到易用级,需要经过市场印证调整)。
  3. 整合级
    同样的,在满足 “易用级” 的同时,如何在同类竞品中脱颖而出,尽可能的便捷的为客户减量提效,精简功能及操作,整合功能的连贯性及行为习惯,(对操作而言,某一个角色完成某一项工作,原本可能要历经3-5个模块才能完成,适当的分析后,将角色、业务动作、后续操作整合后)就能适当的减少交互动作,连贯性得以优化。
  4. 智能级
    当不同角色的行为习惯固化后,往往需要针对每一个角色设置驾驶舱,终极体验应该是一个功能页即涵盖了用户所有的日常操作,包含进度、提醒、分析、报表、待办、业务动作都能够连贯性的进行操作,但传统的页面是无法满足复杂功能的整合的,需要有下钻、归类、交互分级、监控等多项复杂交互,地图的交互其实兼具有这部分特性,且满足复杂的整合能力,当然“智能级”强调的是工作机器做,人来监督审查,这个需要强大的数据支撑及硬件设备支持。

市面上组件分析

回归正题,图形化显示是系统跃迁的重要标志,高德地图,室内地图比较符合预期交互模式,但仅限于高德 image.png 其他图层渲染还有服务的问题往往受限,采用的技术线路是openlayer灵活性更高,其他相类似的如:openlayers-indoorequal、还有其他一些4-5种的类型的、openindoor6-main image.png 但封装的局限性太大,扩展灵活性不足、且封装的方式非以Vue组件式的设想去进行,感觉使用比较复杂

扩展性分析

ol和ol-ext是基础工具集封装,因为项目比较大,范围也比较广,我更愿意称之为骨骼,而我们实现相关地图模式的时候,服务受众往往是调用者,更强调易用性、灵活性及扩展性,如果按照传统的class封装或者jq换皮式封装不太符合预期,往往存在定义和显示的区分,所以决定剖析模式,结合vue的使用特性进行封装,这是初衷,目前已初步验证,各位大佬继续往下看

模型分析

之前有过相关地图类的处理业务,我作为使用和改造者,只能用一言难尽来形容,归结了以下模式、搜索、层级、归属、信息显示、交互切换等在较大的应用后期,往往会很复杂,很考验整体性和设计性,不然就是灾难,很荣幸这个灾难我亲身经历过。 概括起来其实就是下钻结构,往往是同类图层下钻后显示子图层、更复杂一点的如室内定位再扩展一个维度的细节,其中由包括检索,交互信息显示,模式切换等关键要素

实现机理

先上个图,通过openlayer+vue实现了相关的渲染,重要的是保留了vue的使用特性,让结构清晰化,调用更加易用

  • 整体 image.png
  • 细节 image.png
  • 交互 image.png

组件设计

组件设计的文件结构

image.png 组件调用结构 image.png

使用分析

所需元素保留层级对应、数据外置、设置交互配置化,基本满足当前两种模式的交互及显示,从易用性来讲,已达成设计目标,后期也考虑到了一些设计,继续丰富完善即可

结束语

相关的2.5D投影,地图倾斜等,还有一些结构化的设计,初步的模型已经成型了,只是渲染效果还比较粗鄙,另外关于社区建设等后续设计又有了新的发现,待后续分享
老哥们、点赞加关注,后续不迷路!!!