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);
    //將數據添加到數據庫
    //成功後圖上刪除該點
}

 

		<!--  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(););");
    //......返回修改的內容
    //......修改成功後圖上刪掉該點
}

 

4.刪除熱點

//刪除點
function DeleteHotspot() {
    var spotname = $("#inputHotspot").val();
    //圖上操作
    krpano.call("removehotspot(" + spotname + ");");//此處變量爲熱點name，唯一值，主鍵
    //數據庫操作
}

轉載自：https://blog.csdn.net/u013719339/article/details/78468908?fps=1&locationnum=9