@things-factory/weather 9.0.0-beta.55 → 9.0.0-beta.56

package/client/pages/weather-page.ts

@@ -8,29 +8,16 @@ import TileLayer from 'ol/layer/Tile.js'
 import { fromLonLat } from 'ol/proj.js'
 import 'ol/ol.css'
 import { MVT } from 'ol/format'
-import { DEVICE_PIXEL_RATIO } from 'ol/has.js'
-import Flow from 'ol/layer/Flow.js'
-
-import ImageLayer from 'ol/layer/Image'
-import WebGLImageStatic from '../ol-components/webgl-image-static'
 import { VectorTile, XYZ } from 'ol/source'
-import VectorSource from 'ol/source/Vector'
-import colormap from 'colormap'
+import VectorTileLayer from 'ol/layer/VectorTile'
+import { Style, Stroke } from 'ol/style'
 
-import Heatmap from 'ol/layer/Heatmap.js'
-import Feature from 'ol/Feature.js'
-import Point from 'ol/geom/Point.js'
-import { Stroke, Style } from 'ol/style.js'
+import { BaseWeatherLayer, TemperatureLayer, PrecipitationLayer, initializeWorkerSystem } from '@hyperviz/weather'
 
-import wind from '../ol-components/wind.js'
-import VectorTileLayer from 'ol/layer/VectorTile'
+import { WindDataTileLayer } from '../ol-components/wind-data-tile-layer.js'
 
