Krpano 二维全景图项目开发记录

2017-12-12 12:05:04来源:oschina作者:华山猛男人点击

分享

Krpano是一款全景开发插件,废话就不多说了,这篇文章用于记录Krpano后台集成开发,即将该插件应用到后台系统中,上传全景图片后,可自动生成全景,同时可以在场景编辑器中自定义路线、语音等,简化了全景开发的复杂性。



官方网站

https://krpano.com

参考案例

http://www.krpano.tech/

Krpano 二维全景图项目开发记录


全景图嵌入式开发


服务器端数据处理


全景图场景编辑器


全景图数据文件生成


全景图数据文件回显-涉及添加多个全景(*重要)

Tour代码模块


动态统一代码模板(tour.xml.jsp)


<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<%@ 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 PanoramicMaterialPic pmp = panoramic.getPanoramicMaterialPicList().get(i);
tourUrls = tourUrls + "," + pmp.getTourUrl();
// panoramicMaterialPicIds = panoramicMaterialPicIds + pmp.getId() + ",";
// if((i+1)==panoramic.getPanoramicMaterialPicList().size()){
// panoramicMaterialPicIds = panoramicMaterialPicIds.substring(0, panoramicMaterialPicIds.length()-1);
// }
}
String[] tourUrlsTemp = tourUrls.split(","); //页面选中的场景数组数据
List panoramicPicViewList = panoramicPicViewService.findListByPanoramicId(panoramic.getId());
// ===== 存在代码修改数据,检查有无新增数据,有则添加codeView代码原始模块
if(null != panoramicPicViewList && panoramicPicViewList.size()>0){
String[] tourUrlsExist = new String[panoramicPicViewList.size()];
for(int i=0;i tourUrlsExist[i] = panoramicPicViewList.get(i).getTourUrl();
}
List 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 tourUrlsExist[i] = panoramicPicHotspotsList.get(i).getTourUrl();
}
List 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("<?xml version=/"1.0/" encoding=/"UTF-8/" standalone=/"yes/"?>/r/n");
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 PanoramicPicView panoramicPicView = panoramicPicViewList.get(i);
String sceneName = panoramicPicView.getTourUrl();
String codeView = panoramicPicView.getCode();
sb.append(" for(int j=0;j PanoramicPicMusic panoramicPicMusic = panoramicPicMusicList.get(j);
if(sceneName.equals(panoramicPicMusic.getTourUrl())){
sb.append(panoramicPicMusic.getCode() +" ");
break;
}
}
sb.append("lat=/"/" lng=/"/" heading=/"/">/r/n");
sb.append(codeView);
sb.append("/r/n");
sb.append("/r/n");
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 PanoramicPicHotspots hotspots = panoramicPicHotspotsList.get(j);
sb.append(hotspots.getCode());
System.out.println(hotspots.getCode());
}
sb.append("
/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("<?xml version=/"1.0/" encoding=/"UTF-8/" standalone=/"yes/"?>/r/n");
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 String sceneName = tourUrlIdsData[i];
sb.append(" for(int j=0;j KrpanoView kv = krpanoViewList.get(j);
if(kv.getName().equals(sceneName) && null != kv.getBgmusic()){
String codeMusic = "bgmusic=/"" + kv.getBgmusic() + "/" ";
sb.append(codeMusic);
iMap.clear();
iMap.put("panoramicId", panoramic.getId());
iMap.put("tourUrl", sceneName);
PanoramicPicMusic panoramicPicMusic = panoramicPicMusicService.findByPanoramicIdAndTourUrl(iMap);
if(null == panoramicPicMusic){
panoramicPicMusic = new PanoramicPicMusic();
panoramicPicMusic.setPanoramic(panoramic);
panoramicPicMusic.setTourUrl(sceneName);
}
panoramicPicMusic.setCode(codeMusic);
panoramicPicMusicService.save(panoramicPicMusic);
break;
}
}
sb.append("lat=/"/" lng=/"/" heading=/"/">/r/n");
for(int j=0;j KrpanoView kv = krpanoViewList.get(j);
// System.out.println(kv.getName());

if(kv.getName().equals(sceneName)){
if(null != kv.getInitH() && null != kv.getInitV() && null != kv.getFov()){
viewCode = "/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");
sb.append("/r/n");
sb.append("/r/n");
for(int j=0;j KrpanoView kv = krpanoViewList.get(j);
if(kv.getName().equals(sceneName)){
for(KrpanoHotspots hotspots : kv.getHotSpots()){
if(hotspots.getName().indexOf("vrtooltip") != -1) continue;
String codeHotspots = "/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 PanoramicPicHotspots hotspots = panoramicPicHotspotsList.get(k);
sb.append(hotspots.getCode());
System.out.println(hotspots.getCode());
}
}
}
sb.append("
/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;
}
}

全景编辑器


tour_editor_custom.jsp


<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>



全景高级编辑DEMO



































  • 视角




    onclick="autoSpinClick()"/>


































    onclick="fovForAll()"/>





  • 热点


    热点类型





    热点列表











  • 音乐


    音乐类型






    音乐列表

















场景选择











添加全景切换热点×


选择样式

选择目标场景

填写title



俯冲效果:







name="skin_hotspotstyle">


下一步







下一步







完成




添加背景语音/音乐×











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 //alert(JSON.stringify(panoramicMaterialMusicLists[i].id));

$("
"
//$("
"
//+ "
"
+ "
"
+ " "
+ "
"
+ "
"
//+ "
"
//+ ""

+ "
"
+ "
"
).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 if(obj[i].checked){
musicName=obj[i].value;
updateVoice(obj[i].id);
krpano.get("scene").getItem(currentSceneIndex).bgmusic= obj[i].id;
sceneList[currentSceneIndex].bgmusic=obj[i].value;
}
}

hideAddVoice();
}
function updateVoice(musicName){
var bgMusicHTML;
var dataBgMusicList = {list: []};
dataBgMusicList.list.push({name: musicName});
bgMusicHTML = template('tplBgMusicList', dataBgMusicList);
document.getElementById('bgMusicList').innerHTML = bgMusicHTML;
}//热点选择模块
function selectHotSpot() {
krpano.call("screentosphere(mouse.x, mouse.y, mouseath, mouseatv);");
var nearHotSpot = {};
krpano.get("hotspot").getArray().forEach(function (thisHotSpot) {
var thisAthDis = krpano.get("hotspot[" + thisHotSpot.name + "]").ath - krpano.get("mouseath");
var thisAtvDis = krpano.get("hotspot[" + thisHotSpot.name + "]").atv - krpano.get("mouseatv");
var thisDis = Math.abs(thisAthDis) + Math.abs(thisAtvDis);
if (!nearHotSpot.name) {
nearHotSpot = {name: thisHotSpot.name, athDis: thisAthDis, atvDis: thisAtvDis, dis: thisDis};
} else {
if (thisDis < nearHotSpot.dis) {
nearHotSpot = {name: thisHotSpot.name, athDis: thisAthDis, atvDis: thisAtvDis, dis: thisDis};
}
}
});
return nearHotSpot;
}
//热点初始化事件
function hotSpotInitEvent(spotName) {
krpano.get("hotspot[" + spotName + "]").ondown = function () {
movingSpot = selectHotSpot();
var intervalId = setInterval(autoMove, 1000.0 / 30.0);
krpano.set("autoMoveIntervalId", intervalId);
canShowLeft = false;
};
krpano.get("hotspot[" + spotName + "]").onup = function () {
window.clearInterval(krpano.get("autoMoveIntervalId"));
movingSpot = {};
updateHotSpotData();
canShowLeft = true;
$("#isEdited").text('保存*');
};
krpano.get("hotspot[" + spotName + "]").onclick = null;
krpano.get("hotspot[" + spotName + "]").onover = function () {
if (movingSpot === {}) {
var currentSpot = selectHotSpot();
$("[name=" + currentSpot.name + "Hover]").addClass("hot-spot-list-hover");
}
};
krpano.get("hotspot[" + spotName + "]").onout = function () {
$(".hot-spot-list").removeClass("hot-spot-list-hover");
};
}
//去除热点
function removeHotSpot(name) {
krpano.call("removehotspot(" + name + ")");
updateHotSpotData();
$("#isEdited").text('保存*');
}
//去除背景音乐
function removeBgMusic(name) {
var bgMusicHTML;
var dataBgMusicList = {list: []};
bgMusicHTML = template('tplBgMusicList', dataBgMusicList);
document.getElementById('bgMusicList').innerHTML = bgMusicHTML;
$("#isEdited").text('保存*');krpano.get("scene").getItem(currentSceneIndex).bgmusic= null;
sceneList[currentSceneIndex].bgmusic=null;
}

相关文章

    无相关信息

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台