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

　　上述代码总述。

 

　　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>

　　

完整例子

<krpano version="1.19" title="720">

<include url="skin/vtourskin.xml" />

<!-- customize skin settings: maps, gyro, webvr, thumbnails, tooltips, layout, design, ... -->
<skin_settings maps="false"
maps_type="google"
maps_bing_api_key=""
maps_google_api_key=""
maps_zoombuttons="false"
gyro="true"
webvr="true"
webvr_gyro_keeplookingdirection="false"
webvr_prev_next_hotspots="true"
littleplanetintro="true"
title="true"
thumbs="true"
thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160"
thumbs_opened="false"
thumbs_text="false"
thumbs_dragging="true"
thumbs_onhoverscrolling="false"
thumbs_scrollbuttons="false"
thumbs_scrollindicator="false"
thumbs_loop="false"
tooltips_buttons="false"
tooltips_thumbs="false"
tooltips_hotspots="false"
tooltips_mapspots="false"
deeplinking="false"
loadscene_flags="MERGE"
loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)"
loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)"
loadscene_blend_next="SLIDEBLEND(0.5, 0, 0.75, linear)"
loadingtext="loading..."
layout_width="100%"
layout_maxwidth="814"
controlbar_width="-24"
controlbar_height="40"
controlbar_offset="20"
controlbar_offset_closed="-40"
controlbar_overlap.no-fractionalscaling="10"
controlbar_overlap.fractionalscaling="0"
design_skin_images="vtourskin.png"
design_bgcolor="0x2D3E50"
design_bgalpha="0.8"
design_bgborder="0"
design_bgroundedge="1"
design_bgshadow="0 4 10 0x000000 0.3"
design_thumbborder_bgborder="3 0xFFFFFF 1.0"
design_thumbborder_padding="2"
design_thumbborder_bgroundedge="0"
design_text_css="color:#FFFFFF; font-family:Arial;"
design_text_shadow="1"
/>

<!--
For an alternative skin design either change the <skin_settings> values 
from above or optionally include one of the predefined designs from below.
-->
<!-- <include url="skin/vtourskin_design_flat_light.xml" /> -->
<!-- <include url="skin/vtourskin_design_glass.xml" /> -->
<!-- <include url="skin/vtourskin_design_ultra_light.xml" /> -->
<!-- <include url="skin/vtourskin_design_117.xml" /> -->
<!-- <include url="skin/vtourskin_design_117round.xml" /> -->
<!-- <include url="skin/vtourskin_design_black.xml" /> -->


<!-- startup action - load the first scene -->
<action name="startup" autorun="onstart">
if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
loadscene(get(startscene), null, MERGE);
if(startactions !== null, startactions() );
</action>



<scene name="scene__01zyjq" title="中央景墙" onstart="activatespot(spot0,180);" thumburl="panos/_01zyjq.tiles/thumb.jpg" lat="" lng="" heading="">

<view hlookat="0" vlookat="0" fovtype="MFOV" fov="110" fovmin="110" fovmax="110" limitview="auto" />

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

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

</scene>

<scene name="scene__02gqgc" title="钢琴广场" onstart="activatespot(spot1,180);" thumburl="panos/_02gqgc.tiles/thumb.jpg" lat="" lng="" heading="">

<view hlookat="0" vlookat="0" fovtype="MFOV" fov="110" fovmin="110" fovmax="110" limitview="auto" />

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

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

</scene>

<scene name="scene__03yglqc" title="夜光篮球场" onstart="activatespot(spot2,180);" thumburl="panos/_03yglqc.tiles/thumb.jpg" lat="" lng="" heading="">

<view hlookat="0" vlookat="0" fovtype="MFOV" fov="110" fovmin="110" fovmax="110" limitview="auto" />

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

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

</scene>

<scene name="scene__04hdgc" title="活动广场" onstart="activatespot(spot3,180);" thumburl="panos/_04hdgc.tiles/thumb.jpg" lat="" lng="" heading="">

<view hlookat="0" vlookat="0" fovtype="MFOV" fov="110" fovmin="110" fovmax="110" limitview="auto" />

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

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

</scene>

<scene name="scene__05ygpd" title="夜光跑道" onstart="activatespot(spot4,180);" thumburl="panos/_05ygpd.tiles/thumb.jpg" lat="" lng="" heading="">

<view hlookat="0" vlookat="0" fovtype="MFOV" fov="110" fovmin="110" fovmax="110" limitview="auto" />

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

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

</scene>

<!--<scene name="scene__06ampd" title="按摩跑道" onstart="activatespot(spot5,180);" thumburl="panos/_06ampd.tiles/thumb.jpg" lat="" lng="" heading="">

<view hlookat="0" vlookat="0" fovtype="MFOV" fov="110" fovmin="110" fovmax="110" limitview="auto" />

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

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