-const colors = colormap({
-  colormap: 'jet',
-  nshades: 10,
-  alpha: 0.3,
-  format: 'rgba'
-})
+// 통합 날씨 레이어 타입 (BaseWeatherLayer와 WindDataTileLayer 모두 포함)
+type WeatherLayerType = BaseWeatherLayer | WindDataTileLayer
 
 @customElement('weather-page')
 export class WeatherPage extends PageView {
@@ -103,9 +90,8 @@ export class WeatherPage extends PageView {
   }
 
   @property({ type: String }) private activeType = 'temperature'
-  @state() private map: any
-  @state() private weatherLayer: any
-  @state() private windLayer: any
+  @state() private map: Map | null = null
+  @state() private weatherLayer: WeatherLayerType | null = null
 
   constructor() {
     super()
@@ -123,12 +109,6 @@ export class WeatherPage extends PageView {
           >
             온도
           </button>
-          <button
-            class="weather-btn ${this.activeType === 'humidity' ? 'active' : ''}"
-            @click=${() => this._changeWeatherType('humidity')}
-          >
-            습도
-          </button>
           <button
             class="weather-btn ${this.activeType === 'wind' ? 'active' : ''}"
             @click=${() => this._changeWeatherType('wind')}
@@ -149,7 +129,7 @@ export class WeatherPage extends PageView {
 
   connectedCallback(): void {
     super.connectedCallback()
-
+    initializeWorkerSystem()
     requestAnimationFrame(() => {
       this._initMap()
     })
@@ -157,11 +137,17 @@ export class WeatherPage extends PageView {
 
   disconnectedCallback(): void {
     super.disconnectedCallback()
-
-    this.map.removeLayer(this.weatherLayer)
-    this.weatherLayer.dispose()
-    this.map.dispose()
-
+    if (this.weatherLayer) {
+      try {
+        this.weatherLayer.removeFromMap()
+        this.weatherLayer.dispose()
+      } catch (e) {
+        console.error('Error disposing weather layer:', e)
+      }
+    }
+    if (this.map) {
+      this.map.dispose()
+    }
     this.map = null
     this.weatherLayer = null
   }
@@ -169,13 +155,7 @@ export class WeatherPage extends PageView {
   private _initMap() {
     const lightOSM = new TileLayer({
       source: new XYZ({
-        // url: 'https://{a-c}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}{r}.png',
-        // url: 'https://{a-c}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png',
         url: 'https://{a-c}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png',
-        // url: 'https://{a-c}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
-        // url: 'https://{a-c}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'
-        // url: 'https://api.maptiler.com/maps/toner-lines/{z}/{x}/{y}.png?key=uHikv5CybbRm7cDLjRca'
-        // attributions: '© MapTiler'
         attributions: '© OpenStreetMap contributors, © CartoDB'
       }),
       background: 'transparent',
@@ -185,7 +165,6 @@ export class WeatherPage extends PageView {
     const labelOSM = new TileLayer({
       source: new XYZ({
         url: 'https://{a-c}.basemaps.cartocdn.com/dark_only_labels/{z}/{x}/{y}{r}.png'
-        // url: 'https://{a-c}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}{r}.png'
       }),
       background: 'transparent',
       opacity: 1
@@ -212,137 +191,163 @@ export class WeatherPage extends PageView {
       })
     })
 
-    console.log('🛠 벡터 타일 레이어:', outlineLayer, outlineLayer.getSource())
-
-    /* heatmap */
-
-    const generateHeatmapData = () => {
-      const features: Feature[] = []
-      for (let i = 0; i < 20000; i++) {
-        // 더 많은 데이터 포인트 생성
-        const lon = Math.random() * 360 - 180 // 전 세계 경도 (-180 ~ 180)
-        const lat = Math.random() * 170 - 85 // 전 세계 위도 (-85 ~ 85)
-
-        const weight = Math.random() * 1 // 가중치 (0 ~ 2)
-
-        const feature = new Feature({
-          geometry: new Point(fromLonLat([lon, lat])),
-          weight: weight
-        })
-        features.push(feature)
-      }
-      return features
-    }
-
-    const vectorSource = new VectorSource({
-      features: generateHeatmapData()
-    })
-
-    const heatmapLayer = new Heatmap({
-      source: vectorSource,
-      blur: 60, // 흐림 정도 증가
-      radius: 60, // 점의 반경 증가
-      weight: feature => feature.get('weight'), // 가중치 적용
-      gradient: colors.map(c => `rgba(${c.join(',')})`), // 색상 적용
-      opacity: 0.8
-    })
-
     this.map = new Map({
       target: this.renderRoot.querySelector('#map') as HTMLElement,
-      pixelRatio: Math.min(DEVICE_PIXEL_RATIO, 2),
-      layers: [lightOSM, /*heatmapLayer, */ outlineLayer, labelOSM],
+      pixelRatio: Math.min(window.devicePixelRatio, 2),
+      layers: [lightOSM, outlineLayer, labelOSM],
       view: new View({
-        center: fromLonLat([127.5, 36.5]),
-        zoom: 7.5
+        center: fromLonLat([126.9779692, 37.5662952]),
+        zoom: 5
       })
     })
 
     this._addWeatherLayer()
-    // this._addWindLayer()
-  }
-
-  private _addWindLayer() {
-    if (this.windLayer) {
-      this.map.removeLayer(this.windLayer)
-      console.log('🚨 기존 날씨 레이어 제거')
-    }
-
-    const maxSpeed = 20
-
-    const colorStops: (number | [number, number, number, number])[] = []
-    for (let i = 0; i < colors.length; ++i) {
-      colorStops.push((i * maxSpeed) / (colors.length - 1))
-      colorStops.push(colors[i])
-    }
-
-    this.windLayer = new Flow({
-      source: wind,
-      maxSpeed,
-      particles: 20000,
-      style: {
-        color: ['interpolate', ['linear'], ['get', 'speed'], ...colorStops]
-      }
-    })
-
-    this.map.addLayer(this.windLayer)
   }
 
   private _addWeatherLayer() {
-    if (this.weatherLayer) {
-      this.map.removeLayer(this.weatherLayer)
-      console.log('🚨 기존 날씨 레이어 제거')
-    }
-
-    // 날씨 타입별 최적 설정
-    let opacity, blendMode
+    if (!this.map) return
 
     switch (this.activeType) {
       case 'temperature':
-        opacity = 0.75
-        blendMode = 'normal'
-        break
-      case 'humidity':
-        opacity = 0.65
-        blendMode = 'multiply'
+        this.weatherLayer = new TemperatureLayer()
         break
       case 'wind':
-        opacity = 0.8
-        blendMode = 'screen'
+        this.weatherLayer = new WindDataTileLayer()
         break
       case 'precipitation':
-        opacity = 0.7
-        blendMode = 'color-dodge'
+        this.weatherLayer = new PrecipitationLayer()
         break
       default:
-        opacity = 0.7
-        blendMode = 'normal'
+        this.weatherLayer = new TemperatureLayer()
     }
 
-    this.weatherLayer = new ImageLayer({
-      source: new WebGLImageStatic({
-        url: `/weather/map/${this.activeType}.png?refresh=${Date.now()}`, // 캐시 방지
-        // 올바른 지구 투영 비율 사용
-        imageExtent: [-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892],
-        interpolation: true,
-        projection: 'EPSG:3857'
-        // opacity: opacity,
-        // blendMode: blendMode
-      }),
-      opacity // WebGLImageStatic에서 투명도 처리
-    })
-
-    this.map.getLayers().insertAt(1, this.weatherLayer)
-
-    console.log('🚨 날씨 레이어 추가', this.map.getLayers())
+    if (this.weatherLayer) {
+      this.weatherLayer.addToMap(this.map)
+    }
   }
 
+  /**
+   * 날씨 레이어를 변경하고 새 레이어를 맵에 추가
+   */
   private _changeWeatherType(type: string) {
     if (this.activeType === type) return
+
+    // 현재 활성 타입 저장
+    const previousType = this.activeType
+    // 새로운 타입으로 변경
     this.activeType = type
-    this._addWeatherLayer()
+
+    console.log(`날씨 타입 변경 시작: ${previousType} -> ${type}`)
+
+    // 이전 레이어가 있을 경우 처리
+    if (this.map && this.weatherLayer) {
+      // 맵 참조 저장
+      const mapRef = this.map
+
+      // 이전 레이어 참조 저장
+      const oldLayer = this.weatherLayer
+      // 렌더링 참조 제거
+      this.weatherLayer = null
+
+      // 이전 레이어 제거 처리
+      try {
+        console.log(`이전 레이어(${previousType}) 제거 시작`)
+
+        // 1. 레이어 시각적으로 즉시 숨김 (특히 WindDataTileLayer 경우 중요)
+        if (previousType === 'wind') {
+          if (oldLayer['layer'] && typeof oldLayer['layer'].setVisible === 'function') {
+            oldLayer['layer'].setVisible(false)
+          }
+        }
+
+        // 2. 컴포넌트에서 참조 제거 (렌더링 사이클에서 제외)
+        this.weatherLayer = null
+
+        // 3. 비동기 처리: 렌더링 사이클이 완료된 후 실행
+        requestAnimationFrame(() => {
+          setTimeout(() => {
+            try {
+              // 레이어 참조가 남아있을 경우에만 제거 시도
+              if (oldLayer) {
+                oldLayer.removeFromMap()
+
+                // 약간의 지연 후 자원 해제
+                setTimeout(() => {
+                  try {
+                    oldLayer.dispose()
+                    console.log(`이전 레이어(${previousType}) 완전히 제거됨`)
+                  } catch (e) {
+                    console.warn('레이어 리소스 해제 중 오류:', e)
+                  }
+
+                  // 새 레이어 생성 시작
+                  this._addNewLayer(type, mapRef)
+                }, 50) // dispose 지연
+              } else {
+                // 레이어 참조가 없는 경우 즉시 새 레이어 생성
+                this._addNewLayer(type, mapRef)
+              }
+            } catch (e) {
+              console.error('레이어 제거 중 오류 발생:', e)
+              // 오류 발생해도 새 레이어 생성 시도
+              this._addNewLayer(type, mapRef)
+            }
+          }, 100) // 레이어 제거 지연
+        })
+      } catch (e) {
+        console.error('레이어 전환 중 오류:', e)
+        // 에러 상태에서도 새 레이어 추가 시도
+        this._addNewLayer(type, mapRef)
+      }
+    } else {
+      // 기존 레이어가 없으면 바로 새 레이어 추가
+      this._addWeatherLayer()
+    }
+  }
+
+  /**
+   * 새 레이어를 안전하게 추가하는 헬퍼 메소드
+   */
+  private _addNewLayer(type: string, mapRef: Map | null): void {
+    // 타입이 바뀌지 않았는지 확인
+    if (this.activeType !== type) {
+      console.log(`타입이 변경되어 레이어 생성 취소: ${this.activeType}로 변경됨`)
+      return
+    }
+
+    console.log(`새 레이어(${type}) 생성 시작`)
+
+    try {
+      // 맵 참조 확인
+      if (!this.map && mapRef) {
+        this.map = mapRef
+      }
+
+      if (this.map) {
+        // 새 레이어 생성 및 맵에 추가
+        this._addWeatherLayer()
+        console.log(`새 레이어(${type}) 생성 완료`)
+      } else {
+        console.error('맵 참조 없음: 레이어를 추가할 수 없습니다')
+      }
+    } catch (e) {
+      console.error('새 레이어 생성 중 오류:', e)
+    }
   }
 
   private _refreshWeatherMap() {
-    this._addWeatherLayer()
+    if (this.weatherLayer) {
+      try {
+        // 타입에 따라 적절한 메서드 호출
+        if (this.activeType === 'wind') {
+          ;(this.weatherLayer as WindDataTileLayer).updateLayer()
+        } else {
+          // @hyperviz/weather 레이어
+          ;(this.weatherLayer as BaseWeatherLayer).setWeatherData([])
+        }
+      } catch (e) {
+        console.error('Error refreshing weather layer:', e)
+      }
+    }
   }
 }

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;
+}