@things-factory/weather 9.0.0-9.0.0-beta.59.0

package/dist-client/bootstrap.d.ts

@@ -0,0 +1 @@
+export default function bootstrap(): void;

package/dist-client/bootstrap.js

@@ -0,0 +1,2 @@
+export default function bootstrap() { }
+//# sourceMappingURL=bootstrap.js.map

package/dist-client/bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,SAAS,KAAI,CAAC","sourcesContent":["export default function bootstrap() {}\n"]}

package/dist-client/index.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=index.js.map

package/dist-client/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../client/index.ts"],"names":[],"mappings":"","sourcesContent":[""]}

package/dist-client/ol-components/webgl-canvas-layer.d.ts

@@ -0,0 +1,61 @@
+import ImageLayer from 'ol/layer/Image.js';
+import ImageCanvasSource from 'ol/source/ImageCanvas.js';
+/**
+ * WebGL을 사용하여 날씨 데이터 이미지를 지도에 오버레이하는 레이어
+ * 이미지의 RGBA 채널에는 온도, 습도, 바람, 강수량 데이터가 인코딩되어 있음
+ */
+declare class WebGLCanvasLayer extends ImageLayer<ImageCanvasSource> {
+    private canvas;
+    private gl;
+    private program;
+    private texture;
+    private buffer;
+    private imageLoaded;
+    private pendingRender;
+    private imageUrl;
+    private dataType;
+    /**
+     * WebGL 캔버스 레이어 생성자
+     * @param imageUrl 날씨 데이터가 인코딩된 이미지 URL
+     * @param dataType 시각화할 데이터 유형 (temperature, humidity, wind, precipitation)
+     */
+    constructor(imageUrl: string, dataType?: string);
+    /**
+     * 데이터 시각화 유형 변경
+     */
+    updateDataType(type: string): void;
+    /**
+     * 리소스 해제
+     */
+    dispose(): void;
+    /**
+     * 이미지 URL 업데이트
+     */
+    updateImageUrl(newUrl: string): void;
+    /**
+     * WebGL 컨텍스트 초기화
+     */
+    private _initializeWebGL;
+    /**
+     * 버텍스 버퍼 초기화
+     */
+    private _initializeBuffers;
+    /**
+     * 이미지 로드 및 텍스처 생성
+     */
+    private _loadImage;
+    /**
+     * 텍스처 렌더링
+     */
+    private _renderTexture;
+    /**
+     * 셰이더 프로그램 생성
+     */
+    private _createShaderProgram;
+    /**
+     * 셰이더 컴파일
+     */
+    private _compileShader;
+    private _updateWebGLUniforms;
+}
+export default WebGLCanvasLayer;

package/dist-client/ol-components/webgl-canvas-layer.js

