krpano之小地图

krpano之小地图

效果：

　　点击地图按钮时，小地图移入，再次点击时移出。

　　地图上显示表示场景位置的坐标点，和可控制场景观看方向的雷达区。

插件：

　　radar.js（plugins）

　　radar.swf（plugins）

图片：

　　1.地图开关按钮

　　2.场景小地图

　　3.雷达标点的选中和未选中两张图

步骤：

　　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);" />

　　上述代码总述。

<!--地图按钮-->
        <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.插入动作方法：（皮肤文件）

　　　　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>