change Startup mode

.gitignore

@@ -0,0 +1,96 @@
+# kdiff3 ignore
+*.orig
+
+# maven ignore
+target/
+
+# eclipse ignore
+.settings/
+.project
+.classpath
+
+# idea ignore
+.idea/
+*.ipr
+*.iml
+*.iws
+
+# temp ignore
+*.log
+*.cache
+*.diff
+*.patch
+*.tmp
+
+# system ignore
+.DS_Store
+Thumbs.db
+
+# package ignore (optional)
+# *.jar
+# *.war
+# *.zip
+# *.tar
+# *.tar.gz
+
+# nodejs ignore
+node_modules/
+
+# RNX JSBUNDLE ignore
+bundle/
+
+# eslint-cache
+.eslintcache
+.vscode
+
+# 发布系统 node 版本太低
+package-lock.json
+# kdiff3 ignore
+*.orig
+
+# maven ignore
+target/
+
+# eclipse ignore
+.settings/
+.project
+.classpath
+
+# idea ignore
+.idea/
+*.ipr
+*.iml
+*.iws
+
+# temp ignore
+*.log
+*.cache
+*.diff
+*.patch
+*.tmp
+
+# system ignore
+.DS_Store
+Thumbs.db
+
+# package ignore (optional)
+# *.jar
+# *.war
+# *.zip
+# *.tar
+# *.tar.gz
+
+# nodejs ignore
+node_modules/
+
+# RNX JSBUNDLE ignore
+bundle/
+
+# eslint-cache
+.eslintcache
+.vscode
+
+# 发布系统 node 版本太低
+package-lock.json
+# 暂时不锁定版本
+yarn.lock

app.js

@@ -0,0 +1,45 @@
+var createError = require('http-errors');
+var express = require('express');
+var path = require('path');
+var cookieParser = require('cookie-parser');
+var logger = require('morgan');
+var cons = require('consolidate')
+
+var indexRouter = require('./routes/index');
+var usersRouter = require('./routes/users');
+
+var app = express();
+
+// view engine setup
+app.set('views', path.join(__dirname, 'views'));
+app.engine('html', cons.handlebars);
+app.set('view engine', 'html');
+
+app.use(logger('dev'));
+app.use(express.json());
+app.use(express.urlencoded({ extended: false }));
+app.use(cookieParser());
+app.use('/js', express.static(path.join(__dirname, '/js')));
+app.use('/img', express.static(path.join(__dirname, '/img')));
+app.use(express.static(path.join(__dirname, 'views')));
+
+app.use('/', indexRouter);
+app.use('/users', usersRouter);
+
+// catch 404 and forward to error handler
+app.use(function (req, res, next) {
+  next(createError(404));
+});
+
+// error handler
+app.use(function (err, req, res, next) {
+  // set locals, only providing error in development
+  res.locals.message = err.message;
+  res.locals.error = req.app.get('env') === 'development' ? err : {};
+
+  // render the error page
+  res.status(err.status || 500);
+  res.render('error');
+});
+
+module.exports = app;

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "tpanorama",
+  "version": "1.0.2",
+  "description": "全景标记，全景生成插件",
+  "scripts": {
+    "start": "node ./server/www"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ConardLi/tpanorama.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/ConardLi/tpanorama/issues"
+  },
+  "homepage": "https://github.com/ConardLi/tpanorama#readme",
+  "dependencies": {
+    "consolidate": "^0.15.1",
+    "cookie-parser": "~1.4.3",
+    "debug": "~2.6.9",
+    "ejs": "~2.5.7",
+    "express": "~4.16.0",
+    "handlebars": "^4.0.12",
+    "http-errors": "~1.6.2",
+    "morgan": "~1.9.0"
+  }
+}

routes/index.js

@@ -0,0 +1,9 @@
+var express = require('express');
+var router = express.Router();
+
+/* GET home page. */
+router.get('/', function (req, res, next) {
+  res.render('index');
+});
+
+module.exports = router;

server/www

