移花接木(12)- 添加自定义地图

在线演示

案例下载

链接:http://pan.baidu.com/s/1c0hlxao 密码:mp9j

代码说明

自定义地图,非必应地图、谷歌地图或者百度地图这些我们常常使用的在线地图。自定义地图就是针对我们所拍摄场景的一张地图,例如房地产项目的户型图、酒店的平面图、景区的景区地图等等。通常也就是一张或若干张图片,一般为png带有透明通道的图片。拿本人最熟悉的房地产项目来说,拍的是一个简单的两房户型,拍了三个场景,包括客厅和两个卧室。那么我就希望在全景界面的左上角可以显示该户型的户型图,同时在我浏览场景时,户型图对应的热点有相应的变化,我不仅可以通过底部的缩略图切换不同的场景,还可以通过点击户型图上的热点来切换。这就是自定义地图的基本功能。

官方也是有一个案例的,它的位置在 examples\virtual-tours\scenes-with-imagemap-2 

 

当我们将官方的自定义地图硬生生地搬到了自己的项目里,对于第一次看到这种情景的人,必然是满心欢喜,随着视角的变化,雷达的方向和扇形面积也随之变化,似乎真有一种“实时监控”的感觉。但没过几分钟,你就想该如何更换成自己的图片,更换成自己的地图点图标。

最快的方法,当然是针对map的url以及spot的url进行更改。而且你还可以按照我在该教程中的注释试着修改颜色、尺寸等属性,你可以将它放在画面中部,你也可以使用其他颜色做为容器背景。但如果你要面对的是上百个场景,可以想象单单是地图点的spot就有很多重复粘贴的工作。明明这里可以用一个style就可以解决的事情,我们不可能不用啊。因为官方案例几个地图点都是不同的图片,因此弃之不用也情有可原。另外spot1、spot2、spot3这些命名方式非常有规律,我们是否可以利用呢?有必要每次都要在scene的onstart里写这么多spot么?

今天我们就来对其改造吧。我们首先用自己的图片,暂时借用skin文件夹里的两个地图点图片。把图放在了左上角。你可以直接下载案例。

从演示中可以看到,激活地图点(绿色)完全替代了地图点(蓝色),相比起仅仅附加一个红点,更符合普通大众的习惯。我们来看代码。

另外,我们只需要在scene标签中的activetespot里写一个参数,也就是保留后面的heading值,不用再把spot1之类的name写上,毫无疑问这样提高了我们的工作效率。

 

那么回头来看那几个普通的地图点,该如何确定X和Y坐标。打开PS,将map图片拖到软件里,让信息窗口打,并使得单位(点击加号)切换成像素。让鼠标放在你想要的位置上,就可以看到在信息窗口中出现XY的坐标,然后将其对应地写在xml文件。例如我们把鼠标放在图片的客厅拍摄点上,信息窗口的像素显示为X:114 Y:124,那么我们就对应地把坐标值写在代码里。
雷达heading值的获得请看关于雷达插件的介绍。

 

在 “移花接木(12)- 添加自定义地图” 上有 2 条评论

发表评论