KRpano (大)小地图添加热点,同步切换场景

xiaoxiao2021-02-28  29

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设置当前场景的地图热点-->

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

效果图:


转载请注明原文地址: https://www.6miu.com/read-200055.html

最新回复(0)