@@ -0,0 +1,90 @@
+#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+var app = require('../app');
+var debug = require('debug')('express-test:server');
+var http = require('http');
+
+/**
+ * Get port from environment and store in Express.
+ */
+
+var port = normalizePort(process.env.PORT || '3000');
+app.set('port', port);
+
+/**
+ * Create HTTP server.
+ */
+
+var server = http.createServer(app);
+
+/**
+ * Listen on provided port, on all network interfaces.
+ */
+
+server.listen(port);
+server.on('error', onError);
+server.on('listening', onListening);
+
+/**
+ * Normalize a port into a number, string, or false.
+ */
+
+function normalizePort(val) {
+  var port = parseInt(val, 10);
+
+  if (isNaN(port)) {
+    // named pipe
+    return val;
+  }
+
+  if (port >= 0) {
+    // port number
+    return port;
+  }
+
+  return false;
+}
+
+/**
+ * Event listener for HTTP server "error" event.
+ */
+
+function onError(error) {
+  if (error.syscall !== 'listen') {
+    throw error;
+  }
+
+  var bind = typeof port === 'string'
+    ? 'Pipe ' + port
+    : 'Port ' + port;
+
+  // handle specific listen errors with friendly messages
+  switch (error.code) {
+    case 'EACCES':
+      console.error(bind + ' requires elevated privileges');
+      process.exit(1);
+      break;
+    case 'EADDRINUSE':
+      console.error(bind + ' is already in use');
+      process.exit(1);
+      break;
+    default:
+      throw error;
+  }
+}
+
+/**
+ * Event listener for HTTP server "listening" event.
+ */
+
+function onListening() {
+  var addr = server.address();
+  var bind = typeof addr === 'string'
+    ? 'pipe ' + addr
+    : 'port ' + addr.port;
+  debug('Listening on ' + bind);
+}

views/index.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8">
+    <title>全景展示</title>
+    <script src="/js/three.js"></script>
+    <script src="/js/tpanorama.js"></script>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+        }
+
+        #panoramaConianer {
+            overflow: hidden;
+            position: absolute;
+            height: 100%;
+            width: 90%;
+        }
+
+        #tool {
+            position: absolute;
+            right: 0px;
+            width: 10%;
+            height: 100%;
+            background-color: cadetblue;
+            color: white;
+        }
+    </style>
+
+    <script>
+        var opt, tp;
+        window.onload = function () {
+            opt = {
+                container: 'panoramaConianer',//容器
+                url: 'img/p3.png',
+                lables: [
+                    { position: { lon: -72.00, lat: 9.00 }, logoUrl: '', text: '蓝窗户' },
+                    { position: { lon: 114.12, lat: 69.48 }, logoUrl: '', text: '一片云彩' },
+                    { position: { lon: 132.48, lat: -12.24 }, logoUrl: '', text: '大海' }
+                ],
+                widthSegments: 60,//水平切段数
+                heightSegments: 40,//垂直切段数（值小粗糙速度快，值大精细速度慢）
+                pRadius: 1000,//全景球的半径，推荐使用默认值
+                minFocalLength: 6,//镜头最a小拉近距离
+                maxFocalLength: 100,//镜头最大拉近距离
+                showlable: 'show' // show,click
+            }
+            tp = new tpanorama(opt);
+            tp.init();
+        }
+
+        function changeImg(name) {
+            opt.lables = [];
+            if (name == "p1") {
+                opt.lables = [{ position: { lon: 178.56, lat: -15.84 }, text: '神像' }]
+            }
+            if (name == "p2") {
+                opt.lables = [{ position: { lon: -80.64, lat: -16.92 }, text: '蓝色' }, { position: { lon: 46.80, lat: 10.44 }, text: '绿色' }]
+            }
+            if (name == "p4") {
+                opt.lables = [{ position: { lon: 48.96, lat: -20.16 }, text: '樱花' }]
+            }
+            opt.url = 'img/' + name + '.png';
+            tp.clean();
+            tp.config(opt);
+            tp.init();
+        }
+
+    </script>
+</head>
+
+<body>
+
+    <div id="panoramaConianer"></div>
+
+    <div id="tool">
+        </br>
+        </br>
+        <button onclick="changeImg('p1')">图1</button>
+        </br>
+        </br>
+        <button onclick="changeImg('p2')">图2</button>
+        </br>
+        </br>
+        <button onclick="changeImg('p4')">图4</button>
+        </br>
+        </br>
+    </div>
+
+</body>
+
+</html>

