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>
