hotspot.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. /**
  2. * krpano 1.20 全景hotspot统一schema
  3. *
  4. *
  5. * */
  6. import config from '../config'
  7. const initState = {
  8. id: "",
  9. title: "",
  10. type: 0, // 热点大类型
  11. ath: 0,
  12. atv: 0,
  13. link: "",
  14. icon: "",
  15. visible: true,
  16. size: 0,
  17. style: {
  18. fontSize: 12,
  19. position: "top",
  20. isHover: false,
  21. borderColor: "",
  22. fillColor: "",
  23. textColor: "",
  24. isShowLine: "",
  25. isTextWrap: "",
  26. lineDirection: "",
  27. textDirection: "",
  28. textNumPerLine: "",
  29. duration: 0,
  30. frameNumber: 0,
  31. frameWidth: 0,
  32. }
  33. }
  34. //基本样式汇总
  35. const convertBaseStyle = (dest, origin) => {
  36. if (dest) {
  37. // normal
  38. dest.style.fontSize = origin.fontSize
  39. dest.style.position = origin.titlePosition
  40. if (origin && origin.titleDisplayMode == "always") {
  41. dest.visible = true
  42. }
  43. if (origin && origin.titleDisplayMode == "never") {
  44. dest.visible = false
  45. }
  46. dest.style.borderColor = '';
  47. dest.style.fillColor = 'rgba(0,0,0,0.8)';
  48. dest.style.textColor = 'rgba(255,255,255,1)';
  49. }
  50. //custom
  51. if (origin && origin.hotspotIconType === 'serial_frame') {
  52. dest.style.duration = origin.serialFrameInfo.duration
  53. dest.style.frameNumber = origin.serialFrameInfo.frameNumber
  54. dest.style.frameWidth = origin.serialFrameInfo.frameWidth
  55. }
  56. //custom
  57. if (origin && origin.hotspotIconType === 'personalized_tag') {
  58. dest.style.borderColor = origin.personalizedTagInfo.borderColor;
  59. dest.style.fillColor = origin.personalizedTagInfo.fillColor
  60. dest.style.isTextWrap = origin.personalizedTagInfo.isTextWrap
  61. dest.style.lineDirection = origin.personalizedTagInfo.lineDirection
  62. dest.style.textColor = origin.personalizedTagInfo.textColor
  63. dest.style.textDirection = origin.personalizedTagInfo.textDirection
  64. dest.style.textNumPerLine = origin.personalizedTagInfo.textNumPerLine
  65. }
  66. }
  67. const coverSystemIconPart = (origin) => {
  68. const duplicate = structuredClone(initState)
  69. duplicate.id = origin.name;
  70. duplicate.title = origin.hotspotTitle;
  71. duplicate.ath = origin.ath;
  72. duplicate.atv = origin.atv;
  73. duplicate.type = 0;
  74. duplicate.icon = origin.img || '';
  75. duplicate.link = origin.link || '';
  76. duplicate.size = origin.size;
  77. convertBaseStyle(duplicate, origin)
  78. return duplicate;
  79. }
  80. const coverImageconPart = (origin) => {
  81. const duplicate = structuredClone(initState)
  82. duplicate.id = origin.name;
  83. duplicate.title = origin.hotspotTitle;
  84. duplicate.ath = origin.ath;
  85. duplicate.atv = origin.atv;
  86. duplicate.type = 1;
  87. duplicate.icon = origin.customIconInfo.img || origin.img || '';
  88. duplicate.link = origin.link || '';
  89. duplicate.size = origin.size;
  90. convertBaseStyle(duplicate, origin)
  91. return duplicate;
  92. }
  93. const coverSerialFrame = (origin) => {
  94. const duplicate = structuredClone(initState);
  95. const defaultImage = config.getStaticResource('/panoassets/images/hotspot/image_place_holder.png');
  96. // console.log('defaultImage', defaultImage);
  97. duplicate.id = origin.name;
  98. duplicate.title = origin.hotspotTitle;
  99. duplicate.ath = origin.ath;
  100. duplicate.atv = origin.atv;
  101. duplicate.type = 2;
  102. duplicate.icon = origin.serialFrameInfo.img || defaultImage;
  103. duplicate.link = origin.link || '';
  104. duplicate.size = origin.size;
  105. convertBaseStyle(duplicate, origin)
  106. return duplicate;
  107. }
  108. const coverpersonalizedTag = (origin) => {
  109. const duplicate = structuredClone(initState);
  110. duplicate.id = origin.name;
  111. duplicate.title = origin.hotspotTitle;
  112. duplicate.ath = origin.ath;
  113. duplicate.atv = origin.atv;
  114. duplicate.type = 3;
  115. duplicate.link = origin.link || '';
  116. duplicate.size = origin.size;
  117. convertBaseStyle(duplicate, origin)
  118. return duplicate;
  119. }
  120. export const convertJQHotspot = (origin) => {
  121. const type = origin.hotspotIconType
  122. switch (type) {
  123. case 'system_icon':
  124. return coverSystemIconPart(origin);
  125. case 'custom_image':
  126. return coverImageconPart(origin);
  127. case 'serial_frame':
  128. return coverSerialFrame(origin);
  129. case 'personalized_tag':
  130. return coverpersonalizedTag(origin);
  131. default:
  132. return false;
  133. }
  134. }