views/page1.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <meta charset="UTF-8">
+    <title>全景展示</title>
+    <script src="/js/three.js"></script>
+    <script src="/js/tpanorama.js"></script>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+        }
+
+        #panoramaConianer {
+            overflow: hidden;
+            position: absolute;
+            height: 100%;
+            width: 90%;
+        }
+
+        #tool {
+            position: absolute;
+            right: 0px;
+            width: 10%;
+            height: 100%;
+            background-color: cadetblue;
+            color: white;
+        }
+    </style>
+
+    <script>
+        var opt, tp;
+        window.onload = function () {
+            opt = {
+                container: 'panoramaConianer',//容器
+                url: 'img/p3.png',
+                lables: [
+                    { position: { lon: -72.00, lat: 9.00 }, logoUrl: '', text: '蓝窗户' },
+                    { position: { lon: 114.12, lat: 69.48 }, logoUrl: '', text: '一片云彩' },
+                    { position: { lon: 132.48, lat: -12.24 }, logoUrl: '', text: '大海' }
+                ],
+                widthSegments: 60,//水平切段数
+                heightSegments: 40,//垂直切段数（值小粗糙速度快，值大精细速度慢）
+                pRadius: 1000,//全景球的半径，推荐使用默认值
+                minFocalLength: 6,//镜头最a小拉近距离
+                maxFocalLength: 100,//镜头最大拉近距离
+                showlable: 'show' // show,click
+            }
+            tp = new tpanorama(opt);
+            tp.init();
+        }
+
+        function changeImg(name) {
+            opt.lables = [];
+            if (name == "p1") {
+                opt.lables = [{ position: { lon: 178.56, lat: -15.84 }, text: '神像' }]
+            }
+            if (name == "p2") {
+                opt.lables = [{ position: { lon: -80.64, lat: -16.92 }, text: '蓝色' }, { position: { lon: 46.80, lat: 10.44 }, text: '绿色' }]
+            }
+            if (name == "p4") {
+                opt.lables = [{ position: { lon: 48.96, lat: -20.16 }, text: '樱花' }]
+            }
+            opt.url = 'img/' + name + '.png';
+            tp.clean();
+            tp.config(opt);
+            tp.init();
+        }
+
+    </script>
+</head>
+
+<body>
+
+    <div id="panoramaConianer"></div>
+
+    <div id="tool">
+        </br>
+        </br>
+        <button onclick="changeImg('p1')">图1</button>
+        </br>
+        </br>
+        <button onclick="changeImg('p2')">图2</button>
+        </br>
+        </br>
+        <button onclick="changeImg('p4')">图4</button>
+        </br>
+        </br>
+    </div>
+
+</body>
+
+</html>

