Krpano 全景图简单制作

2,826 阅读11分钟

Krpano 全景图简单制作

废话不多说,先来看看官网的demo效果怎么样吧

官网demo

全景图制作要求

  • 图片要求 宽是高的2倍图
  • 航拍图 地埋图
  • 下载 krpano Tools
  • 软件破解码

主思路

  • 添加热点
  • 主界面的场景跳转
  • 主界面与子界面间的跳转

VTour Editor 操作:

load tour.xml			# 加载文件 tour.xml
Set as startup view		# 设置为启动试图
Add hotspot			# 添加热点
Edit hotspot  			# 编辑热点
Edit tour.xml			# 编辑 tour.xml
Save tour.xml			# 保存 tour.xml
Open tour folder		# 打开访问文件夹
fullscreen			# 全屏幕
Change Controlmode		# 改变控制方式
Normal View			# 标准视图
Fisheye View			# 鱼眼视图
Stereographic View		# 立体视图
Architectural View		# 架构视图
Pannini View			# 局部视图
Little Planet View		# 小星球视图

vtour 文件夹简介:

vtour/
-- panos/			# 存放全景切片图片的文件夹
-- skin/			# 存放皮肤相关文件
-- plugins/			# 用来存放插件
-- tour.swf			# krpano flash viewer
-- tour.js           		# krpano HTML5 viewer
-- tour.xml             	# 生成全景的相关配置
-- tour.html            	# 用来浏览全景的页面,需要本地服务环境
-- tour_editor.html     	# 添加热点(hotspot)与初始化视角的设置

vtour 运作机制

<div id="pano"></div>
<script src="tour.js"></script>
<script>
    embedpano({
        swf: "tour.swf", // 有则表示加载 flash 引擎,如果设置 html5:only 则不需要该值
        xml: "tour.xml", // 启动时的配置文件
        target: "pano", // 要渲染到的目标容器 ID
        html5: "only", // 如果有需要用到 flash ,可设置为 auto
        //id: "krpanoSWFObject", // 默认的 krpano 对象,每一个 viewer 对应唯一 id ,与 JS 交互时要用到
        mobilescale: 1.0, //移动设备缩放,1 表示不缩放,默认 0.5
        passQueryParameters: false //是否接受 URL 传参,例如:tour.html?html5=only&startscene=scene2
    });
</script>

Krpano skin_settings 解释

<skin_settings 	   
        maps="false" 是否显示地图按钮maps_type="google" 地图类型maps_bing_api_key="" bing地图授权keymaps_google_api_key="" 谷歌地图授权keymaps_zoombuttons="false" 地图是否显示缩放按钮gyro="true"  是否默认打开重力陀螺仪webvr="true" 是否显示vr按钮webvr_gyro_keeplookingdirection="false" 是否陀螺仪状态下默认跟随场景域默认视角webvr_prev_next_hotspots="true" 是否vr状态下显示上下场景按钮littleplanetintro="false" 是否默认启动小行星效果title="true"  是否皮肤显示标题thumbs="true"  是否显示缩略图皮肤thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160"  缩略图宽高和截取大小thumbs_opened="false"  是否默认展开缩略图thumbs_text="false"   是否显示缩略图文字thumbs_dragging="true"  是否缩略图支持滚动条拖动thumbs_onhoverscrolling="false"  是否缩略图支持鼠标移到上方时滚动thumbs_scrollbuttons="false"   是否显示滚动条控制按钮thumbs_scrollindicator="false"  是否显示滚动条底部控制条thumbs_loop="false"   是否缩略图循环滚动tooltips_buttons="false"  是否显示按钮上的提示信息鼠标在上方时);
        tooltips_thumbs="false"   是否显示缩略图提示信息鼠标在上方时);
        tooltips_hotspots="false" 是否显示热点提示信息鼠标在上方时);
        tooltips_mapspots="false" 是否显示地图热点提示信息鼠标在上方时);
        deeplinking="false"   是否显示深层链接loadscene_flags="MERGE"  设置场景切换标记loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)" 场景默认切换过渡效果loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)" 进入前一场景过渡效果loadscene_blend_next="SLIDEBLEND(0.5,   0, 0.75, linear)" 进入下一场景过渡效果loadingtext="loading..."  设置读取中状态的提示文字信息layout_width="100%"    系统皮肤默认宽度layout_maxwidth="814"  系统皮肤最大宽度controlbar_width="-24"  控制工具条宽度controlbar_height="40"  控制工具条高度controlbar_offset="20"  控制工具条偏移量controlbar_offset_closed="-40"  控制工具条关闭时偏移量controlbar_overlap.no-fractionalscaling="10"  控制工具条重叠非比例缩放值controlbar_overlap.fractionalscaling="0"  控制工具条重叠比例缩放值design_skin_images="vtourskin.png" design_skin皮肤默认皮肤图片文件design_bgcolor="0x2D3E50" design_skin皮肤背景颜色design_bgalpha="0.8" design_skin皮肤背景透明度design_bgborder="0" design_skin皮肤边框宽度design_bgroundedge="1" design_skin皮肤圆角值design_bgshadow="0 4 10 0x000000 0.3"     design_skin皮肤背景阴影参数design_thumbborder_bgborder="3 0xFFFFFF 1.0" design_skin皮肤缩略图边框样式design_thumbborder_padding="2" design_skin皮肤缩略图内边距值design_thumbborder_bgroundedge="0" design_skin皮肤缩略图圆角值design_text_css="color:#FFFFFF; font-family:Arial;" design_skin皮肤文字样式design_text_shadow="1" design_skin皮肤文字阴影偏移值; 
	/>