</scene>-->
<!--雷达图-->
<!-- 自定义地图开始， mapcontainer是一个半透明容器container，keep为true，确保了切换场景时地图不会被移除，mapcontainer是其它子layer的父亲，bgcolor以及bgalpha是颜色和透明度的设定，通过改动align以及xy坐标可以确定地图的位置，通过改变width和height确定该矩形的宽度和高度，-->
<layer name="mapcontainer" keep="true" maskchildren ="true" type="container" bgcolor="0x000000" bgalpha="0.5" align="righttop" x="0" y="0" width="264" height="264">
<!-- map的url属性可以改成我们自己的地图文件，align一定是lefttop，这是为了确定热点位置，其坐标系以左上角为0点，也是为了方便我们通过ps等方法来获取热点的值。-->
<layer name="map" url="skin/map.png" align="top" x="4" y="4" width="260" height="256" handcursor="false" scalechildren="true">
<!-- 雷达遮罩部分，确保了雷达的扇形不会超出范围，这里也就是地图map的范围。注意这里也应该是对齐左上角，下面的各种layer通通都是对齐左上角，不然坐标系不统一的话，就很难确定热点的位置 -->
<layer name="radarmask" type="container" align="lefttop" width="100%" height="100%" maskchildren="true">
<!-- 雷达插件 zoder=1 在开始时为隐藏，只有激活activetespot这个action时才会显示 zorder为叠放次序 数字越大越靠前 -->
<!-- <layer name="radar" invert="true" visible="false" url="%SWFPATH%/plugins/radar.swf" alturl="%SWFPATH%/plugins/radar.js" align="lefttop" edge="center" zorder="1" scale="0.3" fillcolor="0xFFFFFF" fillalpha="0.8" linecolor="0xFF0000" linewidth="0.5" linealpha="0.5" headingoffset="0" /> -->
<plugin name="radars" url="./plugins/radar.swf" alturl="./plugins/radar.js" editmode="true" zorder="1" keep="true" heading="0" parent="mapbar" align="lefttop" edge="center" x="100" y="500" linecolor="0" fillcolor="0xFF9900" scale="0.5" />
<!-- 热点 zorder=2，用style来统一处理 所有layer都载入了一个名为spot的style，注意这里spot是由0开始，而不是由1开始的，因此在一般情况下，地图点与场景一一对应，而场景的index是从0开始的，所以我们可以利用这一点提高代码的可读性-->
<layer name="spot0" style="spot" x="50" y="150" />
<layer name="spot1" style="spot" x="100" y="250" />
<layer name="spot2" style="spot" x="300" y="250" />
<layer name="spot3" style="spot" x="250" y="150" />
<layer name="spot4" style="spot" x="200" y="250" />
<!-- <layer name="spot5" style="spot" x="150" y="150" />-->
<!-- 激活的热点 zorder=3 开始时候隐藏，在这里是一个绿色的地图点， 表示当前的场景-->
<layer name="activespot" url="skin/vtourskin_mapspotactive.png" scale="0.5" oy="-17" align="lefttop" edge="center" zorder="3" visible="false"/></layer>
</layer>
</layer>
<!-- 地图点中相同的代码，都写在了style里面，修改的时候只需要修改style里面的代码，提高了效率。在onclick里，先是用subtxt得出spot后面的数字，也就是index，然后检查是否点击的热点就是当前场景，因为没有必要点击当前场景的热点又载入一遍，如果是点击其他的热点，则载入其他场景，载入场景的loadscene中利用了之前得到的spotid，这样就不用每次都写场景的名字了。-->
<style name="spot" url="skin/vtourskin_mapspot.png" scale="0.5" oy="-17" align="lefttop" edge="center" zorder="2" onclick="subtxt(spotid,get(name),4,2);if(spotid != scene[get(xml.scene)].index, loadscene(get(scene[get(spotid)].name),null,MERGE,BLEND(1)); );" />
<!-- 激活热点 - %1 = 当前雷达的方向值heading -->
<action name="activatespot">
<!-- set（plugin [radar].x，203）;
set（plugin [radar].y，555）; -->
<!-- 因此绿色地图点会在每次激活时替换蓝色普通地图点，因此每次激活之前，首先保证所有蓝色地图点是可见的，如果没有下面这个代码，则会使得上一个场景的蓝色地图点消失，这里用的是一个循环语句--> for(set(i,0),i LT scene.count,inc(i), txtadd(spotname,'spot',get(i)); set(layer[get(spotname)].visible, true); ); 
<!-- 将当前热点的坐标复制到雷达和激活点的坐标，直接利用当前场景的index，反过来得到layer的名字，这样就使得这个activetespot的参数只要一个就可以了--> txtadd(spotidnow,'spot',get(scene[get(xml.scene)].index)); copy(layer[radar].x, layer[get(spotidnow)].x); copy(layer[radar].y, layer[get(spotidnow)].y); copy(layer[activespot].x, layer[get(spotidnow)].x); copy(layer[activespot].y, layer[get(spotidnow)].y); 
<!-- 将第二个参数赋值到雷达的heading --> set(layer[radar].heading, %1); 
<!-- 显示雷达和绿色激活热点，以及隐藏当前场景的地图点 --> set(layer[radar].visible, true); set(layer[activespot].visible, true); set(layer[get(spotidnow)].visible, false); 
<!--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>

 

</krpano>