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-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，唯一值，主键
    //数据库操作
}