@@ -0,0 +1,364 @@
+import ImageLayer from 'ol/layer/Image.js';
+import ImageCanvasSource from 'ol/source/ImageCanvas.js';
+import { transformExtent } from 'ol/proj.js';
+/**
+ * WebGL을 사용하여 날씨 데이터 이미지를 지도에 오버레이하는 레이어
+ * 이미지의 RGBA 채널에는 온도, 습도, 바람, 강수량 데이터가 인코딩되어 있음
+ */
+class WebGLCanvasLayer extends ImageLayer {
+    /**
+     * WebGL 캔버스 레이어 생성자
+     * @param imageUrl 날씨 데이터가 인코딩된 이미지 URL
+     * @param dataType 시각화할 데이터 유형 (temperature, humidity, wind, precipitation)
+     */
+    constructor(imageUrl, dataType = 'temperature') {
+        super({
+            source: new ImageCanvasSource({
+                canvasFunction: (extent, resolution, pixelRatio, size, projection) => {
+                    this._initializeWebGL(size, pixelRatio);
+                    if (this.gl && this.program) {
+                        // 현재 지도 뷰의 extent를 지리 좌표(EPSG:4326)로 변환
+                        const worldExtent = transformExtent(extent, projection.getCode(), 'EPSG:4326');
+                        // 이미지가 로드된 경우 렌더링
+                        if (this.imageLoaded && this.texture) {
+                            this._updateWebGLUniforms(worldExtent, resolution, size, pixelRatio);
+                            this._renderTexture(worldExtent, size, resolution, pixelRatio);
+                        }
+                        else if (!this.pendingRender) {
+                            this.pendingRender = true;
+                            this._loadImage(this.imageUrl, worldExtent, size, resolution, pixelRatio);
+                        }
+                    }
+                    return this.canvas;
+                },
+                projection: 'EPSG:3857'
+            })
+        });
+        this.canvas = null;
+        this.gl = null;
+        this.program = null;
+        this.texture = null;
+        this.buffer = null;
+        this.imageLoaded = false;
+        this.pendingRender = false;
+        this.imageUrl = imageUrl;
+        this.dataType = dataType;
+        this.on('change:visible', () => this.changed());
+    }
+    /**
+     * 데이터 시각화 유형 변경
+     */
+    updateDataType(type) {
+        this.dataType = type;
+        this.changed();
+    }
+    /**
+     * 리소스 해제
+     */
+    dispose() {
+        if (this.gl) {
+            if (this.buffer)
+                this.gl.deleteBuffer(this.buffer);
+            if (this.texture)
+                this.gl.deleteTexture(this.texture);
+            if (this.program)
+                this.gl.deleteProgram(this.program);
+        }
+        super.dispose();
+    }
+    /**
+     * 이미지 URL 업데이트
+     */
+    updateImageUrl(newUrl) {
+        if (this.imageUrl === newUrl)
+            return;
+        this.imageUrl = newUrl;
+        this.imageLoaded = false;
+        this.pendingRender = false;
+        if (this.texture && this.gl) {
+            this.gl.deleteTexture(this.texture);
+            this.texture = null;
+        }
+        this.changed();
+    }
+    /**
+     * WebGL 컨텍스트 초기화
+     */
+    _initializeWebGL(size, pixelRatio = 1) {
+        const width = Math.round(size[0] * pixelRatio);
+        const height = Math.round(size[1] * pixelRatio);
+        if (!this.canvas) {
+            // 캔버스 생성 및 WebGL 초기화
+            this.canvas = document.createElement('canvas');
+            this.canvas.width = width;
+            this.canvas.height = height;
+            this.gl = this.canvas.getContext('webgl', {
+                alpha: true,
+                antialias: false,
+                depth: false
+            });
+            if (!this.gl)
+                return;
+            this.program = this._createShaderProgram();
+            if (this.program) {
+                this._initializeBuffers();
+            }
+        }
+        else if (this.canvas.width !== width || this.canvas.height !== height) {
+            // 캔버스 크기 조정
+            this.canvas.width = width;
+            this.canvas.height = height;
+            if (this.gl)
+                this.gl.viewport(0, 0, width, height);
+        }
+    }
+    /**
+     * 버텍스 버퍼 초기화
+     */
+    _initializeBuffers() {
+        if (!this.gl)
+            return;
+        // 사각형 버텍스 (위치(x,y) + 텍스처 좌표(s,t))
+        const vertices = new Float32Array([
+            -1,
+            -1,
+            0,
+            1, // 좌하단
+            1,
+            -1,
+            1,
+            1, // 우하단
+            -1,
+            1,
+            0,
+            0, // 좌상단
+            1,
+            1,
+            1,
+            0 // 우상단
+        ]);
+        this.buffer = this.gl.createBuffer();
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW);
+    }
+    /**
+     * 이미지 로드 및 텍스처 생성
+     */
+    _loadImage(url, worldExtent, size, resolution, pixelRatio) {
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = () => {
+            if (!this.gl)
+                return;
+            try {
+                // 텍스처 생성 및 설정
+                this.texture = this.gl.createTexture();
+                this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
+                // 경도 방향으로 래핑 (날짜 변경선 처리)
+                // this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.REPEAT)
+                this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
+                this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+                this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
+                this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
+                // 텍스처 데이터 업로드
+                this.gl.pixelStorei(this.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false); // 알파값 손실 방지
+                this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, img);
+                this.imageLoaded = true;
+                this.pendingRender = false;
+                // 이미지 로드 후 렌더링
+                this._renderTexture(worldExtent, size, resolution, pixelRatio);
+                this.changed();
+            }
+            catch (err) {
+                console.error('텍스처 생성 실패:', err);
+                this.pendingRender = false;
+            }
+        };
+        img.onerror = () => {
+            console.error('이미지 로드 실패:', url);
+            this.pendingRender = false;
+        };
+        img.src = url;
+    }
+    /**
+     * 텍스처 렌더링
+     */
+    _renderTexture(worldExtent, size, resolution, pixelRatio) {
+        if (!this.gl || !this.program || !this.texture || !this.buffer)
+            return;
+        const gl = this.gl;
+        const width = Math.round(size[0] * pixelRatio);
+        const height = Math.round(size[1] * pixelRatio);
+        this._updateWebGLUniforms(worldExtent, resolution, size, pixelRatio);
+        // 기본 WebGL 상태 설정
+        gl.viewport(0, 0, width, height);
+        gl.clearColor(0, 0, 0, 0);
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        // 셰이더 프로그램 활성화
+        gl.useProgram(this.program);
+        // 텍스처 바인딩
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, this.texture);
+        // 유니폼 설정
+        const dataTypeVal = ['temperature', 'humidity', 'wind', 'precipitation'].indexOf(this.dataType);
+        gl.uniform1i(gl.getUniformLocation(this.program, 'u_texture'), 0);
+        gl.uniform1f(gl.getUniformLocation(this.program, 'u_opacity'), 0.8 * pixelRatio);
+        gl.uniform1i(gl.getUniformLocation(this.program, 'u_dataType'), dataTypeVal >= 0 ? dataTypeVal : 0);
+        gl.uniform4fv(gl.getUniformLocation(this.program, 'u_worldExtent'), new Float32Array([worldExtent[0], worldExtent[1], worldExtent[2], worldExtent[3]]));
+        // 버퍼 바인딩 및 속성 설정
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+        const a_position = gl.getAttribLocation(this.program, 'a_position');
+        const a_texCoord = gl.getAttribLocation(this.program, 'a_texCoord');
+        gl.enableVertexAttribArray(a_position);
+        gl.enableVertexAttribArray(a_texCoord);
+        gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 16, 0);
+        gl.vertexAttribPointer(a_texCoord, 2, gl.FLOAT, false, 16, 8);
+        // 사각형 렌더링
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    }
+    /**
+     * 셰이더 프로그램 생성
+     */
+    _createShaderProgram() {
+        if (!this.gl)
+            return null;
+        // 버텍스 셰이더: 지리 좌표와 텍스처 좌표 간 변환
+        const vertexShaderSource = `
+precision highp float;
+
+attribute vec4 a_position; // Rectangle coordinates
+attribute vec2 a_texCoord; // Texture coordinates
+varying vec2 v_texCoord;
+
+uniform vec2 u_resolution; // Resolution (meters per pixel)
+uniform vec2 u_offset; // Offset in map coordinates
+uniform float u_zoomResolution; // 🚀 This will store the resolution passed from JS
+
+void main() {
+  float x = ((a_position.x - u_offset.x * u_zoomResolution) / u_resolution.x) * 2.0 - 1.0;
+  float y = ((a_position.y - u_offset.y * u_zoomResolution) / u_resolution.y) * 2.0 - 1.0;
+
+  gl_Position = vec4(x, y, 0.0, 1.0);
+  v_texCoord = a_texCoord;
+}
+    `;
+        // 프래그먼트 셰이더: 데이터 시각화
+        const fragmentShaderSource = `
+      precision highp float;
+      
+      uniform sampler2D u_texture;
+      uniform float u_opacity;
+      uniform int u_dataType;
+      varying vec2 v_texCoord;
+      
+      // 색상 그라데이션 생성
+      vec3 getColorForData(float value) {
+        // 값 범위 확장
+        value = clamp(value * 1.2, 0.0, 1.0);
+        
+        if (u_dataType == 0) {  // 온도
+          // 파랑(저온) -> 빨강(고온)
+          return mix(vec3(0.0, 0.0, 1.0), vec3(1.0, 0.0, 0.0), value);
+        } 
+        else if (u_dataType == 1) {  // 습도
+          // 하늘색(건조) -> 진한 파랑(습함)
+          return mix(vec3(0.5, 0.5, 1.0), vec3(0.0, 0.0, 0.8), value);
+        }
+        else if (u_dataType == 2) {  // 바람
+          // 녹색(약함) -> 노랑(강함)
+          return mix(vec3(0.0, 0.5, 0.0), vec3(1.0, 1.0, 0.0), value);
+        }
+        else {  // 강수량
+          // 투명(없음) -> 보라(많음)
+          float intensity = value * 1.5;
+          return vec3(0.5, 0.0, 0.5) * intensity;
+        }
+      }
+      
+      void main() {
+        // 텍스처에서 데이터 가져오기
+        vec4 texColor = texture2D(u_texture, v_texCoord);
+        
+        // 데이터가 없는 경우 무시
+        if (texColor.a < 0.01) {
+          discard;
+        }
+        
+        // 데이터 채널 선택
+        float value = 0.0;
+        if (u_dataType == 0) value = texColor.r;        // 온도
+        else if (u_dataType == 1) value = texColor.g;   // 습도
+        else if (u_dataType == 2) value = texColor.b;   // 바람
+        else value = texColor.a;                        // 강수량
+        
+        // 데이터 시각화
+        vec3 color = getColorForData(value);
+        float alpha = u_dataType == 3 ? value * u_opacity : u_opacity;
+        
+        gl_FragColor = vec4(color, alpha);
+      }
+    `;
+        // 셰이더 컴파일
+        const vertexShader = this._compileShader(this.gl.VERTEX_SHADER, vertexShaderSource);
+        const fragmentShader = this._compileShader(this.gl.FRAGMENT_SHADER, fragmentShaderSource);
+        if (!vertexShader || !fragmentShader)
+            return null;
+        // 프로그램 생성 및 링크
+        const program = this.gl.createProgram();
+        this.gl.attachShader(program, vertexShader);
+        this.gl.attachShader(program, fragmentShader);
+        this.gl.linkProgram(program);
+        if (!this.gl.getProgramParameter(program, this.gl.LINK_STATUS)) {
+            console.error('WebGL 프로그램 링크 실패:', this.gl.getProgramInfoLog(program));
+            return null;
+        }
+        return program;
+    }
+    /**
+     * 셰이더 컴파일
+     */
+    _compileShader(type, source) {
+        if (!this.gl)
+            return null;
+        const shader = this.gl.createShader(type);
+        this.gl.shaderSource(shader, source);
+        this.gl.compileShader(shader);
+        if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
+            console.error('셰이더 컴파일 오류:', this.gl.getShaderInfoLog(shader));
+            this.gl.deleteShader(shader);
+            return null;
+        }
+        return shader;
+    }
+    _updateWebGLUniforms(worldExtent, resolution, size, pixelRatio) {
+        if (!this.gl || !this.program)
+            return;
+        const gl = this.gl;
+        gl.useProgram(this.program);
+        const textureWidth = size[0] * pixelRatio;
+        const textureHeight = size[1] * pixelRatio;
+        // ✅ Apply resolution correctly (fixing zoom scaling issue)
+        const u_resolution = [
+            (worldExtent[2] - worldExtent[0]) / textureWidth,
+            (worldExtent[3] - worldExtent[1]) / textureHeight
+        ];
+        // ✅ Convert u_offset to OpenGL coordinates
+        const u_offset = [
+            (worldExtent[0] - (worldExtent[2] + worldExtent[0]) / 2) / (worldExtent[2] - worldExtent[0]),
+            (worldExtent[1] - (worldExtent[3] + worldExtent[1]) / 2) / (worldExtent[3] - worldExtent[1])
+        ];
+        console.log('📌 _updateWebGLUniforms called');
+        console.log('🟢 resolution:', resolution);
+        console.log('🟢 pixelRatio:', pixelRatio);
+        console.log('🟢 textureWidth:', textureWidth, 'textureHeight:', textureHeight);
+        console.log('🟢 u_resolution:', u_resolution);
+        console.log('🟢 u_offset:', u_offset);
+        gl.uniform2fv(gl.getUniformLocation(this.program, 'u_resolution'), u_resolution);
+        gl.uniform2fv(gl.getUniformLocation(this.program, 'u_offset'), u_offset);
+        gl.uniform1f(gl.getUniformLocation(this.program, 'u_zoomResolution'), resolution); // 🚀 Pass resolution!
+    }
+}
+export default WebGLCanvasLayer;
+//# sourceMappingURL=webgl-canvas-layer.js.map

