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

    这个动作调用写在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>
时间: 2024-11-03 21:52:12

krpano之小地图的相关文章

KRPANO资源分析工具下载720YUN全景图

1.首先,在KRPano资源分析工具中,打开某个720全景网址: 例如如下的网址: http://720yun.com/t/124jO5hmuu6 2.在任意位置右键,选择720全景图批量下载 3.会弹出保存对话框,选择一个空的文件夹进行保存 4.确认后,会弹出下载窗口,待下载拼接完成后,会自动关闭下载窗口 5.打开刚才的文件夹,即可找到还原后的2:1全景图 本博文发表于:http://www.krpano.tech/archives/553 发布者:屠龙 转载请注明出处,谢谢!

KRPANO资源分析工具下载四方环视全景图

1.首先,在KRPano资源分析工具中,打开某个四方环视全景网址: 例如如下的网址: https://www.ivrpano.com/ws/openPano/9B7CC739D1ABFDCE 2.在任意位置右键,选择ivrpano全景图批量下载 3.会弹出保存对话框,选择一个空的文件夹进行保存 4.确认后,会弹出下载窗口,待下载拼接完成后,会自动关闭下载窗口 5.打开刚才的文件夹,即可找到还原后的2:1全景图 本博文发表于:http://www.krpano.tech/archives/558

KRPANO PR10最新激活码(破解)分享

KRPano pr10最新版本激活码下载地址: http://pan.baidu.com/s/1qYv2vO4 适用于最新pr10以及之前版本,解压密码为KRPano技术解密群群号:551278936 KRPano pr10最新汉化版软件下载: http://www.krpano.tech/archives/514 本博文发表于:http://www.krpano.tech/archives/531 发布者:屠龙 转载请注明出处,谢谢!

Unity uGui RawImage 渲染小地图

制作类似 RPG 游戏时,可能会须要显示小地图. 小地图的制作一种方式是用还有一个摄像机来渲染到一张纹理上.实时显示到UI界面. 以Unity 5.0 的 UI 系统为例: 在地图正上方放置一个摄像机,设置其 Culling Mask,比方:Ground(地面).MinimapSign(玩家怪物标识),创建一张 Render Texture,将 Target Texture 属性指向这张纹理图片.例如以下图所看到的: 创建 UI 面板.由于这里小地图打算制作成圆形,使用 Mask 组件和一张掩码

【转】超简单利用UGUI制作圆形小地图

http://sanwen.net/a/ithhtbo.html 由于UI都是Achor自己用PS做的,比较粗糙,大家见谅,不过丝毫不影响功能的实现,下面我们看看今天的笔记: 首先我们看看需要哪些组件: 1.在Canvas画布下新建一个GameObject,改名为Mask,顾名思义,该组件实现遮罩功能. 2.在Mask下面添加RawImage,用来实现小地图动态显示. 3.新建一个Sprite作为角色的子对象,改名为Icon,实现小地图中代替角色的箭头图标.(贴图大家根据自己喜好来画,这里Ach

KRPano多屏互动原理

KRPano可以实现多个屏幕之间的同步显示,主要应用到Websocket技术进行通信. 在控制端,我们需要发送当前KRPano场景的实时的视角和场景信息,可以使用如下的代码: embedpano({ swf: "tour.swf", xml: "tour.xml", target: "pano", html5: "auto", mobilescale: 1.0, passQueryParameters: true, onrea

KRPANO开发拍摄拼图视频常用软件分享

KRPano开发拍摄拼图视频常用软件分享,包含了KRPano开发,拼图,视频等软件. 包括如下软件: 全景照片拼接,全景照片查看,全景视频拼接,全景视频查看,全景视频插件,全景漫游制作,KRPano资源分析工具,KRPano测试开发专用浏览器,KRPano 打包EXE工具,KRPano打包APK工具,KRPano最新中文汉化版本. 感谢KRPano技术解密群(551278936)小伙伴杭州力杰的分享. 下载地址:https://pan.baidu.com/s/1c2tiqkS 部分文件截图: 本

【krpano】加密XML手动解密分析

krpano允许对XML文件进行加密,对XML进行相应的保护.加密分为两种,第一种为公共加密,即允许其他krpano全景读取该XML,而另一种为私有加密,仅允许加密的用户读取XML.两种加密方式的算法是一致的,只是公有加密使用了一个公共的解密密钥,而私有加密则是根据某个用户自己的密钥进行加密的. 不过,由于krpano可以运行于浏览器中,XML会在解析的过程中在内存中出现,所以可以利用浏览器调试技术提取出解密好的XML. 一个典型的加过密的XML文件如下 1 <encrypted>KENCRU

Unity 制作RPG小地图

效果图: 最近公司要制作小地图,搜索网上的文章没找到有什么小实例,=.=直接上步骤: 制作小地图步骤: 1. 人物头顶有一个面板呈现人物图标 2. 有一个摄像机在主角头顶!(Target Texture属性)把摄像机照到的物体渲染成一个2D贴图 3. 把贴图绑定到NGUI控件上显示 源码: http://yunpan.cn/cyPtUgn87kFpB  提取码 d51e