更新于 2020.11.19 krpano 1.20.9
假设现在有那么一种情况,你拍了几套样板间,然后这十几个点(场景)都放在一个xml里,然后,这时候客户希望在能打开地址展示第一个场景的同时,还可以按照其需求通过打开网址直接看到其他场景,例如,打开网址直接就是卫生间的马桶(恶趣味的客户)。
我们分开两种情况,一种是krpano 1.19pr3之前的版本,一种是包括pr3及之后的版本。
以下方法适用于krpano 1.19 pr3及之后版本
我们不可能因为这种需求去调整文件中scene的位置,因为这样就需要很多个xml文件,同时又要生成很多个地址,占据服务器空间。我们只需要在皮肤中做一个小小的设置。
首先,我们需要使用krpano 1.19 pr3及之后的版本,使用MAKE VTOUR 生成默认皮肤,然后在tour.xml的skin_settings中找到
1 |
deeplinking="false" |
我们把这个false改为true,然后就大功告成。我们来看看一个例子。打开下面的链接。
http://krpano.com/tours/paris/?skin_settings.deeplinking=true
当你打开后,当载入一个新的场景或者是用户没有进行交互超过0.5秒(idletime)时,则浏览器地址栏会自动更新为当前场景及当前视角。例如:
http://krpano.com/tours/paris/?startscene=0&startactions=lookat(31.81,1.15,120,0,0);
可以看到在地址的问号后面跟着一个startscene和startaction。有了它们就可以执行:
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 |
<action name="startup" autorun="onstart"> if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); ); loadscene(get(startscene), null, MERGE); if(startactions !== null, startactions() ); </action> |
小问题
在这个deeplinking的用法中,我们可以看到在地址里,startscene后面跟着的是一个数字,这是场景的index,当浏览器执行了这样的地址进入到场景后,场景的name就会被index所取代,一旦我们在这个场景时需要使用到name时,实际上获取的是其序号。这可能会带来一些数值的匹配问题。
官方为什么要采取index的形式而不是直接用name,或许是考虑到name的命名相对宽松,一些特殊字符可能会造成浏览器识别的问题,例如&。
因此我们还需要将startup这个action修改成如下:
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 |
<action name="startup" autorun="onstart"> if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); ); loadscene(get(scene[get(startscene)].name), null, MERGE); if(startactions !== null, startactions() ); </action> |
以下方法适用于krpano 1.19 pr2及之前版本
首先,我们先来看看默认皮肤中tour.xml有这么一个startup的action。
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 |
<action name="startup"> if(startscene === null, copy(startscene,scene[0].name)); loadscene(get(startscene), null, MERGE); </action> |
我们打开tour.html,确保其中传递参数的属性为true。
embedpano({swf:”tour.swf”, xml:”tour.xml”, target:”pano”, passQueryParameters:true });
接下来就是给我们的链接地址进行传参的设置了。假设你有一个地址,前面,可能他最后的几个字符就是tour.html,那么我们可以在后面加一个?
http://krpano360.com/wp-content/uploads/krpano/demo/tour.html?startscene=1&start_hlookat=20&start_vlookat=0&start_fov=90
在线演示
这里我们用问号?来开始第一个参数,如果有更多的参数需要从HTML传递到xml中的话,用&来隔开。我们的第一个参数就是startscene,我们将某个scene的name传递进去了。我们可以直接写序号。例如?startscene=2,这样的话就是scene[2],也就是第三个场景作为startscene。在本例中我们就是直接写序号index。另外我们还可以传其他参数,只要中间用&隔开即可。例如,我们传递了跟视角相关的参数,然后在startup里进行处理。点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 |
<action name="startup"> if(startscene === null, set(startscene,0); ); loadscene(get(startscene)); ifnot(start_fov === null, copy(view.fov,start_fov); ); ifnot(start_hlookat === null, copy(view.hlookat,start_hlookat); ); ifnot(start_vlookat === null, copy(view.vlookat,start_vlookat); ); </action> |
社交媒体分享
全景漫游项目在手机端和PC端有很多不同之处,其中一点就是手机端的展示平台通常自备浏览功能,例如微信右上角的三个小圆点,还有众多手机浏览器的强大分享功能。相比起手机端的分享功能,PC端的浏览器相对就差很多了。要快速将全景地址分享到微博,想通过浏览器自带的功能,并不是那么一件容易的事情。因此我们需要自己添加分享到微博的按钮。
事实上,关于分享到微博的按钮,微博本身提供了一个按钮:
http://open.weibo.com/sharebutton
不过这个按钮是写在HTML里,而且其固定的样式未必符合我们全景ui的要求。因此有必要在全景漫游内部自定义一个按钮。因此我们首先要有一个按钮。
1 |
<layer name="sharebutton" align="left" style="skin_glow" url="share.png" crop="0|0|200|200" x="0" width="100" height="100" onclick="weibo();" /> |
按钮的其他属性根据设计需求安排,我这里只是直接复制某段代码,主要是看onclick的部分,是执行一个action。
1 |
devices="desktop" |
考虑到这样的按钮只需要在pc端上出现,因为在某个layer中设置一个devices属性是必要的。
接下来我们再来看看action。我们在skin_settings增加了属性,是
1 |
selflogourl="http://flvkh.soufun.com/e-book/360/zhltfrf/360logo.jpg" |
当然属性的名字并不重要,主要是这个属性中,我们记录了必须的网址和微博分享中缩略图地址。因为要分享到微博的关系,在我们的原有地址不能含有&,因此只能将startup这个action的部分功能移植过来。注意如果有小行星的话,这里的代码会把小行星屏蔽,因为小行星会导致最后的视角是错误的。也就是用户点开我们分享的地址,就是我们分享时的视角了。
以下内容只能用于krpano 1.19 pr3之后。
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 |
<action name="weibo"> copy(adr2, browser.location); indexoftxt(qi2, get(adr2), '?'); if(qi2 GT 0, subtxt(adr2, adr2, 0, get(qi2))); set(adrurl, calc(adr2 + '?startactions=set(startscene,' + si + ');if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );loadscene(get(startscene), null, MERGE);lookat('+h+','+v+','+f+','+d+','+a+');set(skin_settings.littleplanetintro,false);' )); txtadd(weibo_share, 'http://service.weibo.com/share/share.php?url=',get(adrurl),'&type=button&language=zh_cn&title=',get(title),'全景展示','&source=',get(adrurl),'&pic=',get(skin_settings.selflogourl), ); openurl(get(weibo_share), _blank); </action> |
你只需要修改skin_settings的属性就可以了。如果要修改分享的文字,可以修改上述代码中红色的部分。点击按钮就会弹出分享地址而且还是刚才我们指定的场景和视角。
注意,openurl在本地使用时会受到浏览器安全限制而失效。
国外社交媒体的分享代码
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 |
<social share="txtadd(urltext,get(social.%1),%2);openurl(get(urltext),_blank);" facebook="http://facebook.com/share.php?u=" twitter="http://twitter.com/intent/tweet?status=" googleplus="https://plus.google.com/share?url=" vkontakte="http://vkontakte.ru/share.php?url=" odnoklassniki="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=" /> |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 |
<layer name="face_book_button" .... .... onclick="social.share(facebook,http://your_domain.com/path_to_tour/page.html)" /> |