模板式备注的说明与使用

第1章 背景

有些用户在测绘的时候需要随时记录数据,如果能够在使用奥维地图时直接在标签,区域,轨迹中标注相关数据,就会提高工作效率,更加实用方便。奥维的备注可以录入数据,然而传统的备注都是基本的文本输入,无法满足用户多元化的需求,我们引入模板式的备注以满足用户多种数据录入方式。

第2章 实现方式

把用户的数据以Json格式存储在备注中,当需要编辑和查看备注时,调用用户自定义的模板呈现给用户,相同的数据可以用不同的模板风格呈现,以满足用户多样化的需求;同时通过模板的分发和共享可以实现一处设计,多处使用。

奥维地图内置最新的浏览器插件,可以兼容显示目前流行的HTML代码包括HTML5,同时其内置BootStrap3套件(可选)和jQuery库,允许在设计模板的时候直接使用BootStrap3的风格和jQuery函数。

2.1 模板是如何实现的

模板本质上就是一段HTML代码,用户在html语言中添加链接,添加相互关联的输入框等;在外观上使用网格和表单元素的布局,扁平化界面极简美观。

以下就是系统内置的一个模板例子


名称说明

Json格式: (JavaScript Object Notation) 是一种轻量级的数据交换格式。Json采用完全独立于语言的文本格式,这些特性使Json成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成。

Bootstrap3:Bootstrap是目前全球最流行、最火爆的Web前端开发框架之一。它的强大之处在于它将常见的CSS布局小组件和JavaScript插件进行了完整并完善的封装,能让没有经验的前端工程师和后端开发工程师都迅速掌握和使用,大大提高开发效率。此外,它还能在某种程度上规范前端团队编写CSS和JavaScript的规范。

jQuery:是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

第3章 操作步骤

V712以上版本普通奥维用户可以查看,如需编辑并保存请升级到VIP5及以上级别。

3.1 建立模板

3.1.1 打开奥维对象的属性对话框,可以看到在备注的旁边新增了一个"模板"按钮。

3.1.2 从菜单栏"系统"à"数据管理"à"备注模板管理" 进入到备注模板管理界面,在这里可以对模板进行增、删、改、导入导出、分享等维护操作,单击"添加" 新建模板。


3.1.3 填写模板名称并点击"显示文本"在这里使用通用的html语言编辑模板,到想要的格式。默认开启"使用内置BOOTSTRAP3风格",也可以不使用。编辑过程中点击左边的"显示html网页"来显示效果,完成点击"保存",新建模板"自定义1"保存到列表中备用。



3.2 修改模板

3.2.1 选中模板单击"修改"进入修改页面

点选"显示文本"进行自定义修改,默认使用内置BOOTSTRAP3风格,也可以不使用。修改时可以切换到"显示HTML网页"查看效果。修改完单击"保存"


3.2.2 删除模板,选中模板,单击"删除"à"是"即可

3.2.3 用户的数据与模板分开,输入完数据单击"保存"则数据保存到备注当中。

3.2.4 点击"模板"下面的按钮"HTML"即可打开最后一个编辑并保存的模板来显示数据

3.2.5 不同模板打开的是同一份数据

3.3 导入导出模板

3.3.1 导出模板:选中需要导出的模板,单击"导出"输入文件名称(奥维的唯一导出格式只能是ovctp的奥维格式),选择好目录,单击"保存"即可导出。

3.3.2 导入模板:单击"导入"定位到导入文件,单击"打开"即可导入。

3.3.3 分享模板,点击"分享",选择好友进行分享。


3.4 打印备注数据

打开需要打印的模板加载数据,在设置好网络打印机的前提下,在表格界面上右键单击选择"打印"即可。

下图是打印效果

第4章 如何设计模板

4.1 模板设计入口

奥维互动地图PC端提供模板设计入口,可以通过"系统à数据管理à备注模板管理"页面的"更多模板"按钮跳转到设计页面:

4.2 模板实例

4.2.1 设计页面的模板实例中提供了一些行业通用的现成的报表列表

4.2.2 点击 "查看"按钮,可以对该模板进行预览,如下图所示:

4.2.3 模板实例提供源代码,用户可以直接在"源码"页复制该模板的html代码,然后粘贴到奥维互动地图的模板设计页面,进行修改添加。

4.3 模板教程

模板教程里列举了一些常用的不同风格的控件,相当于一个控件库,用户可以直接在相应的操作字段里点击"查看",在里面对这类控件进行预览,也可以在"源码"页面直接借鉴代码。

4.4 设计模板

学习的差不多了,想试试身手?点击"设计模板"可以快速进入到html编辑页面:

这个编辑工具内置bootstrap3,能够提供自适应的布局,一个html页面同时适应不同尺寸的屏幕。提供一个参考模板拿来小试,点击"源码"可以在显示效果和代码编辑页面之间进行切换。