page3.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>全景标记设置(自定义参数)</title>
  6. <script src="three.js"></script>
  7. <script src="/origin/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>