krpano XML 结构与简介

<krpano>
    <include>
    <preview>
    <image>
    <view>
    <area>
    <display>
    <control>
    <cursors>
    <autorotate>
    <plugin>
    <layer>
    <hotspot>
    <style>
    <events>
    <action>
    <contextmenu>
    <network>
    <memory>
    <security>
    <textstyle>
    <lensflareset>
    <lensflare>
    <data>
    <scene>
</krpano>

krpano XML结构目录(Krpano 内置元素说明)

#1.  krpano
krpano 元素是 krpano xml 文件的根元素,任何一个krpano xml文件的其他元素都要被krpanoui元素所嵌套

#2.  include
include 元素用来引入其他 xml 文件的内容。例如我们常要用到的vtourskin.xml 就是使用 include 嵌入到主 xml 中。

#3.   preview
预览图设置,也就是全景图完全载入之前的模糊图像。因为体积较小,因此载入速度较快,会在全景图之前先载入,避免黑屏。

#4.image
image 元素用来设置全景图,包括全景图类型,渐进分辨率切片显示等。

#5.view
view 元素控制全景的视野,例如起始视角、视角限制与缩放等等。当要设置限制视角或设定特定的初始视角时,需要自行设定或使用插件获取代码。

#6.area
area 元素控制全景图在浏览器窗口中显示区域大小。

#7.display
控制全景图的显示品质。

#8.control
设置鼠标、键盘以及触摸设备对全景浏览的控制方式。

#9.cursors
设置鼠标光标样式。

#10.autorotate
控制自动旋转。

#11.plugin
用来调用插件、插入图片或生成容器。

#12.layer
与 plugin 作用相同,只是名称不同。

#13.hotspot
热点,可在 3D 空间中插入图片,使之随着 3D 空间一同运动,可制作很多特效。

#14.style
可以保存其它元素的属性子集。

#15.events
可调用各类型事件,例如全景载入的不同阶段以及鼠标触发的不同行为等。

#16.action
自定义动态代码。

#17.contextmenu
定义右键菜单的内容。

#18.network
控制图像的下载、缓存与解码。

#19.menory
控制全景图在设备中的存储。

#20.security
Flashplayer 和 HTML5 相关的安全/跨域设置。

#21.lensflareset
镜头眩光的设置(目前只能在 flash 下使用)。

#22.lensflare
生成镜头眩光(目前只能在 flash 下使用)。

#23.data
可放置任意的数据。

#24.scene
可放置任意 krpano 元素。每个 scene 元素只有在被 loadscene 时才会被载入到浏览器进行解析。

常用设置

  • 小行星开场
# 开启小行星,先找到 tour.xml ,然后搜索 littleplanetintro 将其值设置为 true 即可。
<skin_settings
    ...
    littleplanetintro="true"
    ...
