2019独角兽企业重金招聘Python工程师标准>>> 
Krpano是一款全景开发插件，废话就不多说了，这篇文章用于记录Krpano后台集成开发，即将该插件应用到后台系统中，上传全景图片后，可自动生成全景，同时可以在场景编辑器中自定义路线、语音等，简化了全景开发的复杂性。
官方网站
- https://krpano.com
参考案例
- http://www.krpano.tech/
Krpano 二维全景图项目开发记录
全景图嵌入式开发
服务器端数据处理
全景图场景编辑器
全景图数据文件生成
全景图数据文件回显-涉及添加多个全景（*重要）
Tour代码模块
动态统一代码模板（tour.xml.jsp）
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
loadscene(get(startscene), null, MERGE);
playsound(bgsnd, '', 0);
if(startactions !== null, startactions() );
js('onready');
Java代码模块
全景图Tour.xml文件代码生成及保存
全景图Tour.xml文件代码回显二次生成保存
全景图多图选择
/**
* Copyright © 2012-2016 JeeSite All rights reserved.
*/
package com.thinkgem.jeesite.modules.hnly.web;
import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;
import java.io.PrintWriter;
import java.net.URLDecoder;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.shiro.authz.annotation.RequiresPermissions;
import org.junit.runners.Parameterized.Parameter;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import org.w3c.dom.NamedNodeMap;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;
import com.thinkgem.jeesite.common.config.Global;
import com.thinkgem.jeesite.common.mapper.JsonMapper;
import com.thinkgem.jeesite.common.persistence.Page;
import com.thinkgem.jeesite.common.utils.FileUtils;
import com.thinkgem.jeesite.common.utils.IdGen;
import com.thinkgem.jeesite.common.utils.KrpanoUtils;
import com.thinkgem.jeesite.common.utils.StringUtils;
import com.thinkgem.jeesite.common.web.BaseController;
import com.thinkgem.jeesite.modules.hnly.entity.KrpanoHotspots;
import com.thinkgem.jeesite.modules.hnly.entity.KrpanoView;
import com.thinkgem.jeesite.modules.hnly.entity.Panoramic;
import com.thinkgem.jeesite.modules.hnly.entity.PanoramicMaterialPic;
import com.thinkgem.jeesite.modules.hnly.entity.PanoramicPicHotspots;
import com.thinkgem.jeesite.modules.hnly.entity.PanoramicPicMusic;
import com.thinkgem.jeesite.modules.hnly.entity.PanoramicPicView;
import com.thinkgem.jeesite.modules.hnly.service.PanoramicMaterialPicService;
import com.thinkgem.jeesite.modules.hnly.service.PanoramicPicHotspotsService;
import com.thinkgem.jeesite.modules.hnly.service.PanoramicPicMusicService;
import com.thinkgem.jeesite.modules.hnly.service.PanoramicPicViewService;
import com.thinkgem.jeesite.modules.hnly.service.PanoramicService;
/**
* 全景图管理Controller
* @author WenC
* @version 2017-08-15
*/
@Controller
@RequestMapping(value = "${adminPath}/hnly/panoramic")
public class PanoramicController extends BaseController {
@Autowired
private PanoramicService panoramicService;
@Autowired
private PanoramicMaterialPicService panoramicMaterialPicService;
@Autowired
private PanoramicPicViewService panoramicPicViewService;
@Autowired
private PanoramicPicHotspotsService panoramicPicHotspotsService;
@Autowired
private PanoramicPicMusicService panoramicPicMusicService;
Map iMap = new HashMap();
@ModelAttribute
public Panoramic get(@RequestParam(required=false) String id) {
Panoramic entity = null;
if (StringUtils.isNotBlank(id)){
entity = panoramicService.get(id);
}
if (entity == null){
entity = new Panoramic();
}
return entity;
}
@RequiresPermissions("hnly:panoramic:view")
@RequestMapping(value = {"list", ""})
public String list(Panoramic panoramic, HttpServletRequest request, HttpServletResponse response, Model model) {
Page page = panoramicService.findPage(new Page(request, response), panoramic);
model.addAttribute("page", page);
return "modules/hnly/panoramicList";
}
@RequiresPermissions("hnly:panoramic:view")
@RequestMapping(value = "form")
public String form(Panoramic panoramic, Model model) {
model.addAttribute("panoramic", panoramic);
return "modules/hnly/panoramicForm";
}
@RequiresPermissions("hnly:panoramic:edit")
@RequestMapping(value = "save")
public String save(Panoramic panoramic, Model model, @RequestParam("imagesUrl") MultipartFile file, HttpServletRequest request, RedirectAttributes redirectAttributes) {
if (!beanValidator(model, panoramic)){
return form(panoramic, model);
}
if(!file.isEmpty()){
String uuid = IdGen.uuidAtoZ();
String path = request.getSession().getServletContext().getRealPath("krpano/panos");
String fileName = file.getOriginalFilename();
String uuidFileName = uuid + fileName.substring(fileName.lastIndexOf("."));
File dir = new File(path,uuidFileName);
if(!dir.exists()){
dir.mkdirs();
}
//MultipartFile自带的解析方法
try {
file.transferTo(dir);
} catch (IllegalStateException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
String allPath = request.getContextPath() + "/krpano/panos/" + uuidFileName;
panoramic.setUrl(allPath);
}
panoramicService.save(panoramic);
addMessage(redirectAttributes, "保存全景图成功");
return "redirect:"+Global.getAdminPath()+"/hnly/panoramic/?repage";
}
@RequiresPermissions("hnly:panoramic:edit")
@RequestMapping(value = "delete")
public String delete(Panoramic panoramic, RedirectAttributes redirectAttributes) {
panoramicService.delete(panoramic);
addMessage(redirectAttributes, "删除全景图成功");
return "redirect:"+Global.getAdminPath()+"/hnly/panoramic/?repage";
}
@RequiresPermissions("hnly:panoramic:edit")
@RequestMapping(value = "vtourGenerate")
public String vtourGenerate(Panoramic panoramic, RedirectAttributes redirectAttributes){
String tempThumbUrl = KrpanoUtils.krpanoVtourMultires(KrpanoUtils.VNP, panoramic.getUrl());
panoramic.setThumbUrl(tempThumbUrl);
panoramic.setTourUrl(KrpanoUtils.getTourUrl(panoramic.getUrl()));
panoramicService.save(panoramic);
addMessage(redirectAttributes, "生成全景图成功");
return "redirect:"+Global.getAdminPath()+"/hnly/panoramic/?repage";
}
@RequiresPermissions("hnly:panoramic:edit")
@RequestMapping(value = "multiSelect")
public String multiSelect(Panoramic panoramic, HttpServletRequest request, HttpServletResponse response, Model model) {
// System.out.println(panoramic.getPanoramicMaterialPicIdList());
model.addAttribute("panoramic", panoramic);
model.addAttribute("AllPanoramicMaterialPic", panoramicMaterialPicService.findList(null));
return "modules/hnly/panoramicMultiSelect";
}
/**
* 全景图更新
* @param panoramic
* @param request
* @param response
* @param model
*/
@RequiresPermissions("hnly:panoramic:edit")
@RequestMapping(value = "multiSelectSave")
public void multiSelectSave(Panoramic panoramic, HttpServletRequest request, HttpServletResponse response, Model model) {
// 更新全景关联要素图片数据
String[] cpmpil = request.getParameterValues("panoramicMaterialPicIdList");
// System.out.println(cpmpil);
// if(null != cpmpil){
// for(String s : cpmpil){
// System.out.println(s);
// }
// }
// System.out.println(panoramic.getPanoramicMaterialPicIdList());
if(null == cpmpil){ //如果为NULL,证明只选择了主场景,没有选择其他场景联动
panoramic.setPanoramicMaterialPicList(null);
}
panoramicService.updatePanoramicPic(panoramic);
panoramic = panoramicService.get(panoramic.getId());
String tourUrls = panoramic.getTourUrl();
// String panoramicMaterialPicIds = "";
for(int i=0;i panoramicPicViewList = panoramicPicViewService.findListByPanoramicId(panoramic.getId());
// ===== 存在代码修改数据,检查有无新增数据,有则添加codeView代码原始模块
if(null != panoramicPicViewList && panoramicPicViewList.size()>0){
String[] tourUrlsExist = new String[panoramicPicViewList.size()];
for(int i=0;i delList = compare(tourUrlsTemp,tourUrlsExist);
for (String str : delList) {
// System.out.println(str);
iMap.clear();
iMap.put("panoramicId", panoramic.getId());
iMap.put("tourUrl", str);
panoramicPicViewService.delByPanoramicIdAndTourUrl(iMap);
}
List addList = compare(tourUrlsExist,tourUrlsTemp);
for (String str : addList) {
// System.out.println(str);
PanoramicPicView panoramicPicView = new PanoramicPicView();
panoramicPicView.setTourUrl(str);
panoramicPicView.setPanoramic(panoramic);
panoramicPicView.setCode("\r\n");
panoramicPicViewService.save(panoramicPicView);
}
} else {
for(String str : tourUrlsTemp){
PanoramicPicView panoramicPicView = new PanoramicPicView();
panoramicPicView.setTourUrl(str);
panoramicPicView.setPanoramic(panoramic);
panoramicPicView.setCode("\r\n");
panoramicPicViewService.save(panoramicPicView);
}
}
// ===== 存在代码修改数据,检查有无新增数据,新增加场景中去除原有场景则去除codeHotspots代码模块,在此不执行热点原始代码模块,因为是一对多的关系
List panoramicPicHotspotsList = panoramicPicHotspotsService.findListByPanoramicId(panoramic.getId());
if(null != panoramicPicHotspotsList && panoramicPicHotspotsList.size()>0){
String[] tourUrlsExist = new String[panoramicPicHotspotsList.size()];
for(int i=0;i delList = compare(tourUrlsTemp,tourUrlsExist);
for (String str : delList) {
System.out.println(str);
iMap.clear();
iMap.put("panoramicId", panoramic.getId());
iMap.put("tourUrl", str);
panoramicPicHotspotsService.delByPanoramicIdAndTourUrl(iMap);
}
}
// ===== 获取语音数据回显
List panoramicPicMusicList = panoramicPicMusicService.findListByPanoramicId(panoramic.getId());
// ===== 配置文件回显操作,重新生成配置文件
if(null != panoramic && "1".equals(panoramic.getTourFlag())){
panoramicPicViewList = panoramicPicViewService.findListByPanoramicId(panoramic.getId());
StringBuffer sb = new StringBuffer();
sb.append("\r\n");
sb.append("\r\n");
sb.append("");
sb.append("\r\n");
sb.append("if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );loadscene(get(startscene), null, MERGE);playsound(bgsnd, '', 0);if(startactions !== null, startactions() );js('onready');\r\n");
sb.append(" \r\n");
for(int i=0;i\r\n");
sb.append(codeView);
sb.append("\r\n");
sb.append(" \r\n");
iMap.clear();
iMap.put("panoramicId", panoramic.getId());
iMap.put("tourUrl", sceneName);
panoramicPicHotspotsList = panoramicPicHotspotsService.findListByPanoramicIdAndTourUrl(iMap);
for(int j=0;j\r\n");
}
// sb.append("\r\n");
// sb.append("txtadd(tooltipname, 'vrtooltip_', get(name));addhotspot(get(tooltipname)); set(hotspot[get(tooltipname)].type,text);copy(hotspot[get(tooltipname)].edge,hotspot[get(name)].edge);copy(hotspot[get(tooltipname)].distorted,hotspot[get(name)].distorted);copy(hotspot[get(tooltipname)].ath,hotspot[get(name)].ath);copy(hotspot[get(tooltipname)].atv,hotspot[get(name)].atv);set(hotspot[get(tooltipname)].oy,-50);set(hotspot[get(tooltipname)].ox,0);set(hotspot[get(tooltipname)].vcenter,false);set(hotspot[get(tooltipname)].padding,10);set(hotspot[get(tooltipname)].bg,true);set(hotspot[get(tooltipname)].bgcolor,0x000000);set(hotspot[get(tooltipname)].bgroundedge,5);set(hotspot[get(tooltipname)].bgalpha,0.65);set(hotspot[get(tooltipname)].bgborder,0);set(hotspot[get(tooltipname)].bgshadow,'0 0 0 0x000000 0');set(hotspot[get(tooltipname)].css,'text-align:left; color:#FFFFFF; font-family:MicrosoftYahei; font-size:24px;');if(device.mobile,set(hotspot[get(tooltipname)].css,'text-align:center; color:#FFFFFF; font-family:MicrosoftYahei; font-weight:bold; font-size:24px;'););set(hotspot[get(tooltipname)].txtshadow,'0 0 0 0x000000 0');if(text == '' OR text === null,copy(hotspot[get(tooltipname)].html,scene[get(linkedscene)].title),copy(hotspot[get(tooltipname)].html,text);); set(hotspot[get(tooltipname)].enabled,false); if(lp_running == false,set(hotspot[get(tooltipname)].visible,true); , if(!webvr.isenabled,if(lp_running == true,set(hotspot[get(tooltipname)].visible,false); set(hotspot[get(tooltipname)].mark2,true););););if(hotspot[get(name)].normal == false, set(hotspot[get(tooltipname)].normal,false);set(hotspot[get(tooltipname)].onloaded,if(webvr.isenabled,set(visible,false);, if(lp_running == false OR lp_running == null OR lp_running === null, set(visible,true);););););\r\n");
// sb.append(" \r\n");
sb.append(" \r\n");
String path = request.getSession().getServletContext().getRealPath("krpano");
String pathAll = path + "\\tour" + panoramic.getTourUrl() + ".xml.jsp";
FileUtils.createFile(pathAll);
File f = new File(pathAll);
try {
FileOutputStream fos = new FileOutputStream(pathAll);
//设置bom头
fos.write(new byte[]{(byte)0xEF, (byte)0xBB, (byte)0xBF});
OutputStreamWriter osw = new OutputStreamWriter(fos, "UTF-8");
BufferedWriter bw = new BufferedWriter(osw);
bw.close();
} catch (IOException e) {
System.out.println(e.toString());
}
try {
// 第四个属性必须要设置true,对存在的文件执行追加操作,否则上面设置的bom头会被覆盖掉
FileUtils.writeStringToFile(f, sb.toString(), "UTF-8", true);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
try {
response.sendRedirect(request.getContextPath() + "/krpano/tour_editor_custom.jsp"
+ "?panoramicId=" + panoramic.getId()
+ "&tourUrl=" + panoramic.getTourUrl()
+ "&tourFlag=" + panoramic.getTourFlag()
// + "&panoramicMaterialPicIds=" + panoramicMaterialPicIds
+ "&tourUrlIds=" + tourUrls);
System.out.println(request.getContextPath() + "/krpano/tour_editor_custom.jsp"
+ "?panoramicId=" + panoramic.getId()
+ "&tourUrl=" + panoramic.getTourUrl()
+ "&tourFlag=" + panoramic.getTourFlag()
// + "&panoramicMaterialPicIds=" + panoramicMaterialPicIds
+ "&tourUrlIds=" + tourUrls);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
/**
* 全景图保存
* @param panoramic
* @param request
* @param response
* @param data
* @throws IOException
*/
@RequiresPermissions("hnly:panoramic:edit")
@RequestMapping(value = "vtourSave")
public void vtourSave(Panoramic panoramic, HttpServletRequest request, HttpServletResponse response, @RequestBody String data) throws IOException{
// data = URLDecoder.decode(URLDecoder.decode( data, "UTF-8"), "UTF-8");
System.out.println(data);
System.out.println(request.getParameter("panoramicId"));
String panoramicId = request.getParameter("panoramicId");
panoramic = panoramicService.get(panoramicId);
System.out.println(request.getParameter("tourUrlIds"));
String tourUrlIds = request.getParameter("tourUrlIds");
String[] tourUrlIdsData = tourUrlIds.split(",");
// System.out.println(request.getParameter("panoramicMaterialPicIds"));
// String panoramicMaterialPicIds = request.getParameter("panoramicMaterialPicIds");
// String[] panoramicMaterialPicIdsData = panoramicMaterialPicIds.split(",");
// JSONObject obj = new JSONObject(data.substring(1, data.length()-1));
// System.out.println(obj.getString("index"));
JsonMapper ji = JsonMapper.getInstance();
List krpanoViewList = (List)ji.fromJson(data, ji.createCollectionType(ArrayList.class, KrpanoView.class));
// for(KrpanoView kv : krpanoViewList){
// System.out.println(kv.getName());
// }
// KrpanoView kv = (KrpanoView) JsonMapper.fromJsonString(data.substring(1, data.length()-1), KrpanoView.class);
// System.out.println(kv.getName() + kv.getInitH() + kv.getInitV());
StringBuffer sb = new StringBuffer();
String viewCode = "";
sb.append("\r\n");
sb.append("\r\n");
sb.append("");
sb.append("\r\n");
sb.append("if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );loadscene(get(startscene), null, MERGE);playsound(bgsnd, '', 0);if(startactions !== null, startactions() );js('onready');\r\n");
sb.append(" \r\n");
for(int i=0;i\r\n");
for(int j=0;j\r\n";
iMap.clear();
iMap.put("panoramicId", panoramic.getId());
iMap.put("tourUrl", sceneName);
PanoramicPicView panoramicPicView = panoramicPicViewService.findByPanoramicIdAndTourUrl(iMap);
panoramicPicView.setCode(viewCode);
panoramicPicViewService.save(panoramicPicView);
} else {
viewCode = "\r\n";
}
sb.append(viewCode);
break;
}
// 根据实际测试,场景中有多少个图片会传多少个参数,这个暂时隐藏,如出现意外情况,再加上
// if((j+1)==krpanoViewList.size()){
// viewCode = "\r\n";
// sb.append(viewCode);
// }
}
sb.append("\r\n");
sb.append(" \r\n");
for(int j=0;j\r\n";
//sb.append(codeHotspots);
iMap.clear();
iMap.put("panoramicId", panoramic.getId());
iMap.put("tourUrl", sceneName);
iMap.put("name", hotspots.getName());
System.out.println(hotspots.getName());
PanoramicPicHotspots panoramicPicHotspots = panoramicPicHotspotsService.findByPanoramicIdAndTourUrlAndName(iMap);
if(null == panoramicPicHotspots){
panoramicPicHotspots = new PanoramicPicHotspots();
panoramicPicHotspots.setPanoramic(panoramic);
panoramicPicHotspots.setTourUrl(sceneName);
panoramicPicHotspots.setName(hotspots.getName());
panoramicPicHotspots.setLinkedscene(hotspots.getLinkedscene());
}
panoramicPicHotspots.setCode(codeHotspots);
panoramicPicHotspotsService.save(panoramicPicHotspots);
}
iMap.clear();
iMap.put("panoramicId", panoramic.getId());
iMap.put("tourUrl", sceneName);
List panoramicPicHotspotsList = panoramicPicHotspotsService.findListByPanoramicIdAndTourUrl(iMap);
for(int k=0;k\r\n");
}
//sb.append("\r\n");
//sb.append("txtadd(tooltipname, 'vrtooltip_', get(name));addhotspot(get(tooltipname)); set(hotspot[get(tooltipname)].type,text);copy(hotspot[get(tooltipname)].edge,hotspot[get(name)].edge);copy(hotspot[get(tooltipname)].distorted,hotspot[get(name)].distorted);copy(hotspot[get(tooltipname)].ath,hotspot[get(name)].ath);copy(hotspot[get(tooltipname)].atv,hotspot[get(name)].atv);set(hotspot[get(tooltipname)].oy,-50);set(hotspot[get(tooltipname)].ox,0);set(hotspot[get(tooltipname)].vcenter,false);set(hotspot[get(tooltipname)].padding,10);set(hotspot[get(tooltipname)].bg,true);set(hotspot[get(tooltipname)].bgcolor,0x000000);set(hotspot[get(tooltipname)].bgroundedge,5);set(hotspot[get(tooltipname)].bgalpha,0.65);set(hotspot[get(tooltipname)].bgborder,0);set(hotspot[get(tooltipname)].bgshadow,'0 0 0 0x000000 0');set(hotspot[get(tooltipname)].css,'text-align:left; color:#FFFFFF; font-family:MicrosoftYahei; font-size:24px;');if(device.mobile,set(hotspot[get(tooltipname)].css,'text-align:center; color:#FFFFFF; font-family:MicrosoftYahei; font-weight:bold; font-size:24px;'););set(hotspot[get(tooltipname)].txtshadow,'0 0 0 0x000000 0');if(text == '' OR text === null,copy(hotspot[get(tooltipname)].html,scene[get(linkedscene)].title),copy(hotspot[get(tooltipname)].html,text);); set(hotspot[get(tooltipname)].enabled,false); if(lp_running == false,set(hotspot[get(tooltipname)].visible,true); , if(!webvr.isenabled,if(lp_running == true,set(hotspot[get(tooltipname)].visible,false); set(hotspot[get(tooltipname)].mark2,true););););if(hotspot[get(name)].normal == false, set(hotspot[get(tooltipname)].normal,false);set(hotspot[get(tooltipname)].onloaded,if(webvr.isenabled,set(visible,false);, if(lp_running == false OR lp_running == null OR lp_running === null, set(visible,true);););););\r\n");
//sb.append(" \r\n");
sb.append(" \r\n");
String path = request.getSession().getServletContext().getRealPath("krpano");
String pathAll = path + "\\tour" + panoramic.getTourUrl() + ".xml.jsp";
FileUtils.createFile(pathAll);
File f = new File(pathAll);
// if(!f.exists()){
// f.mkdirs();
// }
try {
FileOutputStream fos = new FileOutputStream(pathAll);
//设置bom头
fos.write(new byte[]{(byte)0xEF, (byte)0xBB, (byte)0xBF});
OutputStreamWriter osw = new OutputStreamWriter(fos, "UTF-8");
BufferedWriter bw = new BufferedWriter(osw);
bw.close();
} catch (IOException e) {
System.out.println(e.toString());
}
// 第四个属性必须要设置true,对存在的文件执行追加操作,否则上面设置的bom头会被覆盖掉
FileUtils.writeStringToFile(f, sb.toString(), "UTF-8", true);
panoramic = panoramicService.get(panoramicId);
panoramic.setTourFlag("1");
panoramicService.save(panoramic);
response.setContentType("text/html;charset=utf-8");
PrintWriter pw = response.getWriter();
String mess = "保存成功";
pw.write(URLDecoder.decode(mess, "utf-8"));
pw.flush();
pw.close();
}
public static List compare(T[] t1, T[] t2) {
List list1 = Arrays.asList(t1);
List list2 = new ArrayList();
for (T t : t2) {
if (!list1.contains(t)) {
list2.add(t);
}
}
return list2;
}
} Krpano工具类-生成场景
package com.thinkgem.jeesite.common.utils;
import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;
import javax.servlet.http.HttpServletResponse;
public class KrpanoUtils {
public static final String VN = "vtour-normal";
public static final String VM = "vtour-multires";
public static final String VNP = "vtour-normal-picture";
public static final String VMP = "vtour-multires-picture";
public static synchronized String krpanoVtourMultires(String type, String fileUrl){
// 生成全景图thumb的图片地址
String tempFileName = fileUrl.substring(fileUrl.lastIndexOf("/") + 1, fileUrl.lastIndexOf("."));
String tempThumbUrl = fileUrl.substring(0, fileUrl.lastIndexOf("/") + 1)
+ tempFileName + "/thumb.jpg";
// 创建全景图
String projectRealPath = RequestResponseContext.getRequest().getSession().getServletContext().getRealPath("").replaceAll("\\\\\\\\","\\\\");
String command = projectRealPath
+ "\\krpano\\krpanotools64.exe makepano -config="
+ "templates\\" + type + ".config "
+ projectRealPath + fileUrl.replaceAll("/", "\\\\");
// + projectRealPath.substring(0, projectRealPath.lastIndexOf("\\")) + fileUrl.replaceAll("/", "\\\\");
System.out.println(command);
Runtime runtime = Runtime.getRuntime();
StringBuilder sb = new StringBuilder();
BufferedReader bufferedReader = null;
Process process = null;
try {
process = runtime.exec(command);
try {
BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(process.getOutputStream()));
bw.write("y\r\n");
bw.flush();
bw.close();
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
bufferedReader = new BufferedReader(new InputStreamReader(process.getInputStream()));
String line = null;
while ((line = bufferedReader.readLine()) != null) {
sb.append(line + "\n");
// if(line.contains("overwrite")){
// System.out.println(line);
// }
}
} catch (IOException e) {
e.printStackTrace();
} finally {
try {
bufferedReader.close();
process.destroy();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
// System.out.println(sb.toString());
return tempThumbUrl;
}
// 获取全景地址编号
public static String getTourUrl(String fileUrl){
String tempFileName = fileUrl.substring(fileUrl.lastIndexOf("/") + 1, fileUrl.lastIndexOf("."));
return tempFileName;
}
public static void main(String[] args) {
System.out.println();
// KrpanoUtils.krpanoVtourMultires(null);
}
}
全景编辑器
tour_editor_custom.jsp
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
全景高级编辑DEMO
场景选择
krpano.editor.css
html, body, div, span, applet, input, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before,
blockquote:after {
content: none;
}
q:before,
q:after {
content: "";
}
table {
border-collapse: collapse;
border-spacing: 0;
}
button {
padding: 0;
margin: 0;
background-color: #fff;
border: none;
outline: 0;
}
body {
font-family: 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'STHeitiSC-Light', 'Arial', 'Microsoft Yahei', sans-serif;
font-size: 14px;
line-height: 1.5;
}
a {
text-decoration: none;
}
.btn {
cursor: pointer;
display: inline-block;
padding: 8px 20px;
background-color: rgba(0, 0, 0, .7);
color: #fff;
border-radius: 4px;
font-size: 14px;
}
.btn-blue {
background-color: #2185D0;
}
.scene-name {
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, .6);
color: #fff;
text-align: right;
height: 40px;
line-height: 40px;
padding-right: 15px;
}
.frame-line {
position: absolute;
background-color: #eee;
}
.frame-line-top,
.frame-line-bottom {
height: 1px;
left: 30%;
right: 30%;
}
.frame-line-top {
top: 25%;
}
.frame-line-bottom {
bottom: 25%;
}
.frame-line-left,
.frame-line-right {
top: 25%;
bottom: 25%;
width: 1px;
}
.frame-line-left {
left: 30%;
}
.frame-line-right {
right: 30%;
}
.angle {
width: 40px;
height: 40px;
position: absolute;
}
.angle i {
position: absolute;
background-color: #eee;
}
.angle-a {
left: 0;
width: 8px;
top: 0;
bottom: 0;
}
.angle-b {
top: 0;
left: 0;
right: 0;
height: 8px;
}
.angle-tl {
left: 30%;
top: 25%;
}
.angle-tr {
right: 30%;
top: 25%;
}
.angle-tr .angle-a {
left: auto;
right: 0;
}
.angle-bl {
left: 30%;
bottom: 25%;
}
.angle-bl .angle-b {
bottom: 0;
top: auto;
}
.angle-br {
right: 30%;
bottom: 25%;
}
.angle-br .angle-a {
left: auto;
right: 0;
}
.angle-br .angle-b {
top: auto;
bottom: 0;
}
.frame .btn {
position: absolute;
left: 50%;
top: 30%;
transform: translate(-50%, 0);
}
.overlay {
position: absolute;
right: 15px;
top: 15px;
z-index: 9999;
}
.save-wrap {
margin-top: 40px;
margin-bottom: 20px;
}
.tool-panel {
position: relative;
}
.tool-btn-lst {
float: right;
}
.tool-btn-lst > li {
margin-bottom: 10px;
position: relative;
}
.tool-main {
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
display: none;
position: absolute;
right: 80px;
top: 0;
padding: 15px;
background-color: rgba(0, 0, 0, .7);
min-width: 200px;
border-top: 3px solid #00a3d8;
}
.tool-section {
border-bottom: 1px solid #2185D0;
padding: 15px 0;
}
.tool-section:last-child {
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
}
.tool-section:first-child {
padding-top: 0;
}
.tool-section h4 {
color: #999;
}
.choose-lst {
margin: 7px 0;
}
.choose-lst li {
padding: 3px 0;
}
.choose-lst input {
margin-right: 5px;
}
.left-column {
position: absolute;
top: 0;
left: -250px;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.3);
width: 250px;
height: 100%;
-webkit-animation:hideLeft 0.8s infinite;
-webkit-animation-iteration-count:1;
}
@-webkit-keyframes showLeft {
0% {left: -250px;}
100% {left: 0;}
}
@-webkit-keyframes hideLeft {
0% {left: 0;}
100% {left: -250px;}
}
.scene-select {
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
background-color: rgba(0, 0, 0, 0.5);
padding-bottom: 1px;
overflow: auto;
max-height: 600px;
overflow-x: hidden;
}
.blue-banner {
background-color: #00a3d8;
height: 3px;
}
.li-scene {
list-style-type: none;
height: 30px;
border: 2px solid rgba(255, 255, 255, 0);
margin: 10px;
width: 200px;
}
.li-scene:hover {
border-color: #FF9800;
}
.li-scene-hover {
border-color: #FF9800;
}
.li-scene-span {
cursor: pointer;
height: 30px;
font-size: 16px;
line-height: 30px;
float: left;
width: 100px;
overflow: hidden;
}
.li-scene-input {
background-color: rgba(185, 185, 185, 0.5);
height: 30px;
width: 100px;
font-size: 18px;
}
.scene-li-button {
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 0) url("../img/krpano.modify.png");
border: 0;
float: right;
cursor: pointer;
}
.circle {
width: 30px;
height: 30px;
float: right;
background: #292827 url("../img/krpano.home.png");
border-radius: 50%;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.select_scene_text {
text-align: center;
background-color: rgba(40, 40, 40, 0.7);
height: 50px;
}
.p_title {
margin-top: 0;
font-size: 20px;
line-height: 50px;
}
.add-hot-pot {
position: absolute;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.8);
width: 700px;
height: 440px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.add-voice {
position: absolute;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.8);
width: 700px;
height: 440px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.progress-banner {
margin: 20px;
background-color: rgba(150, 150, 150, 0.4);
height: 30px;
}
.progress-title {
float: left;
text-align: center;
width: 33.33%;
height: 100%;
}
.progress-title-on {
background-color: #00a3d8;
}
.add-hot-banner {
font-size: 16px;
background-color: rgba(150, 150, 150, 0.4);
padding: 8px 8px 8px 15px;
height: 20px;
line-height: 20px;
}
.div-close {
cursor: pointer;
float: right;
font-size: 30px;
}
.add-hot-content {
margin: 10px 20px 20px 20px;
}
.add-hot-bottom-div {
height: 250px;
}
.write-title {
font-size: 18px;
text-align: center;
}
#addHotTitle {
color: white;
width: 57%;
background-color: rgba(150, 150, 150, 0.4);
}
.add-hot-button {
cursor: pointer;
background-color: #00a3d8;
line-height: 30px;
text-align: center;
font-size: 18px;
height: 30px;
}
.hot-style {
background-color: rgba(255, 255, 255, 0);
border: 2px solid rgba(255, 255, 255, 0);
cursor: pointer;
margin: 7px;
width: 64px;
height: 56px;
background-size: cover;
float: left;
}
.hot-spot-img {
background-color: rgba(255, 255, 255, 0);
width: 32px;
height: 32px;
background-size: cover;
float: left;
}
.hot-style:hover {
border: 2px solid orange;
}
.hot-style-on {
border: 2px solid orange;
}
.select-scene-div {
float: left;
width: 80px;
text-align: center;
cursor: pointer;
margin: 5px;
}
.select-scene-div:hover {
margin: 3px;
border: 2px solid orange;
}
.select-scene-div-on {
margin: 3px;
border: 2px solid orange;
}
.thumbs-img {
height: 80px;
background-size: 80px 80px;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
}
.thumbs-img-scene-list {
width: 30px;
height: 30px;
background-size: 30px 30px;
float: left;
margin-right: 10px;
}
.hot-pot-select-span {
position: absolute;
left: 15px;
top: 5px;
}
.wait-time-input {
vertical-align: middle;
width: 30px;
background-color: rgba(255, 255, 255, 0.5);
text-align: center
}
.fov-input {
vertical-align: middle;
width: 65px;
background-color: rgba(255, 255, 255, 0.5);
text-align: center;
float: right;
height: 21px;
}
.hot-spot-list {
height: 32px;
width: 200px;
color: white;
font-size: 18px;
border: solid 2px rgba(0, 0, 0, 0);
margin-top: 5px;
}
.hot-spot-text {
width: 130px;
height: 26px;
float: left;
text-align: center;
padding: 3px;
}
.hot-spot-del {
cursor: pointer;
width: 32px;
height: 32px;
float: left;
text-align: center;
background-color: rgba(255, 255, 255, 0.1);
}
.hot-spot-button {
cursor: pointer;
background-color: rgba(255, 255, 255, 0.1);
height: 32px;
width: 202px;
color: white;
font-size: 18px;
margin-top: 10px;
}
.hot-spot-list-hover {
border: solid 2px orange;
}
.number-pb {
position: relative;
height: 3px;
background-color: #ffffff;
margin: 40px 0;
}
.number-pb .number-pb-shown {
position: absolute;
background: #00a3d8;
left: 0;
height: 3px;
}
.number-pb .number-pb-num {
position: absolute;
background-color: #00a3d8;
left: 0;
padding: 0 5px;
}
.triangle-up-left {
border-bottom: 20px solid #00a3d8;
margin-top: 3px;
margin-left: -10px;
}
.triangle-up-right {
border-bottom: 20px solid #00a3d8;
margin-top: 3px;
margin-right: -10px;
}
.triangle-down {
border-top: 20px solid #00a3d8;
margin-top: -20px;
float: none;
}
.triangle {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.my-open-out {
margin-left: 90px;
width: 40px;
height: 20px;
border-radius: 10px;
position: relative;
background: #00a3d8;
}
.my-open-in {
width: 18px;
height: 18px;
border-radius: 9px;
position: absolute;
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.4);
top: 1px;
}
.my-open-in-open {
right: 1px;
}
.my-open-in-close {
left: 1px;
}
.dive-text {
line-height: 20px;
float: left;
margin-left: 20px;
}jQuery-2.1.4.min.js
（略），自行下载。
template.min.js
/*!art-template - Template Engine | http://aui.github.com/artTemplate/*/
!function(){function a(a){return a.replace(t,"").replace(u,",").replace(v,"").replace(w,"").replace(x,"").split(y)}function b(a){return"'"+a.replace(/('|\\)/g,"\\$1").replace(/\r/g,"\\r").replace(/\n/g,"\\n")+"'"}function c(c,d){function e(a){return m+=a.split(/\n/).length-1,k&&(a=a.replace(/\s+/g," ").replace(//g,"")),a&&(a=s[1]+b(a)+s[2]+"\n"),a}function f(b){var c=m;if(j?b=j(b,d):g&&(b=b.replace(/\n/g,function(){return m++,"$line="+m+";"})),0===b.indexOf("=")){var e=l&&!/^=[=#]/.test(b);if(b=b.replace(/^=[=#]?|[\s;]*$/g,""),e){var f=b.replace(/\s*\([^\)]+\)/,"");n[f]||/^(include|print)$/.test(f)||(b="$escape("+b+")")}else b="$string("+b+")";b=s[1]+b+s[2]}return g&&(b="$line="+c+";"+b),r(a(b),function(a){if(a&&!p[a]){var b;b="print"===a?u:"include"===a?v:n[a]?"$utils."+a:o[a]?"$helpers."+a:"$data."+a,w+=a+"="+b+",",p[a]=!0}}),b+"\n"}var g=d.debug,h=d.openTag,i=d.closeTag,j=d.parser,k=d.compress,l=d.escape,m=1,p={$data:1,$filename:1,$utils:1,$helpers:1,$out:1,$line:1},q="".trim,s=q?["$out='';","$out+=",";","$out"]:["$out=[];","$out.push(",");","$out.join('')"],t=q?"$out+=text;return $out;":"$out.push(text);",u="function(){var text=''.concat.apply('',arguments);"+t+"}",v="function(filename,data){data=data||$data;var text=$utils.$include(filename,data,$filename);"+t+"}",w="'use strict';var $utils=this,$helpers=$utils.$helpers,"+(g?"$line=0,":""),x=s[0],y="return new String("+s[3]+");";r(c.split(h),function(a){a=a.split(i);var b=a[0],c=a[1];1===a.length?x+=e(b):(x+=f(b),c&&(x+=e(c)))});var z=w+x+y;g&&(z="try{"+z+"}catch(e){throw {filename:$filename,name:'Render Error',message:e.message,line:$line,source:"+b(c)+".split(/\\n/)[$line-1].replace(/^\\s+/,'')};}");try{var A=new Function("$data","$filename",z);return A.prototype=n,A}catch(B){throw B.temp="function anonymous($data,$filename) {"+z+"}",B}}var d=function(a,b){return"string"==typeof b?q(b,{filename:a}):g(a,b)};d.version="3.0.0",d.config=function(a,b){e[a]=b};var e=d.defaults={openTag:"<%",closeTag:"%>",escape:!0,cache:!0,compress:!1,parser:null},f=d.cache={};d.render=function(a,b){return q(a,b)};var g=d.renderFile=function(a,b){var c=d.get(a)||p({filename:a,name:"Render Error",message:"Template not found"});return b?c(b):c};d.get=function(a){var b;if(f[a])b=f[a];else if("object"==typeof document){var c=document.getElementById(a);if(c){var d=(c.value||c.innerHTML).replace(/^\s*|\s*$/g,"");b=q(d,{filename:a})}}return b};var h=function(a,b){return"string"!=typeof a&&(b=typeof a,"number"===b?a+="":a="function"===b?h(a.call(a)):""),a},i={"<":"<",">":">",'"':""","'":"'","&":"&"},j=function(a){return i[a]},k=function(a){return h(a).replace(/&(?![\w#]+;)|[<>"']/g,j)},l=Array.isArray||function(a){return"[object Array]"==={}.toString.call(a)},m=function(a,b){var c,d;if(l(a))for(c=0,d=a.length;d>c;c++)b.call(a,a[c],c,a);else for(c in a)b.call(a,a[c],c)},n=d.utils={$helpers:{},$include:g,$string:h,$escape:k,$each:m};d.helper=function(a,b){o[a]=b};var o=d.helpers=n.$helpers;d.onerror=function(a){var b="Template Error\n\n";for(var c in a)b+="<"+c+">\n"+a[c]+"\n\n";"object"==typeof console&&console.error(b)};var p=function(a){return d.onerror(a),function(){return"{Template Error}"}},q=d.compile=function(a,b){function d(c){try{return new i(c,h)+""}catch(d){return b.debug?p(d)():(b.debug=!0,q(a,b)(c))}}b=b||{};for(var g in e)void 0===b[g]&&(b[g]=e[g]);var h=b.filename;try{var i=c(a,b)}catch(j){return j.filename=h||"anonymous",j.name="Syntax Error",p(j)}return d.prototype=i.prototype,d.toString=function(){return i.toString()},h&&b.cache&&(f[h]=d),d},r=n.$each,s="break,case,catch,continue,debugger,default,delete,do,else,false,finally,for,function,if,in,instanceof,new,null,return,switch,this,throw,true,try,typeof,var,void,while,with,abstract,boolean,byte,char,class,const,double,enum,export,extends,final,float,goto,implements,import,int,interface,long,native,package,private,protected,public,short,static,super,synchronized,throws,transient,volatile,arguments,let,yield,undefined",t=/\/\*[\w\W]*?\*\/|\/\/[^\n]*\n|\/\/[^\n]*$|"(?:[^"\\]|\\[\w\W])*"|'(?:[^'\\]|\\[\w\W])*'|\s*\.\s*[$\w\.]+/g,u=/[^\w$]+/g,v=new RegExp(["\\b"+s.replace(/,/g,"\\b|\\b")+"\\b"].join("|"),"g"),w=/^\d[^,]*|,\d[^,]*/g,x=/^,+|,+$/g,y=/^$|,+/;e.openTag="{{",e.closeTag="}}";var z=function(a,b){var c=b.split(":"),d=c.shift(),e=c.join(":")||"";return e&&(e=", "+e),"$helpers."+d+"("+a+e+")"};e.parser=function(a){a=a.replace(/^\s/,"");var b=a.split(" "),c=b.shift(),e=b.join(" ");switch(c){case"if":a="if("+e+"){";break;case"else":b="if"===b.shift()?" if("+b.join(" ")+")":"",a="}else"+b+"{";break;case"/if":a="}";break;case"each":var f=b[0]||"$data",g=b[1]||"as",h=b[2]||"$value",i=b[3]||"$index",j=h+","+i;"as"!==g&&(f="[]"),a="$each("+f+",function("+j+"){";break;case"/each":a="});";break;case"echo":a="print("+e+");";break;case"print":case"include":a=c+"("+b.join(",")+");";break;default:if(/^\s*\|\s*[\w\$]/.test(e)){var k=!0;0===a.indexOf("#")&&(a=a.substr(1),k=!1);for(var l=0,m=a.split("|"),n=m.length,o=m[l++];n>l;l++)o=z(o,m[l]);a=(k?"=":"=#")+o}else a=d.helpers[c]?"=#"+c+"("+b.join(",")+");":"="+a}return a},"function"==typeof define?define(function(){return d}):"undefined"!=typeof exports?module.exports=d:this.template=d}();
krpano.editor.js
var krpano = document.getElementById("krpanoSWFObject");
var sceneList = [];
var toAddHotSpot = {};
var currentSceneIndex = 0;
var movingSpot = {};
//视角拖动模块变量
var pbX = 0;
var moveIntervalId;
var canDownMove = false;
var canLeftMove = false;
var canRightMove = false;
//设置为不动态显示,在页面中直接显示就好了 已经设置left: 0 !important;到页面中
var canShowLeft = true;
$(function () {
//右侧功能选择
$(".J-tool-btn").click(function () {
$(".J-tool-btn").each(function () {
$(this).removeClass("btn-blue");
$("[name=" + $(this).attr("data-target") + "]").hide();
});
$(this).addClass("btn-blue");
$("[name=" + $(this).attr("data-target") + "]").show();
window.clearInterval(moveIntervalId);
$(".add-hot-pot").hide();
$(".add-voice").hide();
});
//视角拖动条
$(".triangle-down").mouseup(function () {
canDownMove = false;
}).mouseout(function () {
canDownMove = false;
});
$(".triangle-up-left").mouseup(function () {
canLeftMove = false;
}).mouseout(function () {
canLeftMove = false;
});
$(".triangle-up-right").mouseup(function () {
canRightMove = false;
}).mouseout(function () {
canRightMove = false;
});
//添加热点模块
$(".hot-style").click(function () {
toAddHotSpot.style = $(this).attr("name");
$(".hot-style").removeClass("hot-style-on");
$(this).addClass("hot-style-on");
});
$(this).mousemove(function () {
if (canShowLeft) {
if (krpano.get("mouse.x") <= 300) {
$(".left-column").css("-webkit-animation", "showLeft 0.8s infinite").css("-webkit-animation-iteration-count", "1")
.css("left", "0");
} else {
$(".left-column").css("-webkit-animation", "hideLeft 0.8s infinite").css("-webkit-animation-iteration-count", "1")
.css("left", "-250px");
}
}
});
$(".my-open-out").click(function () {
if (toAddHotSpot.dive) {
toAddHotSpot.dive = false;
$(this).css("background", "rgba(255,255,255,0.4)");
$(".my-open-in").removeClass("my-open-in-open").addClass("my-open-in-close");
} else {
toAddHotSpot.dive = true;
$(this).css("background", "#00a3d8");
$(".my-open-in").removeClass("my-open-in-close").addClass("my-open-in-open");
}
});
});
//noinspection JSUnusedGlobalSymbols
function onready() {
//隐藏下方自带控制条
krpano.set("layer[skin_control_bar].visible", false);
krpano.set("layer[skin_splitter_bottom].visible", false);
krpano.set("layer[skin_scroll_window].visible", false);
//初始化场景选择列表
var sceneListHTML;
var dataSceneList = {list: []};
krpano.get("scene").getArray().forEach(function (scene) {
dataSceneList.list.push({name: scene.name, index: scene.index, bgmusic: scene.bgmusic});
});
sceneListHTML = template('tplSceneList', dataSceneList);
document.getElementById('sceneList').innerHTML = sceneListHTML;
//初始化选中以及首场景
$("li[name=" + krpano.get("startscene") + "] .circle").css("background-color", "#FF9800");
$("li[name=" + krpano.get("xml.scene") + "]").addClass("li-scene-hover");
currentSceneIndex = krpano.get("scene").getItem(krpano.get("xml.scene")).index;
//热点列表模块
var hotSpotHTML;
var dataHotSpotList = {list: []};
//覆盖原热点选中事件,添加热点点击移动事件
krpano.get("hotspot").getArray().forEach(function (oldHotSpot) {
if (oldHotSpot.name !== 'vr_cursor' && oldHotSpot.name !== 'webvr_prev_scene'
&& oldHotSpot.name !== 'webvr_next_scene') {
dataHotSpotList.list.push(oldHotSpot);
hotSpotInitEvent(oldHotSpot.name);
}
});
hotSpotHTML = template('tplHotSpotList', dataHotSpotList);
document.getElementById('hotSpotList').innerHTML = hotSpotHTML;
//背景音乐列表模块
var bgMusicHTML;
var dataBgMusicList = {list: []};
var bgMusicUrl=krpano.get("scene").getItem(currentSceneIndex).bgmusic;
if(typeof(bgMusicUrl) != "undefined")
{
var bgmusicArr=bgMusicUrl.split("/");
var bgMusicName=bgmusicArr[bgmusicArr.length-1].substring(0,bgmusicArr[bgmusicArr.length-1].length-4);
dataBgMusicList.list.push({name: bgMusicName});
}
bgMusicHTML = template('tplBgMusicList', dataBgMusicList);
document.getElementById('bgMusicList').innerHTML = bgMusicHTML;
//右侧数值初始化
$("#waitTime").val(krpano.get("autorotate.waittime"));
if (krpano.get("autorotate.enabled")) {
$("#autoSpin").prop("checked", true);
$("#waitTimeInput").show();
} else {
$("#autoSpin").prop("checked", false);
$("#waitTimeInput").hide();
}
$("#initFov").val(krpano.get("view.fov").toFixed(0));
$("#initFovMax").val(krpano.get("view.fovmax").toFixed(0));
$("#initFovMin").val(krpano.get("view.fovmin").toFixed(0));
updatePbLine();
initPbLineEvent();
//初始化提交数据
if (!sceneList.length) {
krpano.get("scene").getArray().forEach(function (scene) {
var sceneObj = {};
sceneObj.index = scene.index;
sceneObj.name = scene.name;
sceneObj.bgmusic = scene.bgmusic;
if (scene.name == krpano.get("startscene")) {
sceneObj.welcomeFlag = true;
}
sceneList.push(sceneObj);
});
}
}
//场景切换，重命名模块
function changeScene(index) {
krpano.call("loadscene(" + krpano.get("scene").getItem(index).name + ")");
//当前存储对象展示
var currentScene = sceneList[index];
if (currentScene.initH) krpano.set("view.hlookat", currentScene.initH);
if (currentScene.initV) krpano.set("view.vlookat", currentScene.initV);
if (currentScene.fov) krpano.set("view.fov", currentScene.fov);
if (currentScene.fovmax) krpano.set("view.fovmax", currentScene.fovmax);
if (currentScene.fovmin) krpano.set("view.fovmin", currentScene.fovmin);
if (currentScene.autorotate) {
krpano.set("autorotate.enabled", currentScene.autorotate.enabled);
krpano.set("autorotate.waittime", currentScene.autorotate.waitTime);
}
if (currentScene.hotSpots) {
krpano.get("hotspot").getArray().forEach(function (everySpot) {
if (everySpot.name !== "vr_cursor" && everySpot.name !== 'webvr_prev_scene'
&& everySpot.name !== 'webvr_next_scene') {
krpano.call("removehotspot(" + everySpot.name + ")");
}
});
currentScene.hotSpots.forEach(function (everySpot) {
krpano.call("addhotspot(" + everySpot.name + ");");
krpano.set("hotspot[" + everySpot.name + "].ath", everySpot.ath);
krpano.set("hotspot[" + everySpot.name + "].atv", everySpot.atv);
krpano.set("hotspot[" + everySpot.name + "].text", everySpot.text);
krpano.set("hotspot[" + everySpot.name + "].linkedscene", everySpot.linkedscene);
krpano.set("hotspot[" + everySpot.name + "].dive", everySpot.dive);
krpano.get("hotspot[" + everySpot.name + "]").loadstyle(everySpot.style);
});
}
$('.li-scene-hover').removeClass('li-scene-hover');
$("li[name=" + krpano.get("xml.scene") + "]").addClass("li-scene-hover");
$(".circle").css("background-color", "#292827");
sceneList.forEach(function (scene) {
if (scene.welcomeFlag) {
$(".circle:eq(" + scene.index + ")").css("background-color", "#FF9800");
krpano.set("startscene", scene.name);
}
});
onready();
}
function rename(prevButton) {
prevButton.prev().hide();
prevButton.attr("type", "text");
var focusValue = prevButton.val();
prevButton.val("");
prevButton.focus();
prevButton.val(focusValue);
}
function doRename(thisInput) {
var nameIndex = thisInput.parent().attr('key');
var newName = thisInput.val();
var oldName = krpano.get("scene").getItem(nameIndex).name;
var doFlag = true;
//判断名字是否重复
sceneList.forEach(function (eachScene) {
if (eachScene.index !== nameIndex) {
if (eachScene.name === newName) {
doFlag = false;
return false;
}
}
});
if (doFlag) {
krpano.get("scene").renameItem(oldName, newName);
if (currentSceneIndex === nameIndex) {
krpano.set("xml.scene", newName);
}
if (oldName === krpano.get("startscene")) {
krpano.set("startscene", newName);
}
sceneList[nameIndex].name = newName;
//修改热点指向场景名字
sceneList.forEach(function (eachScene) {
if (eachScene.index !== nameIndex && eachScene.hotSpots) {
eachScene.hotSpots.forEach(function (eachSpot) {
if (eachSpot.linkedscene === oldName) {
eachSpot.linkedscene = newName;
eachSpot.text = newName;
krpano.set("hotspot[" + eachSpot.name + "].text", newName);
krpano.set("hotspot[" + eachSpot.name + "].linkedscene", newName);
}
});
}
});
$(".hot-spot-text").each(function () {
if ($(this).text() == oldName) {
$(this).text(newName);
}
});
$("#isEdited").text('保存*');
thisInput.prev().text(newName);
} else {
thisInput.val(oldName);
alert("名字重复");
}
thisInput.prev().show();
thisInput.attr("type", "hidden");
}
function selectWelcomeScene(index) {
$(".circle").css("background-color", "#292827");
$(".circle:eq(" + index + ")").css("background-color", "#FF9800");
sceneList.forEach(function (scene) {
scene.welcomeFlag = false;
});
sceneList[index].welcomeFlag = true;
$("#isEdited").text('保存*');
}
//视角修改模块
function setAsDefaultView() {
sceneList[currentSceneIndex].initH = krpano.get("view.hlookat");
sceneList[currentSceneIndex].initV = krpano.get("view.vlookat");
sceneList[currentSceneIndex].fov = krpano.get("view.fov");
$("#initFov").val(krpano.get("view.fov").toFixed(0));
updatePbLine();
$("#isEdited").text('保存*');
}
function autoSpinClick() {
var isChecked = $("#autoSpin").is(":checked");
if (isChecked) {
$("#waitTimeInput").show();
} else {
$("#waitTimeInput").hide();
}
krpano.set("autorotate.enabled", isChecked);
krpano.set("autorotate.waittime", $("#waitTime").val());
krpano.get("scene").getArray().forEach(function (scene) {
sceneList[scene.index].autorotate = {enabled: $("#autoSpin").is(":checked"), waitTime: $("#waitTime").val()};
});
$("#isEdited").text('保存*');
}
function updateFov() {
var fov = $("#initFov").val();
var fovMax = $("#initFovMax").val();
var fovMin = $("#initFovMin").val();
if (fov == "" || Number(fov) > 180 || Number(fov) < 0) {
$("#initFov").val(krpano.get("view.fov").toFixed(0));
return
}
if (fovMax == "" || Number(fovMax) > 180 || Number(fovMax) < 0) {
$("#initFovMax").val(krpano.get("view.fovmax").toFixed(0));
return
}
if (fovMin == "" || Number(fovMin) > 180 || Number(fovMin) < 0) {
$("#initFovMin").val(krpano.get("view.fovmin").toFixed(0));
return
}
krpano.set("view.fov", fov);
krpano.set("view.fovmax", fovMax);
krpano.set("view.fovmin", fovMin);
sceneList[currentSceneIndex].fov = fov;
sceneList[currentSceneIndex].fovmax = fovMax;
sceneList[currentSceneIndex].fovmin = fovMin;
updatePbLine();
$("#isEdited").text('保存*');
}
function fovForAll() {
sceneList.forEach(function (eachScene) {
eachScene.fov = $("#initFov").val();
eachScene.fovmax = $("#initFovMax").val();
eachScene.fovmin = $("#initFovMin").val();
});
$("#isEdited").text('保存*');
alert("操作成功");
}
function updatePbLine() {
//视角条
var startPx = Number(krpano.get("view.fovmin")) / 0.9;
var widthPx = Number(krpano.get("view.fovmax")) / 0.9 - startPx;
var currPx = Number(krpano.get("view.fov")) / 0.9 - startPx - 10;
$(".triangle-down").css("margin-left", currPx.toFixed(0) + "px");
$(".number-pb-shown").css("left", startPx.toFixed(0) + "px").css("width", widthPx.toFixed(0) + "px").show();
}
function initPbLineEvent() {
$(".triangle-down").unbind("mousedown").mousedown(function () {
pbX = krpano.get("mouse.x");
canDownMove = true;
}).unbind("mousemove").mousemove(function () {
if (canDownMove) {
moveDownLine();
}
});
$(".triangle-up-left").unbind("mousedown").mousedown(function () {
pbX = krpano.get("mouse.x");
canLeftMove = true;
}).unbind("mousemove").mousemove(function () {
if (canLeftMove) {
moveLeftLine();
}
});
$(".triangle-up-right").unbind("mousedown").mousedown(function () {
pbX = krpano.get("mouse.x");
canRightMove = true;
}).unbind("mousemove").mousemove(function () {
if (canRightMove) {
moveRightLine();
}
});
}
function moveDownLine() {
var startPx = Number(krpano.get("view.fovmin")) / 0.9;
var widthPx = Number(krpano.get("view.fovmax")) / 0.9 - startPx;
var leftPx = Number(krpano.get("view.fov")) / 0.9 - startPx - 10 + krpano.get("mouse.x") - pbX;
if (leftPx + 10 < 0) {
canDownMove = false;
leftPx = -10;
}
if (leftPx + 10 > widthPx) {
canDownMove = false;
leftPx = widthPx - 10;
}
pbX = krpano.get("mouse.x");
krpano.set("view.fov", (leftPx + 10 + startPx) * 0.9);
$(".triangle-down").css("margin-left", leftPx.toFixed(0) + "px");
$("#initFov").val(krpano.get("view.fov").toFixed(0));
sceneList[currentSceneIndex].fov = krpano.get("view.fov");
$("#isEdited").text('保存*');
}
function moveLeftLine() {
var startPx = Number(krpano.get("view.fovmin")) / 0.9 + krpano.get("mouse.x") - pbX;
var endPx = Number(krpano.get("view.fovmax")) / 0.9;
if (startPx < 0) {
startPx = 0;
canLeftMove = false;
}
if (endPx - startPx < 20) {
startPx = endPx - 20;
canLeftMove = false;
}
if (krpano.get("view.fov") < krpano.get("view.fovmin")) {
krpano.set("view.fov", krpano.get("view.fovmin"))
}
pbX = krpano.get("mouse.x");
krpano.set("view.fovmin", startPx * 0.9);
updatePbLine();
$("#initFovMin").val(krpano.get("view.fovmin").toFixed(0));
sceneList[currentSceneIndex].fovmin = krpano.get("view.fovmin");
$("#isEdited").text('保存*');
}
function moveRightLine() {
var startPx = Number(krpano.get("view.fovmin")) / 0.9;
var endPx = Number(krpano.get("view.fovmax")) / 0.9 + krpano.get("mouse.x") - pbX;
if (endPx > 200) {
endPx = 200;
canRightMove = false;
}
if (endPx - startPx < 20) {
endPx = startPx + 20;
canRightMove = false;
}
if (krpano.get("view.fov") > krpano.get("view.fovmax")) {
krpano.set("view.fov", krpano.get("view.fovmax"))
}
pbX = krpano.get("mouse.x");
krpano.set("view.fovmax", endPx * 0.9);
updatePbLine();
$("#initFovMax").val(krpano.get("view.fovmax").toFixed(0));
sceneList[currentSceneIndex].fovmax = krpano.get("view.fovmax");
$("#isEdited").text('保存*');
}
//提交表单修改模块
function updateHotSpotData() {
var hotSpotHTML;
var dataHotSpotList = {list: []};
//修改全局变量
var hotSpotData = [];
krpano.get("hotspot").getArray().forEach(function (everySpot) {
if (everySpot.name !== "vr_cursor" && everySpot.name !== 'webvr_prev_scene'
&& everySpot.name !== 'webvr_next_scene' && everySpot.name.indexOf('vrtooltip') == -1) {
//这里加判断过滤掉vrtooltip热点标签
dataHotSpotList.list.push(everySpot);
var hotSpot = {};
hotSpot.ath = everySpot.ath.toString();
hotSpot.atv = everySpot.atv.toString();
hotSpot.linkedscene = everySpot.linkedscene;
hotSpot.name = everySpot.name;
hotSpot.style = everySpot.style;
hotSpot.text = everySpot.text;
hotSpot.dive = everySpot.dive;
hotSpotData.push(hotSpot);
}
});
sceneList[currentSceneIndex].hotSpots = hotSpotData;
hotSpotHTML = template('tplHotSpotList', dataHotSpotList);
document.getElementById('hotSpotList').innerHTML = hotSpotHTML;
}
//数据保存并提交操作
function save() {
if ($("#isEdited").text() === '保存') {
return;
}
var postData = JSON.stringify(sceneList);
var panoramicId = $("#panoramicId").val();
var panoramicMaterialPicIds = $("#panoramicMaterialPicIds").val();
var tourUrlIds = $("#tourUrlIds").val();
var curWwwPath = window.document.location.href;
var pathName = window.document.location.pathname;
var pos = curWwwPath.indexOf(pathName);
var localhostPaht = curWwwPath.substring(0, pos);
var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
var prefix = localhostPaht + projectName + "/a";
alert(postData);
alert(panoramicId);
alert(tourUrlIds);
alert(prefix);
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
url: prefix + "/hnly/panoramic/vtourSave?panoramicId=" + panoramicId + "&tourUrlIds=" + tourUrlIds,
data: postData,
success: function (data) {
alert(data);
if (data === "保存成功") {
$("#isEdited").text('保存');
}
},
error: function () {
alert("系统错误");
}
});
}
//热点移动模块
function autoMove() {
krpano.call("screentosphere(mouse.x, mouse.y, mouseath, mouseatv);");
krpano.set("hotspot[" + movingSpot.name + "].ath", krpano.get("mouseath") + movingSpot.athDis);
krpano.set("hotspot[" + movingSpot.name + "].atv", krpano.get("mouseatv") + movingSpot.atvDis);
krpano.set("hotspot[vrtooltip_" + movingSpot.name + "].ath", krpano.get("mouseath") + movingSpot.athDis);
krpano.set("hotspot[vrtooltip_" + movingSpot.name + "].atv", krpano.get("mouseatv") + movingSpot.atvDis);
}
//添加热点模块
function showAddHotSpot() {
$(".hot-style").removeClass("hot-style-on");
$(".hot-style").first().addClass("hot-style-on");
toAddHotSpot.style = $(".hot-style").first().attr("name");
toAddHotSpot.dive = true;
$(".my-open-out").css("background", "#00a3d8");
$(".my-open-in").removeClass("my-open-in-close").addClass("my-open-in-open");
$("#hotToolButton").hide();
$(".add-hot-pot").show();
$("#selectStyle").show();
$("#goToScene").hide();
$("#writeTitle").hide();
$("#selectStyleTitle").addClass("progress-title-on");
$("#goToSceneTitle").removeClass("progress-title-on");
$("#writeTitleTitle").removeClass("progress-title-on");
}
//隐藏添加热点窗口
function hideAddHotSpot() {
window.clearInterval(moveIntervalId);
toAddHotSpot = {};
$(".add-hot-pot").hide();
$("span[data-target=#toolHot]").click();
}
//隐藏添加语音窗口
function hideAddVoice() {
$("div").remove(".radio-voice");
$("#add-voice").hide();
$("span[data-target=#toolVoice]").click();
}
function nextToSelectTargetScene() {
if (!toAddHotSpot.style) {
alert("请选择热点样式");
return
}
window.clearInterval(moveIntervalId);
// 目标场景列表
var targetSceneHTML;
var dataTargetScene = {list: []};
krpano.get("scene").getArray().forEach(function (scene) {
if (scene.name !== krpano.get('xml.scene')) {
dataTargetScene.list.push({name: scene.name, index: scene.index + 1})
}
});
targetSceneHTML = template('tplTargetScene', dataTargetScene);
document.getElementById('targetScene').innerHTML = targetSceneHTML;
$(".select-scene-div").removeClass("select-scene-div-on");
$(".select-scene-div").first().addClass("select-scene-div-on");
toAddHotSpot.linkedscene = $(".select-scene-div").first().attr("name");
$(".select-scene-div").unbind("click").click(function () {
toAddHotSpot.linkedscene = $(this).attr("name");
$(".select-scene-div").removeClass("select-scene-div-on");
$(this).addClass("select-scene-div-on");
});
$("#selectStyle").hide();
$("#goToScene").show();
$("#writeTitle").hide();
$("#goToSceneTitle").addClass("progress-title-on");
$("#selectStyleTitle").removeClass("progress-title-on");
$("#writeTitleTitle").removeClass("progress-title-on");
}
function nextToWriteTitle() {
if (!toAddHotSpot.linkedscene) {
alert("请选择目标场景");
return;
}
$("#addHotTitle").val(toAddHotSpot.linkedscene);
$("#selectStyle").hide();
$("#goToScene").hide();
$("#writeTitle").show();
$("#writeTitleTitle").addClass("progress-title-on");
$("#selectStyleTitle").removeClass("progress-title-on");
$("#goToSceneTitle").removeClass("progress-title-on");
}
//添加语音/音乐模块
function showAddVoice(){
$(".add-voice").show();
var postData = "";
var curWwwPath = window.document.location.href;
var pathName = window.document.location.pathname;
var pos = curWwwPath.indexOf(pathName);
var localhostPaht = curWwwPath.substring(0, pos);
var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
var prefix = localhostPaht + projectName + "/a";
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
url: prefix + "/hnly/panoramicMaterialMusic/getData",
data: postData,
success: function (data) {
var panoramicMaterialMusicLists = data.panoramicMaterialMusicList;
for(var i=0;i"
//$(""
//+ ""
+ ""
+ " "
+ ""
+ ""
//+ ""
//+ ""
+ ""
+ ""
).appendTo("#add-voice-frame");
}
},
error: function () {
alert("系统错误");
}
});
$("#isEdited").text('保存*');
}
//添加热点到场景列表中,关闭热点弹出窗口
function addHotSpot() {
// 计算中间位置的球面坐标
krpano.set("halfHeight", krpano.get("stageheight") / 2);
krpano.set("halfWidth", krpano.get("stagewidth") / 2);
krpano.call("screentosphere(halfWidth,halfHeight,init_h,init_v);");
var init_h = krpano.get("init_h");
var init_v = krpano.get("init_v");
//添加热点
var newHotSpotName = "spot" + new Date().getTime();
krpano.call("addhotspot(" + newHotSpotName + ");");
krpano.get("hotspot[" + newHotSpotName + "]").loadstyle(toAddHotSpot.style);
krpano.set("hotspot[" + newHotSpotName + "].ath", init_h);
krpano.set("hotspot[" + newHotSpotName + "].atv", init_v);
krpano.set("hotspot[" + newHotSpotName + "].text", $("#addHotTitle").val());
krpano.set("hotspot[" + newHotSpotName + "].linkedscene", toAddHotSpot.linkedscene);
krpano.set("hotspot[" + newHotSpotName + "].dive", toAddHotSpot.dive);
krpano.set("hotspot[" + newHotSpotName + "].onloaded", "add_all_the_time_tooltip_for_VR();");
hotSpotInitEvent(newHotSpotName);
updateHotSpotData();
$("#isEdited").text('保存*');
hideAddHotSpot();
$("span[data-target=#toolHot]").click();
}
//添加语音到场景列表中,关闭语音弹出窗口
function addVoice(){
var musicName;
var obj = document.getElementsByName("panoramicMaterialMusicId");
for(i=0; i
转载于:https://my.oschina.net/discussjava/blog/1535033