【KRpano360全景教程 】 - krpano地圖導航radar插件的使用

1、krpano地圖導航效果：

　　點擊地圖按鈕時，小地圖移入，再次點擊時移出。

　　地圖上顯示錶示場景位置的座標點，和可控制場景觀看方向的雷達區。

2、krpano地圖導航插件：

　　radar.js（plugins）

　　radar.swf（plugins）

3、用到的圖片素材：

　　1.地圖開關按鈕

　　2.場景小地圖

　　3.雷達標點的選中和未選中兩張圖

4、krpano地圖導航製作步驟：

　　1.製作地圖開關按鈕。（皮膚文件）

<layer name="skin_btn_littlemap"      style="skin_base|skin_glow" crop="64|0|64|64"   align="righttop"  x="15"    y="50"  scale="0.5" alpha="1" onclick="openmap()" />

　  2.製作地圖底層容器。（皮膚文件）

<layer name="mapcontainer" keep="true" type="container" bgcolor="0x000000" bgalpha="0" align="righttop" x="-346" y="100" width="346" height="354">

</layer>

    3.在底層容器中插入圖片。（皮膚文件）

 <layer name="map" url="map.png" align="left" x="0" y="0" width="346" height="354" handcursor="false" >

</layer>

   4.在圖片中插入雷達指針。（皮膚文件）

　此處調用 radar.swf 、radar.js 插件，此插件爲官方插件，用來設置雷達的旋轉。

<plugin name="radars" url="%SWFPATH%/plugins/radar.swf" alturl="%SWFPATH%/plugins/radar.js" editmode="true" zorder="1" keep="true" heading="0"  parent="mapbar" align="lefttop" edge="center" x="156" y="166" 
linecolor="0"  fillcolor="0xFF9900" scale="0.5" />
<plugin name="activespot" url="%SWFPATH%/skin/current_pano.png" keep="true" align="lefttop" x="11" y = "11" edge="center" visible="true" zorder="6" />

     5.在圖片中插入熱點。（皮膚文件）

　熱點與場景一一對應，onclick時間的作用爲跳轉到對應場景。

<layer name="spot1" url="%SWFPATH%/skin/hot.png"  align="lefttop" edge="center" x="156" y="166" zorder="2" onclick="loadscene(scene_10);" />
<layer name="spot2" url="%SWFPATH%/skin/hot.png"  align="lefttop" edge="center" x="111" y="216" zorder="2" onclick="loadscene(scene_11);" />

5、彙總：上述代碼總述。

<!--地圖按鈕-->
        <layer name="skin_btn_littlemap"      style="skin_base|skin_glow" crop="64|0|64|64"   align="righttop"  x="15"    y="50"  scale="0.5" alpha="1" onclick="openmap()" />
        <!--插入底層容器-->
        <layer name="mapcontainer" keep="true" type="container" bgcolor="0x000000" bgalpha="0" align="righttop" x="-346" y="100" width="346" height="354">
            <!--插入地圖圖片    -->
            <layer name="map" url="map.png" align="left" x="0" y="0" width="346" height="354" handcursor="false" >
                <!-- 戶型圖雷達指針 -->
                <plugin name="radars" url="%SWFPATH%/plugins/radar.swf" alturl="%SWFPATH%/plugins/radar.js" editmode="true" zorder="1" keep="true" heading="0"  parent="mapbar" align="lefttop" edge="center" x="156" y="166" linecolor="0"  fillcolor="0xFF9900" scale="0.5" />
                <plugin name="activespot" url="%SWFPATH%/skin/current_pano.png" keep="true" align="lefttop" x="11" y = "11" edge="center" visible="true" zorder="6" />
                <!-- 戶型圖雷達指針  -->
                <!--插入熱點-->
                <layer name="spot1" url="%SWFPATH%/skin/hot.png"  align="lefttop" edge="center" x="156" y="166" zorder="2" onclick="loadscene(scene_10);" />
                <layer name="spot2" url="%SWFPATH%/skin/hot.png"  align="lefttop" edge="center" x="111" y="216" zorder="2" onclick="loadscene(scene_11);" />
            </layer>
        </layer>

6.

目錄

1、krpano地圖導航效果：

2、krpano地圖導航插件：

3、用到的圖片素材：

4、krpano地圖導航製作步驟：

5、彙總：上述代碼總述。

6.插入動作方法：（皮膚文件）

---

插入動作方法：（皮膚文件）

　　6.1小地圖的顯示與隱藏

<!--小地圖動作屬性-->
    <action name="closemap">
        <!--設定下一次onclick的動作-->
        set(onclick, openmap() );
        <!-- 改變XY座標，將導航圖容器移出屏幕，移出過程不設置，即爲默認0.5秒-->
        tween(layer[mapcontainer].x,-346,0.5);
    </action>
    <action name="openmap">
        <!--設定下一次onclick的動作-->
        set(onclick, closemap() );
        <!-- 改變XY座標，將導航圖容器移入屏幕，移入過程爲1秒-->
        tween(layer[mapcontainer].x,0,0.5);
    </action>

    6.2地圖雷達切換

<action name="activatespot">
        set(plugin[activespot].parent, plugin[%1]);
        set(plugin[activespot].visible, true);
        copy(plugin[radars].x, plugin[%1].x);
        copy(plugin[radars].y, plugin[%1].y);
        set(plugin[radars].visible, true);
        set(plugin[radars].heading, %2);
</action>

7.地圖雷達切換的動作調用（主xml文件）

　這個動作調用寫在tour.html中場景標籤<scence>標籤中的onstart=" "屬性中。

　activatespot(spot2,180) 中，spot2爲第5步中對應的熱點名稱，180爲初始雷達所對的方向（取值爲0~360）。

<scene name="scene_11" title="11" onstart="activatespot(spot2,180);" thumburl="panos/11.tiles/thumb.jpg" lat="" lng="" heading="">

        <view hlookat="0" vlookat="0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

        <preview url="panos/11.tiles/preview.jpg" />

        <image>
            <cube url="panos/11.tiles/pano_%s.jpg" />

            <cube url="panos/11.tiles/mobile/pano_%s.jpg" devices="mobile" />
        </image>

</scene>