page3.html 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>全景标记设置(自定义参数)</title>
  6. <script src="js/three.js"></script>
  7. <script src="js/tpanorama.js"></script>
  8. <style>
  9. body {
  10. margin: 0;
  11. overflow: hidden;
  12. }
  13. </style>
  14. <script>
  15. var opt,s;
  16. window.onload = function () {
  17. opt = {
  18. container: 'set',//setting容器
  19. imgUrl: 'img/p3.png',
  20. width: '1000px',//指定宽度,高度自适应
  21. showGrid: true,//是否显示格网
  22. showPosition: true,//是否显示经纬度提示
  23. lableColor: '#9400D3',//标记颜色
  24. gridColor: '#48D1CC',//格网颜色
  25. lables: [
  26. {lon:-72.00,lat:9.00,text:'蓝窗户'},{lon:114.12,lat:69.48,text:'一片云彩'},{lon:132.48,lat:-12.24,text:'大海'}
  27. ],//标记 {lon:114,lat:38,text:'标记一'}
  28. addLable: false,//开启后双击添加标记 (必须开启经纬度提示)
  29. getLable: false,//开启后右键查询标记 (必须开启经纬度提示)
  30. deleteLbale:false//开启后中键删除(必须开启经纬度提示)
  31. };
  32. s = new tpanoramaSetting(opt);
  33. s.init();
  34. s.listen('dblclick',function (e) {
  35. var text = prompt("标记名称");
  36. if (text!=null && text!= undefined && text!="") {
  37. s.addLable(e,text);
  38. alert("添加标记:"+text+" 后台交互");
  39. }
  40. });
  41. s.listen('mousedown',function (e) {
  42. if (e.button == 2) {
  43. var p = s.getLable(e);
  44. if (p.lon!=null &&p.lon!=undefined&&p.lon!="" ) {
  45. alert("经度:" + p.lon + ",纬度:" + p.lat + ",名称:" + p.text +" 其他操作");
  46. }
  47. }
  48. });
  49. s.listen('mousedown',function (e) {
  50. if (e.button == 1) {
  51. var p = s.getLable(e);
  52. if (p.lon!=null &&p.lon!=undefined&&p.lon!="" ) {
  53. var c = confirm("您确认要删除该标记吗?");
  54. if (c) {
  55. s.delete(p);
  56. s.clean();
  57. s.init();
  58. alert("删除成功! 后台交互")
  59. }
  60. }
  61. }
  62. });
  63. };
  64. </script>
  65. </head>
  66. <body>
  67. <div id="set"></div>
  68. </body>
  69. </html>