initGlobe.js 3.5 KB

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