码迷,mamicode.com
首页 > 其他好文 > 详细

krpano之小地图

时间:2017-08-17 12:52:12      阅读:727      评论:0      收藏:0      [点我收藏+]

标签:ada   时移   devices   官方   技术   click   plugin   vma   one   

效果:

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

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

插件:

  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>
View Code

  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.地图雷达切换的动作调用

    这个动作调用写在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>

 

krpano之小地图

标签:ada   时移   devices   官方   技术   click   plugin   vma   one   

原文地址:http://www.cnblogs.com/s313139232/p/7380502.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!