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

更新于 2020.11.19 krpano 1.20.9

 

1.20默认皮肤自定义地图

 

krpano 1.20版本提供了在默认皮肤这能够添加自定义地图的方式,也即是如果你不使用在线地图,可以利用原有默认皮肤中地图按钮(地球图标),点击后会弹出在线地图,该地图可实现拖拽以及基本的位置标识。

 

1.20默认皮肤自定义地图使用方法

使用MAKE VTOUR droplet.bat生成默认皮肤,打开tour.xml,找到下面skin_settings代码,如果使用默认皮肤的自定义地图的话,可直接使用下面的设置,api_key不要填写。

然后在scene标签外加入下面代码:

需要修改的是上面高亮的9-15行。其中skin_map_image是自定义地图本身所用的图片,在url属性中修改为你要用的自定义地图的图片路径。

然后从mapspot1到mapspot6是对应的六个地图点,每个地图点对应各自要跳转的场景。如果你需要在地图内放入六个地图点,那么就是mapspot1到mapspot6。如果是四个地图点,就是mapspot1到mapspot4,按照你所需要的数量,对范例中的layer进行删减。

x和y是地图点对应地图本身的相对位置,这里是按照百分比,也就是如果地图宽度为1000,高度为1000,若x为16.93%,y为14.80%,则实际上x的数值为169.3,y的数值为148。

要获取这个百分比数值,可以在ps软件中打开地图图片,然后将信息窗口中的单位设置为百分比,通过鼠标移动到图上对应的位置,并查看相应的百分比值,即x和y。

每个layer的linkscene自定义属性即这个地图点被点击后要跳转到的scene的name。

如果需要修改地图点的样式,可找到url=”skin/vtourskin_mapspot.png”,也即是mapspot的style元素,修改其中的url属性。

 

方法1在线演示

 

方法1案例下载

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

 

方法1代码说明

自定义地图,非必应地图、谷歌地图或者百度地图这些我们常常使用的在线地图。自定义地图就是针对我们所拍摄场景的一张地图,例如房地产项目的户型图、酒店的平面图、景区的景区地图等等。通常也就是一张或若干张图片,一般为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值的获得请看关于雷达插件的介绍。

 

方法2官方下载包路径

你电脑的路径\krpano-1.20\viewer\examples\demotour-winecellar\ (1.20)

提示:如果不明白下载包路径是什么,请查看 循序渐进(3)- krpano下载包的使用说明

 

方法2在线演示

 

方法2代码说明

下面的代码把每个场景自身的hotspot部分去掉了,尽可能地简化了步骤。

点击代码窗口最右侧按钮,在新窗口打开后复制代码

步骤1

确保雷达插件radar.js、radar.swf复制到plugins文件夹里,如果没有的话,则到下载包的viewer下的plugins文件夹复制。将自己的地图图片、地图点图片、激活点图片复制到skin文件夹或自己知道的路径中。

步骤2

  • 把上面代码中 从代码复制部分到代码复制结束部分之间的代码全部复制到scene标签的外部。
  • 找到url=”skin/inmap.png” 将url中的数值修改为地图图片的路径
  • 找到url=”skin/camicon.png” 将url中的数值修改为地图点的路径
  • 找到url=”skin/camicon_red.png” 将url中的数值修改为地图点的路径
  • spot0、spot1、spot2……是对应的scene的index为0、1、2,按照这个原则写layer。如何确定x和y坐标。打开PS,将map图片拖到软件里,让信息窗口打,并使得单位(点击加号)切换成像素。让鼠标放在你想要的位置上,就可以看到在信息窗口中出现XY的坐标,然后将其对应地写在xml文件。例如我们把鼠标放在图片的客厅拍摄点上,信息窗口的像素显示为X:114 Y:124,那么我们就对应地把坐标值写在代码里。

步骤3

scene的部分,注意在每个scene的onstart中写updateradar(-1.92);括号的数字是heading数值。

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

发表评论