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

Myth丶恋晨 2022-06-06 11:10 319阅读 0赞

作为管理员，在管理全景时会涉及到各个标签的操作，本篇文章介绍在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)][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中的代码

<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)）,获得的结果是一个对象。

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

[screentosphere_x_y_h_v_spheretoscreen_h_v_x_y_stereoside]: https://krpano.com/docu/actions/#screentosphere