krpano實現多語言切換

最近做項目遇到的需求，在全景圖裏實現中英文切換。然後自己就想了這麼一套方案

1. 首先創建我們的語言包

這裏在根目錄下創建

中文語言包 lange_cn.xml

<krpano>
	<set_lange
		scene1_name="企業文化大廳"
		scene2_name="樣品展廳1"
		scene3_name="樣品展廳2"
		hotspot1_name="新款"
		hotspot2_name="官網鏈接"
		hotspot3_name="塑料水壺系列"
		hotspot4_name="玻璃水壺系列"
		hotspot5_name="不鏽鋼系列"
	/>
	<include url="tour.xml" />
</krpano>

中文語言包 lange_en.xml

<krpano>
	<set_lange
		scene1_name="Honor room"
		scene2_name="Show Room 1"
		scene3_name="Show Room 2"
		hotspot1_name="NEW MODEL"
		hotspot2_name="Official Webiste"
		hotspot3_name="Plastic kettle series"
		hotspot4_name="Glass kettle series "
		hotspot5_name="Stainless steel kettle series"
	/>
	<include url="tour.xml" />
</krpano>

這裏我們設置了set_lange元素來承載我們的語言屬性。

2. 在tour.xml調用我們的語言屬性

<scene 
	title="get:set_lange.scene1_name" 
>

get:set_lange.scene1_name就是我們調用語言屬性的代碼，其他地方一樣。關於krpano的語法可以到
http://www.krpano360.com/
和
https://www.jqhtml.com/46046.html
學習相關的知識。

3. 在html裏設置入口文件

正常情況下我們的tour.html裏是這樣的

embedpano({
	swf: "tour.swf",
	xml: 'tour.xml',
	target: "pano",
	html5: "auto",
	mobilescale: 1.0,
	passQueryParameters: true
});

這裏就是渲染我們場景的js代碼。這裏我們需要改動一下，將xml: 'tour.xml'設置動態值（引入我們的語言包文件lange_cn.xml 和lange_en.xml）

比如我們用本地存儲(localStorage)來記錄我們當前的語言。

var tour_xml = 'lange_en.xml';
if(localStorage.getItem('lange') == 0){
    tour_xml = 'lange_cn.xml'
}
embedpano({
	swf: "tour.swf",
	xml: tour_xml,
	target: "pano",
	html5: "auto",
	mobilescale: 1.0,
	passQueryParameters: true
});

到這裏就基本完成了，至於怎樣切換中英文這個就不用多說了，無非就是一個點擊事件。