KRpano （大）小地图添加热点，同步切换场景

来源：互联网发布：play club捏脸数据编辑：程序博客网时间：2024/05/17 01:10

KRpano 提供了Google 和bing 两种地图选择，分别需要单独去申请对应的KEY，并在 xml skin_settings 内配置。

eg：

<skin_settings     //是否开启地图    maps="true"    //地图类型    maps_type="google"     // bing 地图key,需要申请    maps_bing_api_key="3Tu0ib1asdasds~whYE2KpPasdasdDP6-wQ~AqetasdU-flrBVr-8FayTcyasdasdasdM8yKnTwLZba9j7QYn90dlkazsh_"    //Google地图key,需要申请    maps_google_api_key="AIzaSyCe7Hq9oyoLuHDQeJoMJPA5RNzplk_DXiE"    //缩放按钮是否显示    maps_zoombuttons="false"/>

可以参考此链接
也可直接访问以下链接进行申请：

google key 申请地址（翻墙可访问）：Google maps

bing key 申请地址：Bing maps

以下可以参考下载的 krpano 安装包内路径为：krpano\viewer\examples\googlemaps 下的文件进行编辑。
如果你没有安装包可以到 krpano.com下载

以下是步骤：
大地图：
这里写图片描述
打开你 vtourskin.xml 找到 layer name=skin_map 的标签，并在标签内添加属性： mapsapi.html5=”http://ditu.google.cn” （谷歌地图需要翻墙才能看，此处添加属性调用中国版的API 地址）

标签内的 onmapready=”skin_addmapspots();” 事件是指地图准备就绪后调用 skin_addmapspots 事件，看名字就知道是在地图上添加热点，我们找到这个 action 注： (krpano 内 action 标签就是事件定义)

添加地图热点：
【在这个事件内循环了当前场景的数量，多少场景添加多少热点（实践中当然是用户自己添加热点了），设置了热点的点击事件，设置了热点的经纬度（获取的场景内的经纬度，所以在场景标签 scene 内需要设置经度lat、纬度lng、方位heading属性）】

    <action name="skin_addmapspots">        for(set(i,0), i LT scene.count, inc(i),            if(scene[get(i)].lat,                <!--设置热点name,修改：将spot+场景名字作为热点名称，-->                txtadd(spotname, 'spot', get(scene[get(i)].name));                <!--设置热点点击事件 函数：skin_hidetooltips() 热点点击后缩回工具条。activatespot(',get(spotname),');当前热点选中。skin_loadscene();载入场景-->                txtadd(spotclickevent, 'skin_hidetooltips(); activatespot(',get(spotname),'); skin_loadscene(', get(scene[get(i)].name), ',get(skin_settings.loadscene_blend)); skin_updatescroll(); delayedcall(0.5,skin_showmap(false));');                <!--拷贝场景热点name-->                copy(scene[get(i)].mapspotname, spotname);                <!--添加热点 参数：（热点名称，经度，纬度，方位，false,点击事件，null）-->                addspot(get(spotname), get(scene[get(i)].lat), get(scene[get(i)].lng), get(scene[get(i)].heading), false, get(spotclickevent), null);                <!--鼠标悬停地图热点是否弹出文字提示-->                if(skin_settings.tooltips_mapspots,                    set(layer[skin_map].spot[get(spotname)].tooltip, get(scene[get(i)].title) );                    txtadd(layer[skin_map].spot[get(spotname)].onover, 'set(hovering,true);',  get(style[skin_tooltips].onover) );                    txtadd(layer[skin_map].spot[get(spotname)].onout,  'set(hovering,false);', get(style[skin_tooltips].onout)  );                  );              );          );        if(xml.scene != null,            activatespot( get(scene[get(xml.scene)].mapspotname) );          ,            activatespot(spot0);          );        <!-- zoom and pan the map to see all spots at the same time spotclickevent-->        zoomToSpotsExtent();    </action>

