Krpano全景：在javascript中动态添加/删除/修改（位置）热点（向后端写入）

接下来看在JS中的方法：

1.手动添加热点（点击图上添加点）

2.查找热点

3.修改热点

4.删除热点

其他方法

作为管理员，在管理全景时会涉及到各个标签的操作，本篇文章介绍在JS中对热点的操作，其数据可传到后端并写入数据库。

首先先给一个在xml文件中的动态热点添加的方法，下面的代码直接把两个url图片换了就可以直接看效果：

<hotspot name="mark" url="hotspot.png" scale="0.2" ath="56.614" atv="-27.089" onclick="test();" />
<events onclick="test();" />
<action name="test">screentosphere(mouse.x, mouse.y, h, v);addhotspot(get(hs));set(hotspot[get(hs)].url, 'mark2.png');
</action>

接下来看在JS中的方法：

1.手动添加热点（点击图上添加点）

krpano提供screentosphere(x,y,h,v)和spheretoscreen(h,v,x,y,stereoside)方法来进行屏幕和全景坐标转换。

先看第一种方法，这种krpano工程中添加热点的方法：

krpano的每一个全景项目都有一个tour_editor.html文件，这个文件里提供的添加热点的方法是先在固定点添加一个热点，并给热点添加一个可拖动的方法，然后再手动拖动热点到想要添加的地方。

//动态添加热点
function AddHotspot() {var spotname = "addhotspot";var hlookat = 0.000;var vlookat = 0.000;krpano.call("addhotspot(" + spotname + ");");krpano.call("set(hotspot[" + spotname + "].url,../SystemPicture/Mark.png);");krpano.call("set(hotspot[" + spotname + "].ath," + hlookat + ");");krpano.call("set(hotspot[" + spotname + "].atv," + vlookat + ");");krpano.call("set(hotspot[" + spotname + "].ondown,draghotspot(););");
}//获取krpano点坐标 ath-x  atv-y
function GetHotspot(ath, atv) {$('#showpoint').text(ath + '<br />' + atv);//将数据添加到数据库//成功后图上删除该点
}

xml中的代码

     <!--  Drag hotspot  --><!--  The screentosphere action will convert the x/y variables to the h/v variables and the spheretoscreen action the h/v variables to the x/y variables.  --><action name="draghotspot">spheretoscreen(ath, atv, hotspotcenterx, hotspotcentery, 'l');sub(drag_adjustx, mouse.stagex, hotspotcenterx);sub(drag_adjusty, mouse.stagey, hotspotcentery);asyncloop(pressed,sub(dx, mouse.stagex, drag_adjustx);sub(dy, mouse.stagey, drag_adjusty);screentosphere(dx, dy, ath, atv);roundval(ath, 3);roundval(atv, 3);js(GetHotspot(get(ath), get(atv))););</action>

当然，以上代码只提供了方法，还要在JS中添加一个按钮，一个文本框，点击按钮来激活添加点功能，文本框显示全景坐标，这个坐标需要传到后端保存到数据库中。

上面的方法有一个缺点，毕竟如果要目的地在目前视角的对面，由于需要拖动到目的地，所以显得心累……

因此，下面来看第二种方法：

krpano提供的与JS的交互方法中，就有屏幕坐标转换为球面坐标（screentosphere(x,y)），球面坐标转换为屏幕坐标（spheretoscreen(h,v)）,获得的结果是一个对象。

function AddAnyHotspot() {//跨浏览器的事件对象var EventUtil = {addHandler:function(elem,type,handler){if(elem.addEventListener){elem.addEventListener(type,handler,false);}else if(elem.attachEvent){elem.attachEvent("on"+type,handler);}else{elem["on"+type]=handler;}},removeHandler:function(elem,type,handler){if(elem.removeEventListener){elem.removeEventListener(type,handler,false);}else if(elem.detachEvent){elem.detachEvent("on"+type,handler);}else{elem["on"+type]=null;}},getEvent:function(event){return event?event:window.event;},getTarget:function(event){return event.target||event.srcElement;},preventDefault:function(event){if(event,preventDefault){event.preventDefault();}else{event.returnValue = false;}},stopPropagation:function(event){if(event.stopPropagation){event.stopPropagation();}else{event.cancelBubble=true;}}};//鼠标点击监听var div = document.getElementById("pano");EventUtil.addHandler(div, "click", function(event){event = EventUtil.getEvent(event);//JS中获取屏幕坐标方法的Y值比krpano中获取方法多66个像素点var sphereXY = krpano.screentosphere(event.screenX, event.screenY - 66);var  sp  = krpano.spheretoscreen(event.screenX, event.screenY - 66);var sphereX = sphereXY.x;var sphereY = sphereXY.y ;krpano.call("addhotspot(kk);");krpano.call("set(hotspot[kk].url,../SystemPicture/Mark.png);");krpano.call("set(hotspot[kk].ath," + sphereX + ");");krpano.call("set(hotspot[kk].atv," + sphereY + ");");});
}

大概是Krpano的获取屏幕坐标点的算法和JS中的不一样，他们获得的屏幕坐标的Y是不相同的，JS大66，所以必须减去。
还是需要在JS中添加一个按钮来调用这个函数哟。

其实我觉得对热点的操作难点应该就是在添加热点了吧，所以其他部分就直接放代码了。

2.查找热点

