KRpano （大）小地圖新增熱點，同步切換場景
阿新 • • 發佈：2018-12-31
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,需要申請 可以參考此連結
也可直接訪問以下連結進行申請：
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設定當前場景的地圖熱點-->到此，大地圖熱點點選小地圖熱點會同步改變，小地圖點選大地圖同步改變，場景也同步改變。
效果圖：
