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

package/dist-client/pages/weather-page.js

@@ -0,0 +1,348 @@
+import { __decorate, __metadata } from "tslib";
+import { css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { PageView } from '@operato/shell';
+import Map from 'ol/Map.js';
+import View from 'ol/View.js';
+import TileLayer from 'ol/layer/Tile.js';
+import { fromLonLat } from 'ol/proj.js';
+import 'ol/ol.css';
+import { MVT } from 'ol/format';
+import { VectorTile, XYZ } from 'ol/source';
+import VectorTileLayer from 'ol/layer/VectorTile';
+import { Style, Stroke } from 'ol/style';
+import { TemperatureLayer, PrecipitationLayer, initializeWorkerSystem } from '@hyperviz/weather';
+import { WindDataTileLayer } from '../ol-components/wind-data-tile-layer.js';
+let WeatherPage = class WeatherPage extends PageView {
+    static get styles() {
+        return css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      .map-container {
+        flex: 1;
+        display: flex;
+        position: relative;
+        background-color: #f9f9f9;
+        overflow: hidden;
+      }
+
+      #map {
+        flex: 1;
+      }
+
+      .controls {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        background: rgba(255, 255, 255, 0.8);
+        padding: 15px;
+        border-radius: 4px;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        z-index: 10;
+      }
+
+      .weather-btn {
+        cursor: pointer;
+        padding: 8px 12px;
+        background-color: #f0f0f0;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        font-weight: bold;
+        transition: all 0.3s;
+      }
+
+      .weather-btn.active {
+        background-color: #4281f5;
+        color: white;
+        border-color: #2d5ed9;
+      }
+
+      .refresh-btn {
+        margin-top: 10px;
+        cursor: pointer;
+        padding: 8px 12px;
+        background-color: #00c851;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        font-weight: bold;
+        transition: all 0.3s;
+      }
+
+      .refresh-btn:hover {
+        background-color: #00a651;
+      }
+    `;
+    }
+    constructor() {
+        super();
+        this.activeType = 'temperature';
+        this.map = null;
+        this.weatherLayer = null;
+    }
+    render() {
+        return html `
+      <div class="map-container">
+        <div id="map"></div>
+
+        <div class="controls">
+          <button
+            class="weather-btn ${this.activeType === 'temperature' ? 'active' : ''}"
+            @click=${() => this._changeWeatherType('temperature')}
+          >
+            온도
+          </button>
+          <button
+            class="weather-btn ${this.activeType === 'wind' ? 'active' : ''}"
+            @click=${() => this._changeWeatherType('wind')}
+          >
+            바람
+          </button>
+          <button
+            class="weather-btn ${this.activeType === 'precipitation' ? 'active' : ''}"
+            @click=${() => this._changeWeatherType('precipitation')}
+          >
+            강수량
+          </button>
+          <button class="refresh-btn" @click=${this._refreshWeatherMap}>새로고침</button>
+        </div>
+      </div>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        initializeWorkerSystem();
+        requestAnimationFrame(() => {
+            this._initMap();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        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;
+    }
+    _initMap() {
+        const lightOSM = new TileLayer({
+            source: new XYZ({
+                url: 'https://{a-c}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png',
+                attributions: '© OpenStreetMap contributors, © CartoDB'
+            }),
+            background: 'transparent',
+            opacity: 1
+        });
+        const labelOSM = new TileLayer({
+            source: new XYZ({
+                url: 'https://{a-c}.basemaps.cartocdn.com/dark_only_labels/{z}/{x}/{y}{r}.png'
+            }),
+            background: 'transparent',
+            opacity: 1
+        });
+        const vectorTile = new VectorTile({
+            format: new MVT({
+                layerName: 'countries',
+                layers: ['countries']
+            }),
+            url: `/geo/tiles/{z}/{x}/{y}.mvt`,
+            maxZoom: 10,
+            projection: 'EPSG:3857'
+        });
+        const outlineLayer = new VectorTileLayer({
+            source: vectorTile,
+            style: new Style({
+                stroke: new Stroke({
+                    color: '#858585',
+                    // color: '#484848',
+                    width: 1
+                })
+            })
+        });
+        this.map = new Map({
+            target: this.renderRoot.querySelector('#map'),
+            pixelRatio: Math.min(window.devicePixelRatio, 2),
+            layers: [lightOSM, outlineLayer, labelOSM],
+            view: new View({
+                center: fromLonLat([126.9779692, 37.5662952]),
+                zoom: 5
+            })
+        });
+        this._addWeatherLayer();
+    }
+    _addWeatherLayer() {
+        if (!this.map)
+            return;
+        switch (this.activeType) {
+            case 'temperature':
+                this.weatherLayer = new TemperatureLayer();
+                break;
+            case 'wind':
+                this.weatherLayer = new WindDataTileLayer();
+                break;
+            case 'precipitation':
+                this.weatherLayer = new PrecipitationLayer();
+                break;
+            default:
+                this.weatherLayer = new TemperatureLayer();
+        }
+        if (this.weatherLayer) {
+            this.weatherLayer.addToMap(this.map);
+        }
+    }
+    /**
+     * 날씨 레이어를 변경하고 새 레이어를 맵에 추가
+     */
+    _changeWeatherType(type) {
+        if (this.activeType === type)
+            return;
+        // 현재 활성 타입 저장
+        const previousType = this.activeType;
+        // 새로운 타입으로 변경
+        this.activeType = type;
+        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();
+        }
+    }
+    /**
+     * 새 레이어를 안전하게 추가하는 헬퍼 메소드
+     */
+    _addNewLayer(type, mapRef) {
+        // 타입이 바뀌지 않았는지 확인
+        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);
+        }
+    }
+    _refreshWeatherMap() {
+        if (this.weatherLayer) {
+            try {
+                // 타입에 따라 적절한 메서드 호출
+                if (this.activeType === 'wind') {
+                    ;
+                    this.weatherLayer.updateLayer();
+                }
+                else {
+                    // @hyperviz/weather 레이어
+                    ;
+                    this.weatherLayer.setWeatherData([]);
+                }
+            }
+            catch (e) {
+                console.error('Error refreshing weather layer:', e);
+            }
+        }
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], WeatherPage.prototype, "activeType", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], WeatherPage.prototype, "map", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], WeatherPage.prototype, "weatherLayer", void 0);
+WeatherPage = __decorate([
+    customElement('weather-page'),
+    __metadata("design:paramtypes", [])
+], WeatherPage);
+export { WeatherPage };
+//# sourceMappingURL=weather-page.js.map