package/dist-client/ol-components/webgl-canvas-layer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webgl-canvas-layer.js","sourceRoot":"","sources":["../../client/ol-components/webgl-canvas-layer.ts"],"names":[],"mappings":"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","sourcesContent":["import ImageLayer from 'ol/layer/Image.js'\nimport ImageCanvasSource from 'ol/source/ImageCanvas.js'\nimport { transformExtent } from 'ol/proj.js'\n\n/**\n * WebGL을 사용하여 날씨 데이터 이미지를 지도에 오버레이하는 레이어\n * 이미지의 RGBA 채널에는 온도, 습도, 바람, 강수량 데이터가 인코딩되어 있음\n */\nclass WebGLCanvasLayer extends ImageLayer<ImageCanvasSource> {\n  private canvas: HTMLCanvasElement | null = null\n  private gl: WebGLRenderingContext | null = null\n  private program: WebGLProgram | null = null\n  private texture: WebGLTexture | null = null\n  private buffer: WebGLBuffer | null = null\n  private imageLoaded: boolean = false\n  private pendingRender: boolean = false\n  private imageUrl: string\n  private dataType: string\n\n  /**\n   * WebGL 캔버스 레이어 생성자\n   * @param imageUrl 날씨 데이터가 인코딩된 이미지 URL\n   * @param dataType 시각화할 데이터 유형 (temperature, humidity, wind, precipitation)\n   */\n  constructor(imageUrl: string, dataType: string = 'temperature') {\n    super({\n      source: new ImageCanvasSource({\n        canvasFunction: (extent, resolution, pixelRatio, size, projection) => {\n          this._initializeWebGL(size, pixelRatio)\n\n          if (this.gl && this.program) {\n            // 현재 지도 뷰의 extent를 지리 좌표(EPSG:4326)로 변환\n            const worldExtent = transformExtent(extent, projection.getCode(), 'EPSG:4326')\n\n            // 이미지가 로드된 경우 렌더링\n            if (this.imageLoaded && this.texture) {\n              this._updateWebGLUniforms(worldExtent, resolution, size, pixelRatio)\n              this._renderTexture(worldExtent, size, resolution, pixelRatio)\n            } else if (!this.pendingRender) {\n              this.pendingRender = true\n              this._loadImage(this.imageUrl, worldExtent, size, resolution, pixelRatio)\n            }\n          }\n\n          return this.canvas!\n        },\n        projection: 'EPSG:3857'\n      })\n    })\n\n    this.imageUrl = imageUrl\n    this.dataType = dataType\n    this.on('change:visible', () => this.changed())\n  }\n\n  /**\n   * 데이터 시각화 유형 변경\n   */\n  updateDataType(type: string) {\n    this.dataType = type\n    this.changed()\n  }\n\n  /**\n   * 리소스 해제\n   */\n  dispose() {\n    if (this.gl) {\n      if (this.buffer) this.gl.deleteBuffer(this.buffer)\n      if (this.texture) this.gl.deleteTexture(this.texture)\n      if (this.program) this.gl.deleteProgram(this.program)\n    }\n    super.dispose()\n  }\n\n  /**\n   * 이미지 URL 업데이트\n   */\n  updateImageUrl(newUrl: string) {\n    if (this.imageUrl === newUrl) return\n\n    this.imageUrl = newUrl\n    this.imageLoaded = false\n    this.pendingRender = false\n\n    if (this.texture && this.gl) {\n      this.gl.deleteTexture(this.texture)\n      this.texture = null\n    }\n\n    this.changed()\n  }\n\n  /**\n   * WebGL 컨텍스트 초기화\n   */\n  private _initializeWebGL(size: number[], pixelRatio: number = 1) {\n    const width = Math.round(size[0] * pixelRatio)\n    const height = Math.round(size[1] * pixelRatio)\n\n    if (!this.canvas) {\n      // 캔버스 생성 및 WebGL 초기화\n      this.canvas = document.createElement('canvas')\n      this.canvas.width = width\n      this.canvas.height = height\n\n      this.gl = this.canvas.getContext('webgl', {\n        alpha: true,\n        antialias: false,\n        depth: false\n      })\n\n      if (!this.gl) return\n\n      this.program = this._createShaderProgram()\n      if (this.program) {\n        this._initializeBuffers()\n      }\n    } else if (this.canvas.width !== width || this.canvas.height !== height) {\n      // 캔버스 크기 조정\n      this.canvas.width = width\n      this.canvas.height = height\n      if (this.gl) this.gl.viewport(0, 0, width, height)\n    }\n  }\n\n  /**\n   * 버텍스 버퍼 초기화\n   */\n  private _initializeBuffers() {\n    if (!this.gl) return\n\n    // 사각형 버텍스 (위치(x,y) + 텍스처 좌표(s,t))\n    const vertices = new Float32Array([\n      -1,\n      -1,\n      0,\n      1, // 좌하단\n      1,\n      -1,\n      1,\n      1, // 우하단\n      -1,\n      1,\n      0,\n      0, // 좌상단\n      1,\n      1,\n      1,\n      0 // 우상단\n    ])\n\n    this.buffer = this.gl.createBuffer()\n    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer)\n    this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW)\n  }\n\n  /**\n   * 이미지 로드 및 텍스처 생성\n   */\n  private _loadImage(url: string, worldExtent: number[], size: number[], resolution: number, pixelRatio: number) {\n    const img = new Image()\n    img.crossOrigin = 'anonymous'\n\n    img.onload = () => {\n      if (!this.gl) return\n\n      try {\n        // 텍스처 생성 및 설정\n        this.texture = this.gl.createTexture()\n        this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture)\n\n        // 경도 방향으로 래핑 (날짜 변경선 처리)\n        // this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.REPEAT)\n        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE)\n        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE)\n        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR)\n        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR)\n\n        // 텍스처 데이터 업로드\n        this.gl.pixelStorei(this.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false) // 알파값 손실 방지\n        this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, img)\n\n        this.imageLoaded = true\n        this.pendingRender = false\n\n        // 이미지 로드 후 렌더링\n        this._renderTexture(worldExtent, size, resolution, pixelRatio)\n        this.changed()\n      } catch (err) {\n        console.error('텍스처 생성 실패:', err)\n        this.pendingRender = false\n      }\n    }\n\n    img.onerror = () => {\n      console.error('이미지 로드 실패:', url)\n      this.pendingRender = false\n    }\n\n    img.src = url\n  }\n\n  /**\n   * 텍스처 렌더링\n   */\n  private _renderTexture(worldExtent: number[], size: number[], resolution: number, pixelRatio: number) {\n    if (!this.gl || !this.program || !this.texture || !this.buffer) return\n\n    const gl = this.gl\n    const width = Math.round(size[0] * pixelRatio)\n    const height = Math.round(size[1] * pixelRatio)\n\n    this._updateWebGLUniforms(worldExtent, resolution, size, pixelRatio)\n\n    // 기본 WebGL 상태 설정\n    gl.viewport(0, 0, width, height)\n    gl.clearColor(0, 0, 0, 0)\n    gl.enable(gl.BLEND)\n    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)\n    gl.clear(gl.COLOR_BUFFER_BIT)\n\n    // 셰이더 프로그램 활성화\n    gl.useProgram(this.program)\n\n    // 텍스처 바인딩\n    gl.activeTexture(gl.TEXTURE0)\n    gl.bindTexture(gl.TEXTURE_2D, this.texture)\n\n    // 유니폼 설정\n    const dataTypeVal = ['temperature', 'humidity', 'wind', 'precipitation'].indexOf(this.dataType)\n\n    gl.uniform1i(gl.getUniformLocation(this.program, 'u_texture'), 0)\n    gl.uniform1f(gl.getUniformLocation(this.program, 'u_opacity'), 0.8 * pixelRatio)\n    gl.uniform1i(gl.getUniformLocation(this.program, 'u_dataType'), dataTypeVal >= 0 ? dataTypeVal : 0)\n    gl.uniform4fv(\n      gl.getUniformLocation(this.program, 'u_worldExtent'),\n      new Float32Array([worldExtent[0], worldExtent[1], worldExtent[2], worldExtent[3]])\n    )\n\n    // 버퍼 바인딩 및 속성 설정\n    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer)\n\n    const a_position = gl.getAttribLocation(this.program, 'a_position')\n    const a_texCoord = gl.getAttribLocation(this.program, 'a_texCoord')\n\n    gl.enableVertexAttribArray(a_position)\n    gl.enableVertexAttribArray(a_texCoord)\n    gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 16, 0)\n    gl.vertexAttribPointer(a_texCoord, 2, gl.FLOAT, false, 16, 8)\n\n    // 사각형 렌더링\n    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)\n  }\n\n  /**\n   * 셰이더 프로그램 생성\n   */\n  private _createShaderProgram(): WebGLProgram | null {\n    if (!this.gl) return null\n\n    // 버텍스 셰이더: 지리 좌표와 텍스처 좌표 간 변환\n    const vertexShaderSource = `\nprecision highp float;\n\nattribute vec4 a_position; // Rectangle coordinates\nattribute vec2 a_texCoord; // Texture coordinates\nvarying vec2 v_texCoord;\n\nuniform vec2 u_resolution; // Resolution (meters per pixel)\nuniform vec2 u_offset; // Offset in map coordinates\nuniform float u_zoomResolution; // 🚀 This will store the resolution passed from JS\n\nvoid main() {\n  float x = ((a_position.x - u_offset.x * u_zoomResolution) / u_resolution.x) * 2.0 - 1.0;\n  float y = ((a_position.y - u_offset.y * u_zoomResolution) / u_resolution.y) * 2.0 - 1.0;\n\n  gl_Position = vec4(x, y, 0.0, 1.0);\n  v_texCoord = a_texCoord;\n}\n    `\n\n    // 프래그먼트 셰이더: 데이터 시각화\n    const fragmentShaderSource = `\n      precision highp float;\n      \n      uniform sampler2D u_texture;\n      uniform float u_opacity;\n      uniform int u_dataType;\n      varying vec2 v_texCoord;\n      \n      // 색상 그라데이션 생성\n      vec3 getColorForData(float value) {\n        // 값 범위 확장\n        value = clamp(value * 1.2, 0.0, 1.0);\n        \n        if (u_dataType == 0) {  // 온도\n          // 파랑(저온) -> 빨강(고온)\n          return mix(vec3(0.0, 0.0, 1.0), vec3(1.0, 0.0, 0.0), value);\n        } \n        else if (u_dataType == 1) {  // 습도\n          // 하늘색(건조) -> 진한 파랑(습함)\n          return mix(vec3(0.5, 0.5, 1.0), vec3(0.0, 0.0, 0.8), value);\n        }\n        else if (u_dataType == 2) {  // 바람\n          // 녹색(약함) -> 노랑(강함)\n          return mix(vec3(0.0, 0.5, 0.0), vec3(1.0, 1.0, 0.0), value);\n        }\n        else {  // 강수량\n          // 투명(없음) -> 보라(많음)\n          float intensity = value * 1.5;\n          return vec3(0.5, 0.0, 0.5) * intensity;\n        }\n      }\n      \n      void main() {\n        // 텍스처에서 데이터 가져오기\n        vec4 texColor = texture2D(u_texture, v_texCoord);\n        \n        // 데이터가 없는 경우 무시\n        if (texColor.a < 0.01) {\n          discard;\n        }\n        \n        // 데이터 채널 선택\n        float value = 0.0;\n        if (u_dataType == 0) value = texColor.r;        // 온도\n        else if (u_dataType == 1) value = texColor.g;   // 습도\n        else if (u_dataType == 2) value = texColor.b;   // 바람\n        else value = texColor.a;                        // 강수량\n        \n        // 데이터 시각화\n        vec3 color = getColorForData(value);\n        float alpha = u_dataType == 3 ? value * u_opacity : u_opacity;\n        \n        gl_FragColor = vec4(color, alpha);\n      }\n    `\n\n    // 셰이더 컴파일\n    const vertexShader = this._compileShader(this.gl.VERTEX_SHADER, vertexShaderSource)\n    const fragmentShader = this._compileShader(this.gl.FRAGMENT_SHADER, fragmentShaderSource)\n\n    if (!vertexShader || !fragmentShader) return null\n\n    // 프로그램 생성 및 링크\n    const program = this.gl.createProgram()!\n    this.gl.attachShader(program, vertexShader)\n    this.gl.attachShader(program, fragmentShader)\n    this.gl.linkProgram(program)\n\n    if (!this.gl.getProgramParameter(program, this.gl.LINK_STATUS)) {\n      console.error('WebGL 프로그램 링크 실패:', this.gl.getProgramInfoLog(program))\n      return null\n    }\n\n    return program\n  }\n\n  /**\n   * 셰이더 컴파일\n   */\n  private _compileShader(type: number, source: string): WebGLShader | null {\n    if (!this.gl) return null\n\n    const shader = this.gl.createShader(type)!\n    this.gl.shaderSource(shader, source)\n    this.gl.compileShader(shader)\n\n    if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {\n      console.error('셰이더 컴파일 오류:', this.gl.getShaderInfoLog(shader))\n      this.gl.deleteShader(shader)\n      return null\n    }\n\n    return shader\n  }\n\n  private _updateWebGLUniforms(worldExtent: number[], resolution: number, size: number[], pixelRatio: number) {\n    if (!this.gl || !this.program) return\n\n    const gl = this.gl\n    gl.useProgram(this.program)\n\n    const textureWidth = size[0] * pixelRatio\n    const textureHeight = size[1] * pixelRatio\n\n    // ✅ Apply resolution correctly (fixing zoom scaling issue)\n    const u_resolution = [\n      (worldExtent[2] - worldExtent[0]) / textureWidth,\n      (worldExtent[3] - worldExtent[1]) / textureHeight\n    ]\n\n    // ✅ Convert u_offset to OpenGL coordinates\n    const u_offset = [\n      (worldExtent[0] - (worldExtent[2] + worldExtent[0]) / 2) / (worldExtent[2] - worldExtent[0]),\n      (worldExtent[1] - (worldExtent[3] + worldExtent[1]) / 2) / (worldExtent[3] - worldExtent[1])\n    ]\n\n    console.log('📌 _updateWebGLUniforms called')\n    console.log('🟢 resolution:', resolution)\n    console.log('🟢 pixelRatio:', pixelRatio)\n    console.log('🟢 textureWidth:', textureWidth, 'textureHeight:', textureHeight)\n    console.log('🟢 u_resolution:', u_resolution)\n    console.log('🟢 u_offset:', u_offset)\n\n    gl.uniform2fv(gl.getUniformLocation(this.program, 'u_resolution'), u_resolution)\n    gl.uniform2fv(gl.getUniformLocation(this.program, 'u_offset'), u_offset)\n    gl.uniform1f(gl.getUniformLocation(this.program, 'u_zoomResolution'), resolution) // 🚀 Pass resolution!\n  }\n}\n\nexport default WebGLCanvasLayer\n"]}

package/dist-client/ol-components/wind-data-tile-layer.d.ts

@@ -0,0 +1,59 @@
+import BaseLayer from 'ol/layer/Base.js';
+import Map from 'ol/Map.js';
+import { WeatherLayerType } from '@hyperviz/weather';
+export declare class WindDataTileLayer {
+    private source;
+    private layer;
+    private map;
+    private useEnhancedColors;
+    private __disposed;
+    /**
+     * 바람 데이터 타일 레이어 생성
+     * @param options 옵션 객체
+     */
+    constructor(options?: {
+        useEnhancedColors?: boolean;
+    });
+    /**
+     * 타일 데이터 로딩 함수
+     * @private
+     */
+    private _tileLoader;
+    /**
+     * 레이어 타입 반환 (호환성용)
+     */
+    getType(): WeatherLayerType;
+    /**
+     * 향상된 색상 매핑 사용 여부 설정
+     */
+    setUseEnhancedColors(use: boolean): void;
+    /**
+     * OpenLayers 레이어 객체 생성 또는 반환
+     */
+    createLayer(): BaseLayer;
+    /**
+     * 요청 중인 데이터 로드 중단 및 소스 무효화
+     * @private
+     */
+    private _clearSourceData;
+    /**
+     * 레이어를 맵에 추가
+     */
+    addToMap(map: Map): void;
+    /**
+     * 레이어를 맵에서 제거
+     */
+    removeFromMap(): void;
+    /**
+     * 레이어 관련 리소스 해제
+     */
+    dispose(): void;
+    /**
+     * 레이어 업데이트 요청 (데이터 변경 시)
+     */
+    updateLayer(): void;
+    /**
+     * 데이터 설정 메서드 (호환성용, 실제 데이터는 PNG 이미지에 고정됨)
+     */
+    setWeatherData(data: any): void;
+}