/>
  • 加载动画
# 在官方的案例文件夹中找到loading-progress这个文件夹,将需要的文件内容复制到项目中的 skin 文件夹,然后在 tour.xml 文件中引入该文件即可,这样重新打开就可以看到有动态的进度条了。
<include url="skin/loadingbar.xml" />
  • 修改右键菜单
# 找到引入的皮肤文件,默认在 vtourskin.xml ,然后修改下面这些地方即可自定义右键菜单,但像版权、全屏菜单即使删除也会存在。
<contextmenu>
    <item name="fv" caption="鱼眼视图" onclick="skin_view_fisheye();" showif="view.vlookatrange == 180" devices="flash|webgl" separator="true" />
</contextmenu>
caption    	# 右键菜单显示的文字;
onclick 	# 控制点击后执行的动作,动作由action 定义;
showif  	# 显示条目的条件;
devices		# 控制在flash/webgl 哪个模式中出现;
separator	# 显示分隔符来分隔菜单;

tour.html

<!DOCTYPE html>
<html>

<head>
  <title>重启礼嘉智慧公园</title>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta http-equiv="x-ua-compatible" content="IE=edge" />
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <style>
    @-ms-viewport {
      width: device-width;
    }

    @media only screen and (min-device-width: 800px) {
      html {
        overflow: hidden;
      }
    }

    html {
      height: 100%;
    }

    body {
      height: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 16px;
      color: #ffffff;
      background-color: #000000;
    }

    #backDiv {
      position: absolute;
      top: 2%;
      left: 1%;
      z-index: 100;
      display: none;
    }

    .backC {
      width: 30%;
      /* box-shadow: 0px 0px 10px 2px white; */
      border-radius: 2rem;
      /* border: 1px solid white; */
    }
  </style>
</head>

<body id="hehe">
  <script src="tour.js"></script>
  <div id="backDiv" onclick="backFun()">
    <img class="backC" src="./static/img/close_3.png" alt="" />
  </div>
  <div id="pano" style="width:100%;height:100%;">
    <noscript>
      <table style="width:100%;height:100%;">
        <tr style="vertical-align:middle;">
          <td>
            <div style="text-align:center;">
              ERROR:<br /><br />Javascript not activated<br /><br />
            </div>
          </td>
        </tr>
      </table>
    </noscript>
    <script>
      var krpano = null;
      var backname = "";
      var backxml = "tour.xml";
      // 主页面
      var embexml = "";
      var embeswf = "";
      if (window.location.search.indexOf("krpanoXml") != -1) {
        let urlname = window.location.search;
        urlname = urlname.substring(
          urlname.lastIndexOf("=") + 1,
          urlname.length
        );
        console.log("全景xml:" + urlname);
        embexml = urlname + ".xml";
        embeswf = urlname + ".swf";
      } else {
        embexml = "tour.xml";
        embeswf = "tour.swf";
      }
      embedpano({
        swf: embeswf,
        xml: embexml,
        target: "pano",
        html5: "auto",
        mobilescale: 1.0,
        passQueryParameters: true,
        onready: krpano_onready_callback
      });
      function krpano_onready_callback(krpano_interface) {
        krpano = krpano_interface;
      }
      window.onload = function () {
        console.log("加载完成");
      };
      function initAddNum() {
        // 监听iframe点击事件
        window.parent.postMessage({  //参数是对象
          params: 3,
        }, '*');
      };

      function loadpano(xmlname, sceneName, parentName) {
        if (krpano) {
          // 监听iframe点击事件
          window.parent.postMessage({  //参数是对象
            params: 2,
          }, '*');
          backname = parentName;
          console.log(parentName);
          if (xmlname != "back") {
            // 动态切换xml,xmlname为tour.xml传过来的值 IGNOREKEEP
            krpano.call(
              "loadpano(" + xmlname + ", null, IGNOREKEEP, BLEND(1));"
            );
            //sceneName为切换后加载的第一个场景
            if (
              sceneName != "" &&
              sceneName != null &&
              sceneName != undefined
            ) {
              krpano.call("loadscene('" + sceneName + "')");
            }
            document.getElementById("backDiv").style.display = "block";
          } else {
            // 当值为back时,存储最新load场景,考虑到在xml中实现点击事件
            console.log("即将要返回:" + backname);
            backname = "";
            document.getElementById("backDiv").style.display = "none";
          }
        }
      }
      function backFun() {
        console.log("即将要返回:" + backname);
        // 动态切换xml,xmlname为tour.xml传过来的值 IGNOREKEEP
        krpano.call("loadpano(" + backxml + ", null, IGNOREKEEP, BLEND(1));");
        krpano.call("loadscene('" + backname + "')");
        backname = "";
        document.getElementById("backDiv").style.display = "none";
      }

      // 监听iframe点击事件
      document.body.addEventListener("touchstart", function () {
        window.parent.postMessage({  //参数是对象
          params: 1,
        }, '*');
      })

    </script>
  </div>