package/dist-client/pages/weather-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"weather-page.js","sourceRoot":"","sources":["../../client/pages/weather-page.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { PageView } from '@operato/shell'\n\nimport Map from 'ol/Map.js'\nimport View from 'ol/View.js'\nimport TileLayer from 'ol/layer/Tile.js'\nimport { fromLonLat } from 'ol/proj.js'\nimport 'ol/ol.css'\nimport { MVT } from 'ol/format'\nimport { VectorTile, XYZ } from 'ol/source'\nimport VectorTileLayer from 'ol/layer/VectorTile'\nimport { Style, Stroke } from 'ol/style'\n\nimport { BaseWeatherLayer, TemperatureLayer, PrecipitationLayer, initializeWorkerSystem } from '@hyperviz/weather'\n\nimport { WindDataTileLayer } from '../ol-components/wind-data-tile-layer.js'\n\n// 통합 날씨 레이어 타입 (BaseWeatherLayer와 WindDataTileLayer 모두 포함)\ntype WeatherLayerType = BaseWeatherLayer | WindDataTileLayer\n\n@customElement('weather-page')\nexport class WeatherPage extends PageView {\n  static get styles() {\n    return css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      .map-container {\n        flex: 1;\n        display: flex;\n        position: relative;\n        background-color: #f9f9f9;\n        overflow: hidden;\n      }\n\n      #map {\n        flex: 1;\n      }\n\n      .controls {\n        position: absolute;\n        top: 10px;\n        right: 10px;\n        display: flex;\n        flex-direction: column;\n        gap: 10px;\n        background: rgba(255, 255, 255, 0.8);\n        padding: 15px;\n        border-radius: 4px;\n        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n        z-index: 10;\n      }\n\n      .weather-btn {\n        cursor: pointer;\n        padding: 8px 12px;\n        background-color: #f0f0f0;\n        border: 1px solid #ddd;\n        border-radius: 4px;\n        font-weight: bold;\n        transition: all 0.3s;\n      }\n\n      .weather-btn.active {\n        background-color: #4281f5;\n        color: white;\n        border-color: #2d5ed9;\n      }\n\n      .refresh-btn {\n        margin-top: 10px;\n        cursor: pointer;\n        padding: 8px 12px;\n        background-color: #00c851;\n        color: white;\n        border: none;\n        border-radius: 4px;\n        font-weight: bold;\n        transition: all 0.3s;\n      }\n\n      .refresh-btn:hover {\n        background-color: #00a651;\n      }\n    `\n  }\n\n  @property({ type: String }) private activeType = 'temperature'\n  @state() private map: Map | null = null\n  @state() private weatherLayer: WeatherLayerType | null = null\n\n  constructor() {\n    super()\n  }\n\n  render() {\n    return html`\n      <div class=\"map-container\">\n        <div id=\"map\"></div>\n\n        <div class=\"controls\">\n          <button\n            class=\"weather-btn ${this.activeType === 'temperature' ? 'active' : ''}\"\n            @click=${() => this._changeWeatherType('temperature')}\n          >\n            온도\n          </button>\n          <button\n            class=\"weather-btn ${this.activeType === 'wind' ? 'active' : ''}\"\n            @click=${() => this._changeWeatherType('wind')}\n          >\n            바람\n          </button>\n          <button\n            class=\"weather-btn ${this.activeType === 'precipitation' ? 'active' : ''}\"\n            @click=${() => this._changeWeatherType('precipitation')}\n          >\n            강수량\n          </button>\n          <button class=\"refresh-btn\" @click=${this._refreshWeatherMap}>새로고침</button>\n        </div>\n      </div>\n    `\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    initializeWorkerSystem()\n    requestAnimationFrame(() => {\n      this._initMap()\n    })\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n    if (this.weatherLayer) {\n      try {\n        this.weatherLayer.removeFromMap()\n        this.weatherLayer.dispose()\n      } catch (e) {\n        console.error('Error disposing weather layer:', e)\n      }\n    }\n    if (this.map) {\n      this.map.dispose()\n    }\n    this.map = null\n    this.weatherLayer = null\n  }\n\n  private _initMap() {\n    const lightOSM = new TileLayer({\n      source: new XYZ({\n        url: 'https://{a-c}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png',\n        attributions: '© OpenStreetMap contributors, © CartoDB'\n      }),\n      background: 'transparent',\n      opacity: 1\n    })\n\n    const labelOSM = new TileLayer({\n      source: new XYZ({\n        url: 'https://{a-c}.basemaps.cartocdn.com/dark_only_labels/{z}/{x}/{y}{r}.png'\n      }),\n      background: 'transparent',\n      opacity: 1\n    })\n\n    const vectorTile = new VectorTile({\n      format: new MVT({\n        layerName: 'countries',\n        layers: ['countries']\n      }),\n      url: `/geo/tiles/{z}/{x}/{y}.mvt`,\n      maxZoom: 10,\n      projection: 'EPSG:3857'\n    })\n\n    const outlineLayer = new VectorTileLayer({\n      source: vectorTile,\n      style: new Style({\n        stroke: new Stroke({\n          color: '#858585',\n          // color: '#484848',\n          width: 1\n        })\n      })\n    })\n\n    this.map = new Map({\n      target: this.renderRoot.querySelector('#map') as HTMLElement,\n      pixelRatio: Math.min(window.devicePixelRatio, 2),\n      layers: [lightOSM, outlineLayer, labelOSM],\n      view: new View({\n        center: fromLonLat([126.9779692, 37.5662952]),\n        zoom: 5\n      })\n    })\n\n    this._addWeatherLayer()\n  }\n\n  private _addWeatherLayer() {\n    if (!this.map) return\n\n    switch (this.activeType) {\n      case 'temperature':\n        this.weatherLayer = new TemperatureLayer()\n        break\n      case 'wind':\n        this.weatherLayer = new WindDataTileLayer()\n        break\n      case 'precipitation':\n        this.weatherLayer = new PrecipitationLayer()\n        break\n      default:\n        this.weatherLayer = new TemperatureLayer()\n    }\n\n    if (this.weatherLayer) {\n      this.weatherLayer.addToMap(this.map)\n    }\n  }\n\n  /**\n   * 날씨 레이어를 변경하고 새 레이어를 맵에 추가\n   */\n  private _changeWeatherType(type: string) {\n    if (this.activeType === type) return\n\n    // 현재 활성 타입 저장\n    const previousType = this.activeType\n    // 새로운 타입으로 변경\n    this.activeType = type\n\n    console.log(`날씨 타입 변경 시작: ${previousType} -> ${type}`)\n\n    // 이전 레이어가 있을 경우 처리\n    if (this.map && this.weatherLayer) {\n      // 맵 참조 저장\n      const mapRef = this.map\n\n      // 이전 레이어 참조 저장\n      const oldLayer = this.weatherLayer\n      // 렌더링 참조 제거\n      this.weatherLayer = null\n\n      // 이전 레이어 제거 처리\n      try {\n        console.log(`이전 레이어(${previousType}) 제거 시작`)\n\n        // 1. 레이어 시각적으로 즉시 숨김 (특히 WindDataTileLayer 경우 중요)\n        if (previousType === 'wind') {\n          if (oldLayer['layer'] && typeof oldLayer['layer'].setVisible === 'function') {\n            oldLayer['layer'].setVisible(false)\n          }\n        }\n\n        // 2. 컴포넌트에서 참조 제거 (렌더링 사이클에서 제외)\n        this.weatherLayer = null\n\n        // 3. 비동기 처리: 렌더링 사이클이 완료된 후 실행\n        requestAnimationFrame(() => {\n          setTimeout(() => {\n            try {\n              // 레이어 참조가 남아있을 경우에만 제거 시도\n              if (oldLayer) {\n                oldLayer.removeFromMap()\n\n                // 약간의 지연 후 자원 해제\n                setTimeout(() => {\n                  try {\n                    oldLayer.dispose()\n                    console.log(`이전 레이어(${previousType}) 완전히 제거됨`)\n                  } catch (e) {\n                    console.warn('레이어 리소스 해제 중 오류:', e)\n                  }\n\n                  // 새 레이어 생성 시작\n                  this._addNewLayer(type, mapRef)\n                }, 50) // dispose 지연\n              } else {\n                // 레이어 참조가 없는 경우 즉시 새 레이어 생성\n                this._addNewLayer(type, mapRef)\n              }\n            } catch (e) {\n              console.error('레이어 제거 중 오류 발생:', e)\n              // 오류 발생해도 새 레이어 생성 시도\n              this._addNewLayer(type, mapRef)\n            }\n          }, 100) // 레이어 제거 지연\n        })\n      } catch (e) {\n        console.error('레이어 전환 중 오류:', e)\n        // 에러 상태에서도 새 레이어 추가 시도\n        this._addNewLayer(type, mapRef)\n      }\n    } else {\n      // 기존 레이어가 없으면 바로 새 레이어 추가\n      this._addWeatherLayer()\n    }\n  }\n\n  /**\n   * 새 레이어를 안전하게 추가하는 헬퍼 메소드\n   */\n  private _addNewLayer(type: string, mapRef: Map | null): void {\n    // 타입이 바뀌지 않았는지 확인\n    if (this.activeType !== type) {\n      console.log(`타입이 변경되어 레이어 생성 취소: ${this.activeType}로 변경됨`)\n      return\n    }\n\n    console.log(`새 레이어(${type}) 생성 시작`)\n\n    try {\n      // 맵 참조 확인\n      if (!this.map && mapRef) {\n        this.map = mapRef\n      }\n\n      if (this.map) {\n        // 새 레이어 생성 및 맵에 추가\n        this._addWeatherLayer()\n        console.log(`새 레이어(${type}) 생성 완료`)\n      } else {\n        console.error('맵 참조 없음: 레이어를 추가할 수 없습니다')\n      }\n    } catch (e) {\n      console.error('새 레이어 생성 중 오류:', e)\n    }\n  }\n\n  private _refreshWeatherMap() {\n    if (this.weatherLayer) {\n      try {\n        // 타입에 따라 적절한 메서드 호출\n        if (this.activeType === 'wind') {\n          ;(this.weatherLayer as WindDataTileLayer).updateLayer()\n        } else {\n          // @hyperviz/weather 레이어\n          ;(this.weatherLayer as BaseWeatherLayer).setWeatherData([])\n        }\n      } catch (e) {\n        console.error('Error refreshing weather layer:', e)\n      }\n    }\n  }\n}\n"]}

package/dist-client/route.d.ts

@@ -0,0 +1 @@
+export default function route(page: string): "weather-page" | undefined;

package/dist-client/route.js

@@ -0,0 +1,8 @@
+export default function route(page) {
+    switch (page) {
+        case 'weather-page':
+            import('./pages/weather-page.js');
+            return page;
+    }
+}
+//# sourceMappingURL=route.js.map

package/dist-client/route.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"route.js","sourceRoot":"","sources":["../client/route.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,IAAY;IACxC,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,cAAc;YACjB,MAAM,CAAC,yBAAyB,CAAC,CAAA;YACjC,OAAO,IAAI,CAAA;IACf,CAAC;AACH,CAAC","sourcesContent":["export default function route(page: string) {\n  switch (page) {\n    case 'weather-page':\n      import('./pages/weather-page.js')\n      return page\n  }\n}\n"]}