popup.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. /**
  2. * 3D场景气泡框
  3. * @constructor
  4. */
  5. class Popup {
  6. constructor(opt) {
  7. this._viewer = opt.viewer;
  8. this.element = opt.element; //dom or id
  9. this.position = opt.position; //Cartesian3
  10. this.pixelOffset = opt.pixelOffset || new SuperMap3D.Cartesian2(0, 0); //像素偏移
  11. this._show = opt.show || false;
  12. this.hideOnBehindGlobe = opt.hideOnBehindGlobe || false; // 是否在地球背面隐藏
  13. this.scaleByDistance = opt.scaleByDistance; //距离控制大小
  14. this.translucencyByDistance = opt.translucencyByDistance; //距离控制透明度
  15. this.distanceDisplayCondition = opt.distanceDisplayCondition; //距离控制显隐
  16. this.scratch = new SuperMap3D.Cartesian2();
  17. this.RemoveCallback = function () { }
  18. this.init(opt);
  19. }
  20. init(opt) {
  21. // 在SuperMap3D容器中添加元素
  22. if (typeof (opt.element) === "string") {
  23. this.element = document.getElementById(opt.element);
  24. }
  25. this.close();
  26. if (!this._viewer) {
  27. console.log('Popup :viewer is required!');
  28. return;
  29. }
  30. this.element.style.pointerEvents = 'none';
  31. this.element.style.transformOrigin = 'left bottom 0px'; //缩放中心点
  32. this._viewer._container.appendChild(this.element);
  33. this.setViewer();
  34. if(this.position) {
  35. setTimeout(()=>{this.setPosition(opt.position)},500)
  36. }
  37. };
  38. /**
  39. * 设置关联的SuperMap3D viewer
  40. * @param viewer
  41. */
  42. setViewer() {
  43. let _self = this;
  44. // 每一帧触发
  45. // _self.RemoveCallback = _self._viewer.scene.preRender.addEventListener(function () {
  46. // if (_self._show) {
  47. // _self.update()
  48. // }
  49. // });
  50. // 相机改变触发
  51. _self.RemoveCallback = _self._viewer.scene.camera.changed.addEventListener(function () {
  52. if (_self._show) {
  53. _self.update()
  54. }
  55. })
  56. };
  57. /**
  58. * 获取关联的SuperMap3D viewer
  59. * @return {SuperMap3D.Viewer}
  60. */
  61. getViewer() {
  62. return this._viewer;
  63. };
  64. /**
  65. * 设置位置
  66. * @param position{Array}
  67. */
  68. setPosition(position) {
  69. let _self = this;
  70. if (!position) {
  71. _self.close();
  72. return;
  73. }
  74. if (!_self.getViewer()) {
  75. return;
  76. }
  77. let canvasPosition = SuperMap3D.SceneTransforms.wgs84ToWindowCoordinates(_self.getViewer().scene,position, _self.scratch); // 笛卡尔坐标到画布坐标
  78. if (SuperMap3D.defined(canvasPosition)) {
  79. _self.element.style.top = canvasPosition.y + _self.pixelOffset.y + 'px';
  80. _self.element.style.left = canvasPosition.x + _self.pixelOffset.x + 'px';
  81. // _self.element.style.transform = `matrix(1, 0, 0, 1, ${canvasPosition.x + _self.pixelOffset.x}, ${canvasPosition.y + _self.pixelOffset.y})`;
  82. _self.show();
  83. if (_self.hideOnBehindGlobe || _self.distanceDisplayCondition || _self.translucencyByDistance || _self.scaleByDistance) {
  84. let cameraPosition = _self.getViewer().scene.camera.position;
  85. let distance = SuperMap3D.Cartesian3.distance(cameraPosition, position);
  86. if (_self.hideOnBehindGlobe) {
  87. let height = _self.getViewer().scene.globe.ellipsoid.cartesianToCartographic(cameraPosition).height;
  88. height += _self.getViewer().scene.globe.ellipsoid.maximumRadius;
  89. if (!(distance > height)) {
  90. _self.element.style.display = "flex"
  91. } else {
  92. _self.element.style.display = "none"
  93. }
  94. }
  95. if (_self.distanceDisplayCondition) {
  96. if (distance < _self.distanceDisplayCondition.near || distance > _self.distanceDisplayCondition.far) {
  97. _self.element.style.opacity = 0;
  98. return;
  99. } else {
  100. _self.element.style.opacity = 1;
  101. }
  102. }
  103. if (_self.translucencyByDistance) {
  104. if (distance < _self.translucencyByDistance.near) {
  105. _self.element.style.opacity = _self.translucencyByDistance.nearValue;
  106. } else if (distance > _self.translucencyByDistance.far) {
  107. _self.element.style.opacity = _self.translucencyByDistance.farValue;
  108. } else {
  109. let val1 = _self.translucencyByDistance.farValue - _self.translucencyByDistance.nearValue;
  110. let val2 = _self.translucencyByDistance.far - _self.translucencyByDistance.near;
  111. let val3 = ((distance - _self.translucencyByDistance.near) / val2) * val1 + _self.translucencyByDistance.nearValue;
  112. _self.element.style.opacity = val3;
  113. }
  114. }
  115. if (_self.scaleByDistance) {
  116. if (distance < _self.scaleByDistance.near) {
  117. let val = _self.scaleByDistance.nearValue;
  118. _self.element.style.transform = `scale(${val}, ${val})`;
  119. } else if (distance > _self.scaleByDistance.far) {
  120. let val = _self.scaleByDistance.farValue;
  121. _self.element.style.transform = `scale(${val}, ${val})`;
  122. } else {
  123. let val1 = _self.scaleByDistance.farValue - _self.scaleByDistance.nearValue;
  124. let val2 = _self.scaleByDistance.far - _self.scaleByDistance.near;
  125. let val3 = ((distance - _self.scaleByDistance.near) / val2) * val1 + _self.scaleByDistance.nearValue;
  126. _self.element.style.transform = `scale(${val3}, ${val3})`;
  127. }
  128. }
  129. }
  130. }
  131. _self.position = position;
  132. };
  133. update() {
  134. this.setPosition(this.position);
  135. };
  136. getPosition() {
  137. return this.position;
  138. };
  139. close() {
  140. this.element.style.opacity = 0;
  141. this._show = false;
  142. };
  143. show() {
  144. this.element.style.opacity = 1;
  145. this._show = true;
  146. };
  147. destroy() {
  148. this.RemoveCallback();
  149. this.close();
  150. this._viewer.container.removeChild(this.element);
  151. }
  152. }
  153. window.Popup = Popup;