场景内的经纬度属性：

    <scene name="scene_2" title="2" onstart="" havevrimage="true" thumburl="panos/2.tiles/thumb.jpg"  lat="39.796233694" lng="19.70181763" heading="0.0">        <view hlookat="0" vlookat="0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />        <preview url="panos/2.tiles/preview.jpg" />        <image type="CUBE" multires="true" tilesize="512" if="!webvr.isenabled">            <level tiledimagewidth="2112" tiledimageheight="2112">                <cube url="panos/2.tiles/%s/l2/%v/l2_%s_%v_%h.jpg" />            </level>            <level tiledimagewidth="1024" tiledimageheight="1024">                <cube url="panos/2.tiles/%s/l1/%v/l1_%s_%v_%h.jpg" />            </level>        </image>        <image if="webvr.isenabled">            <cube url="panos/2.tiles/vr/pano_%s.jpg" />        </image>    </scene>

到此点开地图应该可以看到地图上会有热点出现，点击某个热点，场景会同步切换

小地图：
这里写图片描述

完成上面的操作后，小地图就很简单了，
只需要给它一个容器、定位、宽、高属性，并添加事件 onloaded=”skin_addmapspots();” 添加热点，就可以了。

属性解释：
【
zoom 缩放深度
key.html5 Google maps api key
key.flash Bing maps api key
】

    <layer name="mapcontainer" type="container" keep="true" bgcolor="0xD81B1B" bgalpha="1" align="leftbottom" x="5" y="5" width="270" height="370">         <plugin name="map" keep="true"                url.html5="%SWFPATH%/plugins/bingmaps.js"                url.flash="%SWFPATH%/plugins/bingmaps.swf"                key.html5="get(skin_settings.maps_google_api_key)"                key.flash="get(skin_settings.maps_bing_api_key)"                maptype="SATELLITE"                lat="39.563340" lng="19.904324" zoom="20"                align="lefttop" x="10" y="10" width="250" height="350"                onloaded="skin_addmapspots();"            >            <radar visible="true" size="300" alpha="0.33" fillcolor="0xFFFFFF" fillalpha="1.0" linecolor="0x00FF00" linealpha="0.5" linewidth="0.5" dragable="true" headingoffset="0" />            <!--skin_addmapspots 函数添加的热点示例：active 当前场景-->            <!-- <spot name="spot1" lat="39.563340" lng="19.904324" heading="0" active="true" /> -->        </plugin>    </layer>

现在我们发现：大地图热点点击场景同步切换，但小地图热点却没改变。
我们只需在场景切换时同步改变热点的位置就可以了。
接下来我们找到 vtourskin.xml 找到
skin_loadscene这个action，如下：

    <action name="skin_loadscene">              if(webvr.isenabled AND scene.count GT 1,            set(hotspot[webvr_prev_scene].visible, false);            set(hotspot[webvr_next_scene].visible, false);          );        txtadd(layer[skin_thumbborder].parent, 'skin_thumb_', get(scene[%1].index));        layer[skin_thumbs].scrolltocenter(get(scene[%1].thumbx), get(scene[%1].thumby));        loadscene(get(scene[%1].name), null, get(skin_settings.loadscene_flags), %2);    </action>

添加热点以下代码：

        <!--切换场景时，地图热点切换，txtadd 为定义变量函数，此处定义了mapSpotName 变量为 spot加上get(scene[%1].name) 的字符串为mapSpotName变量。（因为我在添加热点事件  skin_addmapspots 设置的是spot + 场景名称 作为热点名称，此处获取也应这样获取。）-->        txtadd(mapSpotName, 'spot', get(scene[%1].name));        plugin[map].activatespot(get(mapSpotName));<!--plugin[map]为小地图，activatespot设置当前场景的地图热点-->

到此，大地图热点点击小地图热点会同步改变，小地图点击大地图同步改变，场景也同步改变。

效果图：

这里写图片描述

阅读全文

0 0