【第四组】技术文档大比拼2

场景:

工作项序号:002 查看过去城市旅游回忆

背景:

(1)典型用户:罗小欧,朱小叶(一对情侣)

(2)用户的需求/迫切需要解决的问题:         

   a、俩人曾经一起旅游过很多城市,想要在过后翻看照片回忆起来时有身临其境的感觉

          b、俩人有过一段最美好的回忆,就是在疯狂热恋阶段一起旅游过某一城市,当初的那种强烈甜蜜幸福感想要在翻看照片回忆的过程中找回

          c、想把翻看照片变成电影式回放的那种效果感觉

(3)假设:

          a、俩人已经完全会操作我们的软件Touch

          b、俩人已经将过去拍好的旅游照片上传软件并已完成自动整理分类和回忆生成。

场景:

        今天是罗小欧和朱小叶恋爱N周年,俩人自然想回忆过去美好的时光,曾经一起旅游的回忆就很好,尤其是热恋阶段的旅游回忆,而且还有照片实体和我们的软件,于是他们打开我们的软件,点开回忆界面,选择自己曾经的旅游回忆点击进入3D街景自动播放,过去的点点滴滴马上呈现在眼前,强大的感染力让俩人仿佛回到当初,甜蜜幸福的情绪涌上心头。

用例文档:

标题:使用3D街景旅游回忆再现功能

角色:用户(罗小欧和朱小叶)

主要成功场景:

        今天是罗小欧和朱小叶恋爱N周年,俩人自然想回忆过去美好的时光,曾经一起旅游的回忆就很好,尤其是热恋阶段的旅游回忆,而且还有照片实体和我们的软件,于是他们打开我们的软件,点开回忆界面,选择自己曾经的旅游回忆点击进入3D街景自动播放,过去的点点滴滴马上呈现在眼前,强大的感染力让俩人仿佛回到当初,甜蜜幸福的情绪涌上心头。

步骤:

1.打开进入Touch软件,出现图库首界面

2.点击左侧“回忆”按钮,右侧出来已经分类好的(时间、地点)具体回忆选项

3.浏览这些集成好的城市回忆,选择想要看的点击进入

4.3D街景播放;

5.在过去照片拍摄位置弹出照片

6.用户可以点击照片,以3D方式显示图片

;7.重复4,5,6步,直到回忆播放结束

8.回到回忆界面

扩展场景:

播放异常,该地区没有3D街景,网络异常等;

点击了错误的回忆,返回回忆界面。

 

功能说明书:

功能:根据图片得到路线,用3D街景显示路线,在路线中拍照的地点通过标签弹出窗口,显示这个地点的图片。

输入:图片信息,包括时间和经纬度信息。

输出:3D街景移动,弹出标签

界面:3D街景总览,3D街景显示,标签显示

 

技术说明书:

本来想玩百度地图API,结果被玩了…

腾讯地图同百度地图,做法都一样,连API的文档界面都大同小异…

以后想做的同学如果支持flash player的话可以考虑上面两个API

之后改用了google地图API,不过可能会被墙,而且没有大陆的街景,不过API好用,

自带的bing地图街景太少了,只有美国,而且美国都不太全。

吐槽结束,下面是正题:

  1.街景利用的是webView,内核是根据Edge,不过版本问题,Edge支持的webView不一定支持,而Edge不支持的webView一定不支持(划重点!),所以说有些页面可以先用Edge测一下。当前版本是VS2015,webView不支持flash,而百度地图那边的PC端接口使用的是flash,而对移动端是html5做的,而且对设备的判断还不是依据user agent头部,用的是Appversion(这个在官方文档上已经要被废弃了,不知道为什么还用),所以说,以后想做国内街景的同学,可以嵌入js伪装下移动端,或者等等webView支持flash,看行不行,反正我是放弃了。

  2.接口用的是javascript API,所以我在webView引用了写的一个网页,方便自己嵌入脚本。街景API的总览在:https://developers.google.com/maps/documentation/javascript/streetview?hl=zh-tw

详细的文档在:https://developers.google.com/maps/documentation/javascript/3.exp/reference?hl=zh-cn#OverlayView不过注意版本,详细的文档可能会更新。

具体的是,需要首先设置一个div,作为显示街景的块,然后利用google.maps.Map()创建一个地图变量,这个函数需要带两个参数,第一个参数是显示的位置,第二个参数是一个设置地图信息的对象,可以设置位置,缩放等,此时使用getStreetView得到街景变量,得到的地图变量和街景变量就可以进行各种操作啦。第二种方式是直接google.maps.Panorama ()直接生成街景,也是两个参数,同上。不过直接生成街景的话无法生成标签了。

  3.标签在文档是在地图上生成的,然后和全景共用。有三种,Marker、InfoWindow 和自定义的OverlayView,具体使用的方式参见示例,不过最重要的是需要在创建的时候指定map的值才能显示在地图中。InfoWindow暂时还没法在全景图中显示,不过可以给mark一个url加载图片,然后设置一个click事件与webview交互,可以设置anchar和origin来控制在全景图中的高度和方位。

 

  4.街景移动使用setPosition,设置镜头等信息用setPov

 

  5.嵌入脚本用InvokeScriptAsync,可以返回一个string作为和网页的交互,不过还在探究网页发生事件时回传。

  6.界面的自动移动使用ThreadPoolTimer即可。

  7.移动的时候需要判断方位,使用pothPov类给出两个点,利用getHeading判断前进方向。

  8.路径的生成准备使用继续使用接口得出接口,从路径中选取点,距离在0.001范围之类移动较为理想不会有太大跳跃,路径点都放在arraylist中,每个item存一个Point类。

  9.同一类图片需要聚类,采用深搜,类似于找联通块的思想将一个特定范围类的图片聚类。

posted @ 2017-07-20 11:12  张裕浩  阅读(172)  评论(1编辑  收藏  举报