views/page2.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>全景标记设置(自动参数)</title>
+    <script src="js/three.js"></script>
+    <script src="js/tpanorama.js"></script>
+
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+        }
+
+    </style>
+
+    <script>
+        var opt,s;
+        window.onload = function () {
+            //默认参数
+             opt = {
+                container: 'set',//setting容器
+                imgUrl: 'img/p3.png',
+                width: '1000px',//指定宽度，高度自适应
+                showGrid: true,//是否显示格网
+                showPosition: true,//是否显示经纬度提示
+                lableColor: '#9400D3',//标记颜色
+                gridColor: '#48D1CC',//格网颜色
+                lables: [
+                    {lon:-72.00,lat:9.00,text:'蓝窗户'},{lon:114.12,lat:69.48,text:'一片云彩'},{lon:132.48,lat:-12.24,text:'大海'}
+                    ],//标记   {lon:114,lat:38,text:'标记一'}
+                addLable: true,//开启后双击添加标记  (必须开启经纬度提示)
+                getLable: true,//开启后右键查询标记  (必须开启经纬度提示)
+                deleteLbale:true//开启后中键删除(必须开启经纬度提示)
+            };
+            s = new tpanoramaSetting(opt);
+            s.init();
+        }
+        function getAll () {
+            var arr =  s.getAllLables();
+            var str =  "";
+            for(var i in arr){
+                str += "</br>" + "经度："+arr[i].lon+",纬度："+arr[i].lat+",标记："+arr[i].text ;
+            }
+            document.getElementById('info').innerHTML = str;
+        }
+
+        function changeImg(name) {
+            if (name == "p1"){
+                opt.lables = [{lon:178.56,lat:-15.84,text:'神像'}]
+            }
+            if (name == "p2"){
+                opt.lables = [{lon:-80.64,lat:-16.92,text:'蓝色'},{lon:46.80,lat:10.44,text:'绿色'}]
+            }
+            if (name == "p4"){
+                opt.lables = [{lon:48.96,lat:-20.16,text:'樱花'}]
+            }
+            opt.imgUrl = 'img/'+name+'.png';
+            s.clean();
+            s.config(opt);
+            s.init();
+        }
+
+
+    </script>
+</head>
+<body>
+
+<div id="set"></div>
+
+</br>
+
+<button onclick="getAll()">获取所有标记</button>
+&nbsp;&nbsp;
+<button onclick="changeImg('p1')">图1</button>
+&nbsp;&nbsp;
+<button onclick="changeImg('p2')">图2</button>
+&nbsp;&nbsp;
+<button onclick="changeImg('p4')">图4</button>
+
+</br>
+
+<div id="info"></div>
+
+</body>
+</html>

views/page3.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>全景标记设置(自定义参数)</title>
+    <script src="js/three.js"></script>
+    <script src="js/tpanorama.js"></script>
+
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+        }
+    </style>
+
+    <script>
+        var opt, s;
+        window.onload = function () {
+            opt = {
+                container: 'set',//setting容器
+                imgUrl: 'img/p3.png',
+                width: '1000px',//指定宽度，高度自适应
+                showGrid: true,//是否显示格网
+                showPosition: true,//是否显示经纬度提示
+                lableColor: '#9400D3',//标记颜色
+                gridColor: '#48D1CC',//格网颜色
+                lables: [
+                    { lon: -72.00, lat: 9.00, text: '蓝窗户' }, { lon: 114.12, lat: 69.48, text: '一片云彩' }, { lon: 132.48, lat: -12.24, text: '大海' }
+                ],//标记   {lon:114,lat:38,text:'标记一'}
+                addLable: false,//开启后双击添加标记  (必须开启经纬度提示)
+                getLable: false,//开启后右键查询标记  (必须开启经纬度提示)
+                deleteLbale: false//开启后中键删除(必须开启经纬度提示)
+            };
+            s = new tpanoramaSetting(opt);
+            s.init();
+            s.listen('dblclick', function (e) {
+                var text = prompt("标记名称");
+                if (text != null && text != undefined && text != "") {
+                    s.addLable(e, text);
+                    alert("添加标记：" + text + " 后台交互");
+                }
+            });
+            s.listen('mousedown', function (e) {
+                if (e.button == 2) {
+                    var p = s.getLable(e);
+                    if (p.lon != null && p.lon != undefined && p.lon != "") {
+                        alert("经度：" + p.lon + ",纬度：" + p.lat + ",名称：" + p.text + "   其他操作");
+                    }
+                }
+            });
+            s.listen('mousedown', function (e) {
+                if (e.button == 1) {
+                    var p = s.getLable(e);
+                    if (p.lon != null && p.lon != undefined && p.lon != "") {
+                        var c = confirm("您确认要删除该标记吗？");
+                        if (c) {
+                            s.delete(p);
+                            s.clean();
+                            s.init();
+                            alert("删除成功！   后台交互")
+                        }
+                    }
+                }
+            });
+        };
+
+
+    </script>
+</head>
+
+<body>
+
+    <div id="set"></div>
+
+
+</body>
+
+</html>