基于SVG可视化展位预定模块设计与实现.docVIP

基于SVG可视化展位预定模块设计与实现 　　摘要：展位是会展企业的核心产品，展位预定是展位销售的关键环节。针对以往使用表格缺乏对展位空间位置和形状的直观表现，使用图像又难以实时显示预定状态等问题，提出了基于SVG图形技术的可视化展位预定方案，并设计了展位预定模块的层次结构，实现了可视化展位预定、展位属性即时提示、预定状态动态更新等功能。应用实践表明，基于SVG的展位预定设计方案有良好的实时性、交互性和适应性，能较好满足展位显示和预定的双重需求，破解了展位可视化预定难题，为会展企业信息化建设提供了解决方案。 　　关键词：SVG图形技术； XML； PHP； JavaScript；企业信息化 　　中图分类号：TP319文献标识码：A文章编号：1672??7800（2014）007??0055??03 　　 　　 　　基金项目：广东省教育科学“十二五”规划教育信息技术研究专项课题（12JXN020） 　　 　　0引言 　　会展是促进贸易、投资、技术、文化交流等事业发展的重要促进手段。为适应会展经济品牌化、规模化、专业化和国际化需求［1］，实现会展服务供应商、参展商、合作伙伴、观众等要素的高效快捷精细化管理，推动会展企业信息化势在必行。展位是会展服务供应商的核心产品，描述展位属性的参数有展位编号、空间位置、形状、面积、价格、展位预定情况等，以往使用表格化的信息管理形式来管理展位，使销售过程中与客户的沟通变得非常复杂［2］。表格数据缺乏对展位空间位置及形状等属性的直观表现，而使用传统图形化方式（矩形、L形）表达的展位属性，对于不规则形状展位没有较好的解决办法。另一方面，在展位预定管理中，传统图形模式存在实时性差、展位预定状态与展位后台更新难以同步、更新工作量大等问题，展位销售整体趋势难以把控，不便于招展进度管理。为此，采用可视化系统设计方法，借助SVG图形技术和交互控制能力，实现展位预定、展位状态属性提示和展位的可视化管理,进而提供一种展位图制作方便、展位属性表现直观准确、展位预定状态实时更新的可视化展位预定方案，从而为会展服务供应商提供直观高效的展位预定管理服务，为参展商提供便捷及时高效的展位预定服务，极大地提高了会展管理的可视化、人性化、真实化，为会展企业信息化提供了解决方案。 　　1模块层次结构 　　可视化展位预定主要功能需求是实现展位SVG图形的交互控制与呈现，模块结构可分为4层:数据录入层、数据层、功能层和交互层［3］，如图1所示。数据录入层实现展位图录入与绘制；数据层使用XML文档存储展位状态属性及状态数据；功能层通过XSLT将数据层XML文档转换为浏览器端的SVG图形，同时通过PHP DOM操纵数据层XML数据文件，实现预定状态的实时更新；交互层把功能层转换生成的SVG文件嵌入到页面，采用JavaScript实现预定展位编号的捕捉和当前展位属性状态数据的显示隐藏功能。 　　图1展位预定模块层次结构 　　2模块实现 　　2.1SVG绘制 　　根据展会场馆布局，按合适比例制作展位SVG平面图。SVG展位图制作有3种方式：①直接在文本编辑器中编写SVG文档代码来创建；②在图形、CAD 或具备 SVG 导出功能的软件包中直接绘制，如Illustrator、Inkscape、SVGDeveloper等；③通过使用 XSLT 或编程语言转换源 XML 来动态创建 SVG。 　　2.2数据层XML建立 　　基于SVG绘制生成的SVG文件，通过添加内部的DOCTYPE声明和展位属性数据来建立数据层XML文档。代码2～8行根据DTD文档类型定义规范添加DOCTYPE声明来构建合法的XML文档；代码11～19行用于添加展位属性数据。expolist标签用于组织各展位属性和状态数据，利用元素将图形元素分类成组［4］，按展位功能区或展位级别（如标展、特装等）分组管理，再在各个展位中添加展位销售数据，如展位报价price和展位预定状态status属性；代码20～22行用于生成展位属性及状态的文本提示，完成后展位xml文档部分代码如下： 　　1. 　　2. !DOCTYPE expolist ［ 　　3. 　　4. 　　5. 　　6. 　　7. 　　8. 　　9. …… 　　10. ] 　　11. 　　12. 　　13. 　　14. 　　15. 　　16. 　　17. 　　18. 　　19. 　　20. 　　21. 　　22. 　　23. 　　2.3SVG动态转换模板XSLT设计 　　 基于数据层XML文档生成SVG图形的关键是编写XML到SVG转换的模板XSLT，转换需完成以下功能：添加SVG文档头信息，添加SVG文档载入初