//查找点
function LookupHotspot() {//手动输入热点text查找，此时可能出现多个热点var spottext = $("#inputHotspot").val();  //热点的text名字,可重复//在数据库中找到该名字所匹配的所有热点，并返回其信息，在图上显示//......//图上点击某点，信息框中出现对应的信息，此时点唯一//在数据库中找到该名字所匹配的热点后，再匹配坐标值找到对应点    函数传递三个变量，后两个可缺省//将全景图的视野转向第一个热点所在位置$("#ModyfiHotspot").attr("disabled", false);$("#DelHotspot").attr("disabled", false);krpano.set("view.hlookat", -180);krpano.set("view.vlookat", 50);//改变所找到点的图标krpano.call("set_hotspots/plugin(hotspot, url, ../SystemPicture/Mark2.png, name, " + spottext + ");");  //此处变量应为热点text和图片，热点text是用户输入的值
}

注意，注释中的热点text是热点的某种名称，例如每个人的姓名，不唯一，而热点的hotspot_name是热点的真正的名称，例如每个人的身份证号，是唯一的。
如果热点具有点击事件，那么点击热点后可直接获取这个热点的真正名称改变其图标，如果不具有可操作事件，那就根据上面的方法获取屏幕点坐标，然后给定一个小范围的圆，在这个圆内的点就是你点的那个点，毕竟你点的位置和点的真正位置不一定是完全一致的。

3.修改热点

function ModyfiHotspot() {//点击表中所查找出的点，修改对应的信息var spotname = $("#inputHotspot").val();  //该点的name，唯一值//将视野转向该点并修改该点的图标krpano.set("view.hlookat", 0);krpano.set("view.vlookat", 30);//krpano.call("set_hotspots/plugin(hotspot, url, ../SystemPicture/Mark2.png, name, spot4);");//设置该点在图上可拖动，修改坐标krpano.call("set(hotspot[" + spotname + "].ondown,draghotspot(););");//......返回修改的内容//......修改成功后图上删掉该点
}

修改热点不推荐先删再添加，如果热点多且表关联大，则效率极其低下，而且如果这样做更好，那还要update干嘛呢。

4.删除热点

//删除点
function DeleteHotspot() {var spotname = $("#inputHotspot").val();//图上操作krpano.call("removehotspot(" + spotname + ");");//此处变量为热点name，唯一值，主键//数据库操作
}

其他方法

获取接口对象
在创建播放器时，可以通过config的onready参数传入回调函数来获取krpano Javascript-Interface object。修改页面的JS代码如下：

<!doctype html>
<html>
<head><meta charset="utf-8"><script type="text/javascript" src="./krpano.js"></script><style type="text/css">html,body{width:100%;height:100%;}</style>
</head>
<body><div id="container" style="width:100%;height:100%;"></div><script type="text/javascript">var krpanoReady = function(krpano){//函数传入的krpano参数就是krpano Javascript-Interface object//显示krpano打印窗口krpano.call("showlog()")}var config = {target: "container", swf: "krpano.swf", xml: "index.xml", html5: "prefer", onready: krpanoReady}embedpano(config)</script>
</body>
</html>

接口对象的方法
krpano Javascript-Interface object拥有 set(variable,value)、 get(variable)、 call(action)、 spheretoscreen(h,v)、 screentosphere(x,y)这五个方法。那么要通过JS来设置播放器的效果，主要通过set、get、call这三个方法。使用这些方法前，需要先点这里了解一下krpano实现的简单动态脚本语言。

set(variable,value)

定义或者设置krpano动态脚本语言的变量值。使用例子如下：


//定义或设置变量a为1
krpano.set("a", 1)
//设置name为layer_1的layer对应visible属性为false
krpano.set("layer[layer_1].visible", false)
//设置name为layer_1的layer对应html属性为'txt'
krpano.set("layer[layer_1].html", "txt")

get(variable)

获取krpano动态脚本语言的变量值，当变量值未定义时返回null。使用例子如下：

//获取变量值
var a = krpano.get("a")
//获取name为layer_1的layer对应visible属性
var visible = krpano.get("layer[layer_1].visible")

call(action)

执行指定的任意krpano动态语言语句。使用例子如下：

//显示krpano打印窗口
krpano.call("showlog()")

通过JavaScript添加场景
上述样例代码只创建了一个空播放器，那么我们怎么样使用JavaScript来添加场景等相关播放器数据呢？

我们先来看一下，如何添加并设置一个场景的图片资源。JS代码如下：

var krpanoReady = function(krpano){var xml = '<scene name="scene_1"><image><sphere url="sphere.jpg" /></image></scene>'krpano.call("loadxml(" + xml + ");loadscene(scene_1);")
}
var config = {target: "container", swf: "krpano.swf", xml: "index.xml", html5: "prefer", onready: krpanoReady}
embedpano(config)

添加数据主要通过调用krpano动态语言的loadxml方法实现。那么loadscene方式的作用是：根据指定scene的name来加载并渲染指定的场景。详细请参考krpano文档。

loadxml不止可以添加场景，还可以添加任何krpano的XML配置允许的数据来达到展示效果。比如添加plugin、layer、hotspot等。但是loadxml有一定的限制，当执行loadxml时，会将没有声明keep属性为true的数据对象都移除并切换掉当前的场景。时间有限，今天的就先介绍到这里。使用loadxml相关注意的具体应用问题，在后续的文章中进行介绍。

部分参考：www.zhuanfnag.org