test.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. class initGlobeTest {
  2. constructor(SuperMap3D, container) {
  3. this.SuperMap3D = SuperMap3D;
  4. const { Scene, Globe, Cartesian3, Ellipsoid, SingleTileImageryProvider } =
  5. SuperMap3D;
  6. this.container = document.getElementById(container);
  7. this.element = document.createElement("div");
  8. this.element.className = "widget";
  9. this.container.appendChild(this.element);
  10. this.canvas = document.createElement("canvas");
  11. this.canvas.oncontextmenu = function () {
  12. return false;
  13. };
  14. this.canvas.onselectstart = function () {
  15. return false;
  16. };
  17. this.element.appendChild(this.canvas);
  18. this.scene = new Scene({
  19. canvas: this.canvas,
  20. });
  21. this.scene.pixelRatio = 1;
  22. this.scene.camera.constrainedAxis = Cartesian3.UNIT_Z;
  23. this.configureCameraFrustum();
  24. this.scene.globe = new Globe(Ellipsoid.WGS84);
  25. this.curCanvasClientWidth = 0;
  26. this.curCanvasClientHeight = 0;
  27. this.lastDevicePixelRatio = 0;
  28. SuperMap3D.requestAnimationFrame(this.render());
  29. }
  30. configurePixelRatio() {
  31. let pixelRatio = window.devicePixelRatio;
  32. this.scene.pixelRatio = pixelRatio;
  33. return pixelRatio;
  34. }
  35. computeWidthHeight(width, height, maxWidth, maxHeight) {
  36. let realCanvasWidth = width;
  37. let realCanvasHeight = height;
  38. if (realCanvasWidth > maxWidth || realCanvasHeight > maxHeight) {
  39. let scaleWidth = realCanvasWidth / maxWidth;
  40. let scaleHeight = realCanvasHeight / maxHeight;
  41. if (scaleWidth > scaleHeight) {
  42. realCanvasWidth = maxWidth;
  43. realCanvasHeight = (height / width) * maxWidth;
  44. } else {
  45. realCanvasWidth = (width / height) * maxHeight;
  46. realCanvasHeight = maxHeight;
  47. }
  48. }
  49. return {
  50. width: realCanvasWidth,
  51. height: realCanvasHeight,
  52. };
  53. }
  54. configureCanvasSize() {
  55. let width = this.canvas.clientWidth;
  56. let height = this.canvas.clientHeight;
  57. let pixelRatio = this.configurePixelRatio();
  58. this.curCanvasClientWidth = width;
  59. this.curCanvasClientHeight = height;
  60. width *= pixelRatio;
  61. height *= pixelRatio;
  62. let maxDrawingBufferWidth = 3840;
  63. let maxDrawingBufferHeight = 1080;
  64. let newWidthHeight = this.computeWidthHeight(
  65. width,
  66. height,
  67. maxDrawingBufferWidth,
  68. maxDrawingBufferHeight
  69. );
  70. this.canvas.width = newWidthHeight.width;
  71. this.canvas.height = newWidthHeight.height;
  72. this.lastDevicePixelRatio = window.devicePixelRatio;
  73. }
  74. configureCameraFrustum() {
  75. let width = this.canvas.width;
  76. let height = this.canvas.height;
  77. if (width !== 0 && height !== 0) {
  78. let frustum = this.scene.camera.frustum;
  79. if (frustum.aspectRatio) {
  80. frustum.aspectRatio = width / height;
  81. } else {
  82. frustum.top = frustum.right * (height / width);
  83. frustum.bottom = -frustum.top;
  84. }
  85. }
  86. }
  87. resize() {
  88. let width = this.canvas.clientWidth;
  89. let height = this.canvas.clientHeight;
  90. if (
  91. this.curCanvasClientWidth === width &&
  92. this.curCanvasClientHeight === height &&
  93. this.lastDevicePixelRatio === window.devicePixelRatio
  94. ) {
  95. return;
  96. }
  97. this.configureCanvasSize();
  98. this.configureCameraFrustum();
  99. }
  100. render() {
  101. this.resize();
  102. this.scene.initializeFrame();
  103. this.scene.render();
  104. SuperMap3D.requestAnimationFrame(this.render);
  105. }
  106. getname() {
  107. console.log("this.container", this.container);
  108. }
  109. test() {
  110. console.log("this.SuperMap3D", this.SuperMap3D);
  111. this.getname();
  112. }
  113. getVariable() {
  114. return this.scene;
  115. }
  116. }