</body>

</html>

tour.xml

<krpano version="1.19" title="Virtual Tour">

	<include url="skin/vtourskin.xml" />

	<!-- customize skin settings: maps, gyro, webvr, thumbnails, tooltips, layout, design, ... -->
	<skin_settings maps="true"
	               maps_type="google"
	               maps_bing_api_key=""
	               maps_google_api_key=""
	               maps_zoombuttons="false"
	               gyro="true"
	               webvr="true"
	               webvr_gyro_keeplookingdirection="false"
	               webvr_prev_next_hotspots="true"
	               littleplanetintro="true"
	               title="true"
	               thumbs="true"
	               thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160"
	               thumbs_opened="false"
	               thumbs_text="false"
	               thumbs_dragging="true"
	               thumbs_onhoverscrolling="false"
	               thumbs_scrollbuttons="false"
	               thumbs_scrollindicator="false"
	               thumbs_loop="false"
	               tooltips_buttons="false"
	               tooltips_thumbs="false"
	               tooltips_hotspots="false"
	               tooltips_mapspots="false"
	               deeplinking="false"
	               loadscene_flags="MERGE"
	               loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)"
	               loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)"
	               loadscene_blend_next="SLIDEBLEND(0.5,   0, 0.75, linear)"
	               loadingtext="loading..."
	               layout_width="100%"
	               layout_maxwidth="814"
	               controlbar_width="-24"
	               controlbar_height="40"
	               controlbar_offset="20"
	               controlbar_offset_closed="-40"
	               controlbar_overlap.no-fractionalscaling="10"
	               controlbar_overlap.fractionalscaling="0"
	               design_skin_images="vtourskin.png"
	               design_bgcolor="0x2D3E50"
	               design_bgalpha="0.8"
	               design_bgborder="0"
	               design_bgroundedge="1"
	               design_bgshadow="0 4 10 0x000000 0.3"
	               design_thumbborder_bgborder="3 0xFFFFFF 1.0"
	               design_thumbborder_padding="2"
	               design_thumbborder_bgroundedge="0"
	               design_text_css="color:#FFFFFF; font-family:Arial;"
	               design_text_shadow="1"
	               />

	<!--
	    For an alternative skin design either change the <skin_settings> values 
	    from above or optionally include one of the predefined designs from below.
	-->
	<!-- <include url="skin/vtourskin_design_flat_light.xml"  /> -->
	<!-- <include url="skin/vtourskin_design_glass.xml"       /> -->
	<!-- <include url="skin/vtourskin_design_ultra_light.xml" /> -->
	<!-- <include url="skin/vtourskin_design_117.xml"         /> -->
	<!-- <include url="skin/vtourskin_design_117round.xml"    /> -->
	<!-- <include url="skin/vtourskin_design_black.xml"       /> -->


	<!-- startup action - load the first scene -->
	<action name="startup" autorun="onstart">
		if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
		loadscene(get(startscene), null, MERGE);
		if(startactions !== null, startactions() );
	</action>
	<action name="do_crop_animation" scope="local" args="framewidth, frameheight, framerate">
		<!-- 定义局部变量 -->
		calc(local.xframes, (caller.imagewidth /framewidth) BOR 0);
		calc(local.frames, xframes * ((caller.imageheight / frameheight) BOR 0));
		def(local.frame, integer, 0);
		
		<!-- 设置第一帧 -->
		calc(caller.crop, '0|0|' + framewidth + '|' + frameheight);
		
		<!-- 动画部分 -->
		setinterval(calc('crop_anim_' + caller.name), calc(1.0 / framerate),
			if(caller.loaded,
				inc(frame);
				if(frame GE frames, if(caller.onlastframe !== null, callwith(caller, onlastframe() ) ); set(frame,0); );
				mod(xpos, frame, xframes);
				div(ypos, frame, xframes);
				Math.floor(ypos);
				mul(xpos, framewidth);
				mul(ypos, frameheight);
				calc(caller.crop, xpos + '|' + ypos + '|' + framewidth + '|' + frameheight);
			,
				<!-- 当热点移除时停止动画 -->
				clearinterval(calc('crop_anim_' + caller.name));
			);
		);
	</action>
	<!-- 使文字一直显示 -->
	<action name="add_all_the_time_tooltip">
				txtadd(tooltipname, 'tooltip_', get(name));
				addplugin(get(tooltipname));
				txtadd(plugin[get(tooltipname)].parent, 'hotspot[', get(name), ']');
				set(plugin[get(tooltipname)].url,'%SWFPATH%/plugins/textfield.swf');
				set(plugin[get(tooltipname)].align,top);
				set(plugin[get(tooltipname)].edge,bottom);
				set(plugin[get(tooltipname)].x,0);
				set(plugin[get(tooltipname)].y,0);
				set(plugin[get(tooltipname)].autowidth,true);
				set(plugin[get(tooltipname)].autoheight,true);
				set(plugin[get(tooltipname)].vcenter,true);
				set(plugin[get(tooltipname)].background,true);
				set(plugin[get(tooltipname)].backgroundcolor,0x000000);
				set(plugin[get(tooltipname)].roundedge,5);
				set(plugin[get(tooltipname)].backgroundalpha,0.65);
				set(plugin[get(tooltipname)].padding,5);
				set(plugin[get(tooltipname)].border,false);
				set(plugin[get(tooltipname)].glow,0);
				set(plugin[get(tooltipname)].glowcolor,0xFFFFFF);
				set(plugin[get(tooltipname)].css,'text-align:center; color:#FFFFFF; font-family:MicrosoftYahei;  font-size:24px;');
				if(device.mobile,set(plugin[get(tooltipname)].css,'text-align:center; color:#FFFFFF; font-family:MicrosoftYahei; font-weight:bold; font-size:24px;');
					);
				set(plugin[get(tooltipname)].textshadow,0);
				set(plugin[get(tooltipname)].textshadowrange,6.0);
				set(plugin[get(tooltipname)].textshadowangle,90);
				if(text == '' OR text === null,
				copy(plugin[get(tooltipname)].html,scene[get(linkedscene)].title),
				copy(plugin[get(tooltipname)].html,text)
				);    
				set(plugin[get(tooltipname)].enabled,false);	
	</action>


	
	<scene name="scene_5Gguan" title="5Gguan" onstart="" havevrimage="true" thumburl="panos/5Gguan.tiles/thumb.jpg" lat="29.68432289" lng="106.48701158" heading="0.0">

		<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

		<preview url="panos/5Gguan.tiles/preview.jpg" />

		<image type="CUBE" prealign="0|0.0|0" multires="true" tilesize="512" if="!webvr.isenabled">
			<level tiledimagewidth="6656" tiledimageheight="6656">
				<cube url="panos/5Gguan.tiles/%s/l4/%0v/l4_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="3328" tiledimageheight="3328">
				<cube url="panos/5Gguan.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="1664" tiledimageheight="1664">
				<cube url="panos/5Gguan.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="768" tiledimageheight="768">
				<cube url="panos/5Gguan.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg" />
			</level>
		</image>

		<image prealign="0|0.0|0" if="webvr.isenabled">
			<cube url="panos/5Gguan.tiles/vr/pano_%s.jpg" />
		</image>
		<!-- js(loadpano('5Gguan_A1.xml','scene_5Gguan_A1','scene_5Gguan');) -->
		<!-- 点击js里的loadpano方法,传入导入的新的场景xml, 和打开后先显示那张全景图,父元素 点击的哪个全景图标点 -->
		<!-- onloaded 添加文字 -->
		<hotspot name="spot1" onloaded="onloaded=do_crop_animation(64,64, 60);add_all_the_time_tooltip()" text="艺趣馆" style="skin_hotspotstyle" ath="-7.904" atv="5.570" linkedscene="scene_alijishi" />
		<hotspot name="spot2" onloaded="onloaded=do_crop_animation(64,64, 60);add_all_the_time_tooltip()" text="5G(B馆)" onclick="js(loadpano('5Gguan_B1.xml','scene_5Gguan_B1','scene_5Gguan')););" style="skin_hotspotstyle" ath="-13.711" atv="19.631" linkedscene="scene_5gguan" />
		<hotspot name="spot3" onloaded="onloaded=do_crop_animation(64,64, 60);add_all_the_time_tooltip()" text="5G导览馆" style="skin_hotspotstyle" ath="-28.976" atv="29.409" linkedscene="scene_5gguan" />
		<hotspot name="spot4" onloaded="onloaded=do_crop_animation(64,64, 60);add_all_the_time_tooltip()" text="5G(A)馆" onclick="js(loadpano('5Gguan_A1.xml','scene_5Gguan_A1','scene_5Gguan'););" style="skin_hotspotstyle" ath="-41.195" atv="26.151" linkedscene="scene_5gguan" />
		<hotspot name="spot5" onloaded="onloaded=do_crop_animation(64,64, 60);add_all_the_time_tooltip()" text="智慧凉道" style="skin_hotspotstyle" ath="81.056" atv="21.022" linkedscene="scene_5gguan" />
		<hotspot name="spot6" onloaded="onloaded=do_crop_animation(64,64, 60);add_all_the_time_tooltip()" text="南区入口" style="skin_hotspotstyle" ath="111.991" atv="3.309" linkedscene="scene_nanqurukou" />

	</scene>

	<scene name="scene_alijishi" title="alijishi" onstart="" havevrimage="true" thumburl="panos/alijishi.tiles/thumb.jpg" lat="29.68975925" lng="106.47939483" heading="0.0">

		<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

		<preview url="panos/alijishi.tiles/preview.jpg" />

		<image type="CUBE" prealign="0|0.0|0" multires="true" tilesize="512" if="!webvr.isenabled">
			<level tiledimagewidth="6400" tiledimageheight="6400">
				<cube url="panos/alijishi.tiles/%s/l4/%0v/l4_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="3200" tiledimageheight="3200">
				<cube url="panos/alijishi.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="1664" tiledimageheight="1664">
				<cube url="panos/alijishi.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="768" tiledimageheight="768">
				<cube url="panos/alijishi.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg" />
			</level>
		</image>

		<image prealign="0|0.0|0" if="webvr.isenabled">
			<cube url="panos/alijishi.tiles/vr/pano_%s.jpg" />
		</image>
		<hotspot name="spot1" style="skin_hotspotstyle" ath="-69.359" atv="49.605" linkedscene="scene_alijishi" />
		<hotspot name="spot2" style="skin_hotspotstyle" ath="23.137" atv="-2.529" linkedscene="scene_lanshantai" />
		<hotspot name="spot3" style="skin_hotspotstyle" ath="161.374" atv="11.457" linkedscene="scene_alijishi" />

	</scene>

	<scene name="scene_lanshantai" title="lanshantai" onstart="" havevrimage="true" thumburl="panos/lanshantai.tiles/thumb.jpg" lat="29.68784572" lng="106.48623036" heading="0.0">

		<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

		<preview url="panos/lanshantai.tiles/preview.jpg" />

		<image type="CUBE" prealign="0|0.0|0" multires="true" tilesize="512" if="!webvr.isenabled">
			<level tiledimagewidth="6400" tiledimageheight="6400">
				<cube url="panos/lanshantai.tiles/%s/l4/%0v/l4_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="3200" tiledimageheight="3200">
				<cube url="panos/lanshantai.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="1664" tiledimageheight="1664">
				<cube url="panos/lanshantai.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="768" tiledimageheight="768">
				<cube url="panos/lanshantai.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg" />
			</level>
		</image>

		<image prealign="0|0.0|0" if="webvr.isenabled">
			<cube url="panos/lanshantai.tiles/vr/pano_%s.jpg" />
		</image>
		<hotspot name="spot1" style="skin_hotspotstyle" ath="82.728" atv="-0.907" linkedscene="scene_nanqurukou" />
		<hotspot name="spot2" style="skin_hotspotstyle" ath="90.341" atv="21.947" linkedscene="scene_lanshantai" />
		<hotspot name="spot3" style="skin_hotspotstyle" ath="104.469" atv="7.923" linkedscene="scene_lanshantai" />
		<hotspot name="spot4" style="skin_hotspotstyle" ath="112.568" atv="6.765" linkedscene="scene_lanshantai" />
		<hotspot name="spot5" style="skin_hotspotstyle" ath="-130.843" atv="-3.067" linkedscene="scene_alijishi" />

	</scene>

	<scene name="scene_nanqurukou" title="nanqurukou" onstart="" havevrimage="true" thumburl="panos/nanqurukou.tiles/thumb.jpg" lat="29.68277575" lng="106.49037431" heading="0.0">

		<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

		<preview url="panos/nanqurukou.tiles/preview.jpg" />

		<image type="CUBE" prealign="0|0.0|0" multires="true" tilesize="512" if="!webvr.isenabled">
			<level tiledimagewidth="6656" tiledimageheight="6656">
				<cube url="panos/nanqurukou.tiles/%s/l4/%0v/l4_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="3328" tiledimageheight="3328">
				<cube url="panos/nanqurukou.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="1664" tiledimageheight="1664">
				<cube url="panos/nanqurukou.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="768" tiledimageheight="768">
				<cube url="panos/nanqurukou.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg" />
			</level>
		</image>

		<image prealign="0|0.0|0" if="webvr.isenabled">
			<cube url="panos/nanqurukou.tiles/vr/pano_%s.jpg" />
		</image>
		<hotspot name="spot1" style="skin_hotspotstyle" ath="-38.009" atv="12.592" linkedscene="scene_nanqurukou" />
		<hotspot name="spot2" style="skin_hotspotstyle" ath="-30.692" atv="28.110" linkedscene="scene_nanqurukou" />
		<hotspot name="spot3" style="skin_hotspotstyle" ath="-20.911" atv="27.386" linkedscene="scene_nanqurukou" />
		<hotspot name="spot4" style="skin_hotspotstyle" ath="-30.077" atv="1.173" linkedscene="scene_nanqurukou" />
		<hotspot name="spot5" style="skin_hotspotstyle" ath="-22.638" atv="0.127" linkedscene="scene_nanqurukou" />

	</scene>

	<scene name="scene_yunshangtiyanzhongxin" title="yunshangtiyanzhongxin" onstart="" havevrimage="true" thumburl="panos/yunshangtiyanzhongxin.tiles/thumb.jpg" lat="29.68852506" lng="106.47723556" heading="0.0">

		<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

		<preview url="panos/yunshangtiyanzhongxin.tiles/preview.jpg" />

		<image type="CUBE" prealign="0|0.0|0" multires="true" tilesize="512" if="!webvr.isenabled">
			<level tiledimagewidth="6400" tiledimageheight="6400">
				<cube url="panos/yunshangtiyanzhongxin.tiles/%s/l4/%0v/l4_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="3200" tiledimageheight="3200">
				<cube url="panos/yunshangtiyanzhongxin.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="1664" tiledimageheight="1664">
				<cube url="panos/yunshangtiyanzhongxin.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="768" tiledimageheight="768">
				<cube url="panos/yunshangtiyanzhongxin.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg" />
			</level>
		</image>

		<image prealign="0|0.0|0" if="webvr.isenabled">
			<cube url="panos/yunshangtiyanzhongxin.tiles/vr/pano_%s.jpg" />
		</image>
		<hotspot name="spot1" style="skin_hotspotstyle" ath="63.014" atv="48.629" linkedscene="scene_yunshangtiyanzhongxin" />
		<hotspot name="spot2" style="skin_hotspotstyle" ath="104.532" atv="2.607" linkedscene="scene_alijishi" />

	</scene>


</krpano>
作者:远航
链接:https://juejin.cn/post/6903693990781321230
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。