Krpano学习：在javascript中动态添加/删除/修改热点（向后端写入）

作为管理员，在管理全景时会涉及到各个标签的操作，本篇文章介绍在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文件，这个文件里提供的添加热点的方法是先在固定点添加一个热点，并给热点添加一个可拖动的方法，然后再手动拖动热点到想要添加的地方。

JS中的代码

//动态添加热点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-yfunction 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，唯一值，主键    //数据库操作}