123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133 |
- class initGlobeTest {
- constructor(SuperMap3D, container) {
- this.SuperMap3D = SuperMap3D;
- const { Scene, Globe, Cartesian3, Ellipsoid, SingleTileImageryProvider } =
- SuperMap3D;
- this.container = document.getElementById(container);
- this.element = document.createElement("div");
- this.element.className = "widget";
- this.container.appendChild(this.element);
- this.canvas = document.createElement("canvas");
- this.canvas.oncontextmenu = function () {
- return false;
- };
- this.canvas.onselectstart = function () {
- return false;
- };
- this.element.appendChild(this.canvas);
- this.scene = new Scene({
- canvas: this.canvas,
- });
- this.scene.pixelRatio = 1;
- this.scene.camera.constrainedAxis = Cartesian3.UNIT_Z;
- this.configureCameraFrustum();
- this.scene.globe = new Globe(Ellipsoid.WGS84);
- this.curCanvasClientWidth = 0;
- this.curCanvasClientHeight = 0;
- this.lastDevicePixelRatio = 0;
- SuperMap3D.requestAnimationFrame(this.render());
- }
- configurePixelRatio() {
- let pixelRatio = window.devicePixelRatio;
- this.scene.pixelRatio = pixelRatio;
- return pixelRatio;
- }
- computeWidthHeight(width, height, maxWidth, maxHeight) {
- let realCanvasWidth = width;
- let realCanvasHeight = height;
- if (realCanvasWidth > maxWidth || realCanvasHeight > maxHeight) {
- let scaleWidth = realCanvasWidth / maxWidth;
- let scaleHeight = realCanvasHeight / maxHeight;
- if (scaleWidth > scaleHeight) {
- realCanvasWidth = maxWidth;
- realCanvasHeight = (height / width) * maxWidth;
- } else {
- realCanvasWidth = (width / height) * maxHeight;
- realCanvasHeight = maxHeight;
- }
- }
- return {
- width: realCanvasWidth,
- height: realCanvasHeight,
- };
- }
- configureCanvasSize() {
- let width = this.canvas.clientWidth;
- let height = this.canvas.clientHeight;
- let pixelRatio = this.configurePixelRatio();
- this.curCanvasClientWidth = width;
- this.curCanvasClientHeight = height;
- width *= pixelRatio;
- height *= pixelRatio;
- let maxDrawingBufferWidth = 3840;
- let maxDrawingBufferHeight = 1080;
- let newWidthHeight = this.computeWidthHeight(
- width,
- height,
- maxDrawingBufferWidth,
- maxDrawingBufferHeight
- );
- this.canvas.width = newWidthHeight.width;
- this.canvas.height = newWidthHeight.height;
- this.lastDevicePixelRatio = window.devicePixelRatio;
- }
- configureCameraFrustum() {
- let width = this.canvas.width;
- let height = this.canvas.height;
- if (width !== 0 && height !== 0) {
- let frustum = this.scene.camera.frustum;
- if (frustum.aspectRatio) {
- frustum.aspectRatio = width / height;
- } else {
- frustum.top = frustum.right * (height / width);
- frustum.bottom = -frustum.top;
- }
- }
- }
- resize() {
- let width = this.canvas.clientWidth;
- let height = this.canvas.clientHeight;
- if (
- this.curCanvasClientWidth === width &&
- this.curCanvasClientHeight === height &&
- this.lastDevicePixelRatio === window.devicePixelRatio
- ) {
- return;
- }
- this.configureCanvasSize();
- this.configureCameraFrustum();
- }
- render() {
- this.resize();
- this.scene.initializeFrame();
- this.scene.render();
- SuperMap3D.requestAnimationFrame(this.render);
- }
- getname() {
- console.log("this.container", this.container);
- }
- test() {
- console.log("this.SuperMap3D", this.SuperMap3D);
- this.getname();
- }
- getVariable() {
- return this.scene;
- }
- }
|