[WebGIS] HTML5跟踪GPS轨迹(4)基本界面布局

前文已经介绍了我们整个程序的基础技术,一个是地理位置获取(HTML5 Geolocation接口),一个是地理位置存储(HTML5 IndexedDB)。下面进入正题,我们从页面的前端样式开始,先绘制出这个webapp的样式,然后将页面每一个元素对应的功能一一实现出来。

笔者使用的是vuejs这个js框架进行开发,其官方提供了非常好用的spa脚手架工具——vue-cli(如果之前对此不熟悉,可以查看本文最后的参考链接)。通过这个工具,我们可以把html css 和 js 同时写在一个文件中(.vue),为了进一步简化开发方式,又分别使用了pug(也就是jade 改名了)和stylus来写html 和 css脚本。使用下面的命令安装

npm install pug --save-dev
npm install stylus stylus-loader --save-dev

下面就可以愉快的写界面了。效果如图:

功能解释

1.开始记录按钮。用于创建数据库并记录不断获取的位置,同时控制开关。运行后如图:

2.查看结果按钮。用于查看已经记录下来的轨迹,这里使用的是百度地图。

3.应用设置按钮。用于webapp的基本设置,暂时有两个设置选项,一个是采样间隔,一个是清空数据。

代码

全部代码可以参考:sailor103/tubu: Use HTML5 to track your moving positon

目前来说还有很多bug,后续会继续完善。

[WebGIS] HTML5跟踪GPS轨迹(3)IndexedDB使用精简入门下篇 [WebGIS] HTML5跟踪GPS轨迹(5)记录轨迹功能实现

作者:,GIS爱好者。
分享本文,请您带上本文链接
分享到:

发表评论