@operato/weather 9.0.0-beta.56

package/CHANGELOG.md

@@ -0,0 +1,21 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [9.0.0-beta.56](https://github.com/hatiolab/operato/compare/v9.0.0-beta.55...v9.0.0-beta.56) (2025-03-30)
+
+
+### :rocket: New Features
+
+* added ox-weather module ([7dcc41f](https://github.com/hatiolab/operato/commit/7dcc41f7eb52ee994c52b3918f42e368c53cc163))
+* tuning ox-weather module ([c6aa02f](https://github.com/hatiolab/operato/commit/c6aa02f12305668fff7b97642b5f4af7b07f6816))
+* tuning ox-weather module ([1e00c4b](https://github.com/hatiolab/operato/commit/1e00c4b92f750c3dc9c31aaf769df6b8d75c41ad))
+* tuning ox-weather module ([7dcdd76](https://github.com/hatiolab/operato/commit/7dcdd766311fc5556544b28d32e7ac99c7bcca58))
+* tuning ox-weather module ([9d88257](https://github.com/hatiolab/operato/commit/9d882579b9ef991f633c253f36c95263adf5f373))
+
+
+### :bug: Bug Fix
+
+* ox-wind ([c211a65](https://github.com/hatiolab/operato/commit/c211a65bf5cb202b3e065edc1d145add50e1f9f6))
+* title for ox-grist stories and README.md ([38476a5](https://github.com/hatiolab/operato/commit/38476a5994b142f29205014aa0238a1724fd7de1))

package/README.md

@@ -0,0 +1,337 @@
+# OX-Weather Component
+
+OX-Weather는 지도 위에 실시간 기상 데이터를 시각화하는 강력한 웹 컴포넌트입니다. 다양한 기상 요소(풍향/풍속, 강수량, 기온, 일사량, 구름 등)를 직관적이고 아름다운 그래픽으로 표현합니다.
+
+![OX-Weather Component](./assets/weather-demo.png)
+
+## 주요 기능
+
+- **다중 레이어 시각화**: 동시에 여러 기상 요소를 레이어로 표시
+- **고성능 렌더링**: WebGL 기반의 렌더링으로 부드러운 애니메이션과 대용량 데이터 처리
+- **반응형 디자인**: 모바일부터 대형 화면까지 모든 기기에 최적화
+- **실시간 데이터**: 자동 업데이트로 최신 기상 정보 제공
+- **다양한 데이터 소스**: 여러 기상 API 서비스와 통합 (OpenWeatherMap, Weatherbit, 기상청 등)
+- **사용자 지정 테마**: 다크 모드, 라이트 모드 및 맞춤형 색상 테마 지원
+- **국제화**: 다국어 지원 및 단위 변환 기능
+- **날씨 예보**: 현재 날씨뿐만 아니라 시간별, 일별 예보 제공
+- **이벤트 알림**: 악천후 및 위험 기상 상황에 대한 알림 기능
+- **맞춤형 시각화**: 색상 스키마, 레이어 투명도, 애니메이션 속도 등 조정 가능
+
+## 설치
+
+```bash
+npm install @operato/weather
+```
+
+## 기본 사용법
+
+```html
+<script type="module">
+  import '@operato/weather/ox-weather.js'
+</script>
+
+<ox-weather
+  latitude="37.5665"
+  longitude="126.9780"
+  zoom="7"
+  api-key="YOUR_API_KEY"
+  active-layers='["wind", "temperature", "precipitation"]'
+></ox-weather>
+```
+
+## 레이어 유형
+
+OX-Weather는 다음과 같은 기상 레이어를 지원합니다:
+
+### 1. 바람 레이어 (Wind Layer)
+
+- 바람의 방향과 속도를 파티클 애니메이션으로 표현
+- 다양한 시각화 스타일: 파티클, 벡터, 흐름선(streamline)
+- 속도에 따른 색상 변화
+
+### 2. 기온 레이어 (Temperature Layer)
+
+- 등온선(isothermal) 및 히트맵 표현
+- 사용자 정의 색상 스키마
+- 섭씨/화씨 단위 변환
+
+### 3. 강수량 레이어 (Precipitation Layer)
+
+- 비, 눈, 우박 등 강수 유형 구분
+- 강수 강도에 따른 색상 및 애니메이션 변화
+- 레이더 스타일 애니메이션
+
+### 4. 일사량 레이어 (Solar Layer)
+
+- 지역별 일사량 표시
+- 시간에 따른 일사량 변화 애니메이션
+- 태양광 발전 관련 정보 통합
+
+### 5. 구름 레이어 (Cloud Layer)
+
+- 구름량 및 운고 표시
+- 구름 타입 구분 (적운, 층운, 권운 등)
+- 반투명 시각화
+
+## 고급 설정
+
+```javascript
+const weatherElement = document.querySelector('ox-weather')
+
+// 지도 초점 변경
+weatherElement.setView({
+  latitude: 35.6895,
+  longitude: 139.6917,
+  zoom: 8
+})
+
+// 날씨 데이터 소스 설정
+weatherElement.configureDataSource({
+  provider: 'openweathermap', // 'weatherbit', 'meteomatics', 'custom'
+  apiKey: 'YOUR_API_KEY',
+  updateInterval: 600, // 초 단위
+  mockData: false // 개발용 목업 데이터 사용
+})
+
+// 레이어 설정
+weatherElement.configureLayer('wind', {
+  visible: true,
+  opacity: 0.8,
+  style: 'particle', // 'particle', 'vector', 'streamline'
+  particleDensity: 'medium', // 'low', 'medium', 'high'
+  colorScheme: 'rainbow', // 'rainbow', 'bluered', 'monochrome'
+  animationSpeed: 1.2
+})
+
+// 이벤트 리스너
+weatherElement.addEventListener('weather-data-update', e => {
+  console.log('날씨 데이터 업데이트됨', e.detail)
+})
+
+weatherElement.addEventListener('layer-toggle', e => {
+  const { layer, active } = e.detail
+  console.log(`${layer} 레이어 ${active ? '활성화' : '비활성화'}`)
+})
+```
+
+## API 참조
+
+### 속성 (Properties)
+
+| 속성             | 타입   | 설명                                    |
+| ---------------- | ------ | --------------------------------------- |
+| `latitude`       | Number | 지도 중심 위도                          |
+| `longitude`      | Number | 지도 중심 경도                          |
+| `zoom`           | Number | 지도 줌 레벨                            |
+| `activeLayers`   | Array  | 활성화된 레이어 목록                    |
+| `apiKey`         | String | 날씨 API 키                             |
+| `provider`       | String | 날씨 데이터 제공자                      |
+| `theme`          | String | 시각화 테마 ('light', 'dark', 'custom') |
+| `units`          | String | 측정 단위 ('metric', 'imperial')        |
+| `updateInterval` | Number | 데이터 업데이트 간격(초)                |
+| `forecastDays`   | Number | 일기 예보 표시 일수                     |
+| `language`       | String | UI 언어 코드                            |
+
+### 메서드 (Methods)
+
+| 메서드                          | 설명                       |
+| ------------------------------- | -------------------------- |
+| `setView(options)`              | 지도 보기 설정             |
+| `configureDataSource(options)`  | 데이터 소스 설정           |
+| `configureLayer(type, options)` | 레이어별 설정              |
+| `refresh()`                     | 날씨 데이터 수동 새로고침  |
+| `exportData()`                  | 현재 날씨 데이터 내보내기  |
+| `captureImage()`                | 현재 뷰를 이미지로 캡처    |
+| `addMarker(lat, lng, options)`  | 지도에 마커 추가           |
+| `setRegionFilter(geoJSON)`      | 특정 지역으로 표시 제한    |
+| `setTimeOffset(hours)`          | 예보 시각 오프셋 설정      |
+| `getWeatherAt(lat, lng)`        | 특정 위치의 날씨 정보 조회 |
+| `showForecast(lat, lng)`        | 특정 위치의 예보 표시      |
+
+### 이벤트 (Events)
+
+| 이벤트                | 설명                         |
+| --------------------- | ---------------------------- |
+| `weather-data-update` | 날씨 데이터 업데이트 시 발생 |
+| `layer-toggle`        | 레이어 토글 시 발생          |
+| `map-click`           | 지도 클릭 시 발생            |
+| `view-change`         | 지도 뷰 변경 시 발생         |
+| `weather-alert`       | 기상 경보 발생 시            |
+| `loading-change`      | 로딩 상태 변경 시            |
+| `error`               | 오류 발생 시                 |
+
+## 시각화 커스터마이징
+
+OX-Weather는 CSS 변수를 통해 시각화를 사용자 정의할 수 있습니다.
+
+```css
+ox-weather {
+  --wind-color-scheme: 'bluered';
+  --temp-cold-color: #0077ff;
+  --temp-hot-color: #ff3300;
+  --precipitation-base-color: #00aaff;
+  --map-background: #f5f5f5;
+  --animation-speed: 1.2;
+  --layer-opacity: 0.8;
+  --ui-font-family: 'Roboto', sans-serif;
+  --ui-primary-color: #2c3e50;
+  --ui-accent-color: #3498db;
+}
+```
+
+## 통합 예제
+
+### React 통합
+
+```jsx
+import React, { useRef, useEffect } from 'react'
+import '@operato/weather/ox-weather.js'
+
+function WeatherMap() {
+  const weatherRef = useRef(null)
+
+  useEffect(() => {
+    if (weatherRef.current) {
+      // 설정 및 이벤트 리스너 추가
+      weatherRef.current.addEventListener('weather-data-update', handleUpdate)
+    }
+
+    return () => {
+      if (weatherRef.current) {
+        weatherRef.current.removeEventListener('weather-data-update', handleUpdate)
+      }
+    }
+  }, [])
+
+  const handleUpdate = e => {
+    console.log('날씨 데이터:', e.detail)
+  }
+
+  return (
+    <ox-weather
+      ref={weatherRef}
+      latitude="37.5665"
+      longitude="126.9780"
+      zoom="7"
+      api-key="YOUR_API_KEY"
+      active-layers='["wind", "temperature"]'
+    ></ox-weather>
+  )
+}
+
+export default WeatherMap
+```
+
+### Vue 통합
+
+```vue
+<template>
+  <ox-weather
+    ref="weatherMap"
+    :latitude="37.5665"
+    :longitude="126.978"
+    :zoom="7"
+    :api-key="apiKey"
+    :active-layers="['wind', 'precipitation']"
+    @weather-data-update="onWeatherUpdate"
+  ></ox-weather>
+</template>
+
+<script>
+import '@operato/weather/ox-weather.js'
+
+export default {
+  name: 'WeatherMapComponent',
+  data() {
+    return {
+      apiKey: 'YOUR_API_KEY'
+    }
+  },
+  methods: {
+    onWeatherUpdate(e) {
+      console.log('날씨 데이터 업데이트:', e.detail)
+    }
+  }
+}
+</script>
+```
+
+## 라이센스
+
+MIT
+
+## Linting with ESLint, Prettier, and Types
+
+To scan the project for linting errors, run
+
+```bash
+npm run lint
+```
+
+You can lint with ESLint and Prettier individually as well
+
+```bash
+npm run lint:eslint
+```
+
+```bash
+npm run lint:prettier
+```
+
+To automatically fix many linting errors, run
+
+```bash
+npm run format
+```
+
+You can format using ESLint and Prettier individually as well
+
+```bash
+npm run format:eslint
+```
+
+```bash
+npm run format:prettier
+```
+
+## Testing with Web Test Runner
+
+To run the suite of Web Test Runner tests, run
+
+```bash
+npm run test
+```
+
+To run the tests in watch mode (for &lt;abbr title=&#34;test driven development&#34;&gt;TDD&lt;/abbr&gt;, for example), run
+
+```bash
+npm run test:watch
+```
+
+## Demoing with Storybook
+
+To run a local instance of Storybook for your component, run
+
+```bash
+npm run storybook
+```
+
+To build a production version of Storybook, run
+
+```bash
+npm run storybook:build
+```
+
+## Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+
+If you customize the configuration a lot, you can consider moving them to individual files.
+
+## Local Demo with `web-dev-server`
+
+```bash
+npm start
+```
+
+To run a local development server that serves the basic demo located in `demo/index.html`

package/dist/src/index.d.ts

@@ -0,0 +1 @@
+export * from './ox-weather.js';

package/dist/src/index.js

@@ -0,0 +1,2 @@
+export * from './ox-weather.js';
+//# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA","sourcesContent":["export * from './ox-weather.js'\n"]}

package/dist/src/layers/base-weather-layer.d.ts

@@ -0,0 +1,56 @@
+import BaseLayer from 'ol/layer/Base.js';
+import { Map } from 'ol';
+import { WeatherData, WeatherLayerType } from '../types.js';
+/**
+ * 날씨 레이어의 기본 클래스
+ * 모든 레이어 타입은 이 클래스를 상속합니다.
+ */
+export declare abstract class BaseWeatherLayer {
+    protected map?: Map;
+    protected layer?: BaseLayer;
+    protected weatherData: WeatherData[];
+    /**
+     * 레이어의 타입을 반환합니다.
+     */
+    abstract getType(): WeatherLayerType;
+    /**
+     * 레이어를 생성합니다. 이 메서드는 각 서브클래스에서 구현해야 합니다.
+     */
+    abstract createLayer(): BaseLayer;
+    /**
+     * 맵에 레이어를 추가합니다.
+     */
+    addToMap(map: Map): BaseLayer;
+    /**
+     * 맵에서 레이어를 제거합니다.
+     */
+    removeFromMap(): void;
+    /**
+     * 레이어에 날씨 데이터를 설정합니다.
+     */
+    setWeatherData(data: WeatherData[]): void;
+    /**
+     * 레이어를 업데이트합니다. 데이터가 변경된 경우 호출됩니다.
+     */
+    protected updateLayer(): void;
+    /**
+     * 레이어 인스턴스를 반환합니다.
+     */
+    getLayer(): BaseLayer | undefined;
+    /**
+     * 레이어의 가시성을 설정합니다.
+     */
+    setVisible(visible: boolean): void;
+    /**
+     * 레이어의 가시성 상태를 반환합니다.
+     */
+    isVisible(): boolean;
+    /**
+     * 애니메이션을 시작합니다. 애니메이션이 필요한 레이어에서 오버라이드합니다.
+     */
+    startAnimation(): void;
+    /**
+     * 애니메이션을 중지합니다. 애니메이션이 필요한 레이어에서 오버라이드합니다.
+     */
+    stopAnimation(): void;
+}

package/dist/src/layers/base-weather-layer.js

@@ -0,0 +1,83 @@
+/**
+ * 날씨 레이어의 기본 클래스
+ * 모든 레이어 타입은 이 클래스를 상속합니다.
+ */
+export class BaseWeatherLayer {
+    constructor() {
+        this.weatherData = [];
+    }
+    /**
+     * 맵에 레이어를 추가합니다.
+     */
+    addToMap(map) {
+        this.map = map;
+        if (!this.layer) {
+            this.layer = this.createLayer();
+        }
+        this.map.addLayer(this.layer);
+        return this.layer;
+    }
+    /**
+     * 맵에서 레이어를 제거합니다.
+     */
+    removeFromMap() {
+        if (this.map && this.layer) {
+            this.map.removeLayer(this.layer);
+        }
+    }
+    /**
+     * 레이어에 날씨 데이터를 설정합니다.
+     */
+    setWeatherData(data) {
+        this.weatherData = data;
+        this.updateLayer();
+    }
+    /**
+     * 레이어를 업데이트합니다. 데이터가 변경된 경우 호출됩니다.
+     */
+    updateLayer() {
+        if (this.layer) {
+            this.removeFromMap();
+            this.layer = this.createLayer();
+            if (this.map) {
+                this.map.addLayer(this.layer);
+            }
+        }
+    }
+    /**
+     * 레이어 인스턴스를 반환합니다.
+     */
+    getLayer() {
+        return this.layer;
+    }
+    /**
+     * 레이어의 가시성을 설정합니다.
+     */
+    setVisible(visible) {
+        if (this.layer) {
+            this.layer.setVisible(visible);
+        }
+    }
+    /**
+     * 레이어의 가시성 상태를 반환합니다.
+     */
+    isVisible() {
+        if (this.layer) {
+            return this.layer.getVisible();
+        }
+        return false;
+    }
+    /**
+     * 애니메이션을 시작합니다. 애니메이션이 필요한 레이어에서 오버라이드합니다.
+     */
+    startAnimation() {
+        // 기본 구현은 비어있음
+    }
+    /**
+     * 애니메이션을 중지합니다. 애니메이션이 필요한 레이어에서 오버라이드합니다.
+     */
+    stopAnimation() {
+        // 기본 구현은 비어있음
+    }
+}
+//# sourceMappingURL=base-weather-layer.js.map

package/dist/src/layers/base-weather-layer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-weather-layer.js","sourceRoot":"","sources":["../../../src/layers/base-weather-layer.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,MAAM,OAAgB,gBAAgB;IAAtC;QAGY,gBAAW,GAAkB,EAAE,CAAA;IA8F3C,CAAC;IAlFC;;OAEG;IACH,QAAQ,CAAC,GAAQ;QACf,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;QACd,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,CAAA;QACjC,CAAC;QAED,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAC7B,OAAO,IAAI,CAAC,KAAK,CAAA;IACnB,CAAC;IAED;;OAEG;IACH,aAAa;QACX,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAC3B,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAClC,CAAC;IACH,CAAC;IAED;;OAEG;IACH,cAAc,CAAC,IAAmB;QAChC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA;QACvB,IAAI,CAAC,WAAW,EAAE,CAAA;IACpB,CAAC;IAED;;OAEG;IACO,WAAW;QACnB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,aAAa,EAAE,CAAA;YACpB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,CAAA;YAC/B,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;gBACb,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YAC/B,CAAC;QACH,CAAC;IACH,CAAC;IAED;;OAEG;IACH,QAAQ;QACN,OAAO,IAAI,CAAC,KAAK,CAAA;IACnB,CAAC;IAED;;OAEG;IACH,UAAU,CAAC,OAAgB;QACzB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;QAChC,CAAC;IACH,CAAC;IAED;;OAEG;IACH,SAAS;QACP,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,OAAO,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAA;QAChC,CAAC;QACD,OAAO,KAAK,CAAA;IACd,CAAC;IAED;;OAEG;IACH,cAAc;QACZ,cAAc;IAChB,CAAC;IAED;;OAEG;IACH,aAAa;QACX,cAAc;IAChB,CAAC;CACF","sourcesContent":["import BaseLayer from 'ol/layer/Base.js'\nimport { Map } from 'ol'\nimport { WeatherData, WeatherLayerType } from '../types.js'\n\n/**\n * 날씨 레이어의 기본 클래스\n * 모든 레이어 타입은 이 클래스를 상속합니다.\n */\nexport abstract class BaseWeatherLayer {\n  protected map?: Map\n  protected layer?: BaseLayer\n  protected weatherData: WeatherData[] = []\n\n  /**\n   * 레이어의 타입을 반환합니다.\n   */\n  abstract getType(): WeatherLayerType\n\n  /**\n   * 레이어를 생성합니다. 이 메서드는 각 서브클래스에서 구현해야 합니다.\n   */\n  abstract createLayer(): BaseLayer\n\n  /**\n   * 맵에 레이어를 추가합니다.\n   */\n  addToMap(map: Map) {\n    this.map = map\n    if (!this.layer) {\n      this.layer = this.createLayer()\n    }\n\n    this.map.addLayer(this.layer)\n    return this.layer\n  }\n\n  /**\n   * 맵에서 레이어를 제거합니다.\n   */\n  removeFromMap() {\n    if (this.map && this.layer) {\n      this.map.removeLayer(this.layer)\n    }\n  }\n\n  /**\n   * 레이어에 날씨 데이터를 설정합니다.\n   */\n  setWeatherData(data: WeatherData[]) {\n    this.weatherData = data\n    this.updateLayer()\n  }\n\n  /**\n   * 레이어를 업데이트합니다. 데이터가 변경된 경우 호출됩니다.\n   */\n  protected updateLayer() {\n    if (this.layer) {\n      this.removeFromMap()\n      this.layer = this.createLayer()\n      if (this.map) {\n        this.map.addLayer(this.layer)\n      }\n    }\n  }\n\n  /**\n   * 레이어 인스턴스를 반환합니다.\n   */\n  getLayer(): BaseLayer | undefined {\n    return this.layer\n  }\n\n  /**\n   * 레이어의 가시성을 설정합니다.\n   */\n  setVisible(visible: boolean) {\n    if (this.layer) {\n      this.layer.setVisible(visible)\n    }\n  }\n\n  /**\n   * 레이어의 가시성 상태를 반환합니다.\n   */\n  isVisible(): boolean {\n    if (this.layer) {\n      return this.layer.getVisible()\n    }\n    return false\n  }\n\n  /**\n   * 애니메이션을 시작합니다. 애니메이션이 필요한 레이어에서 오버라이드합니다.\n   */\n  startAnimation() {\n    // 기본 구현은 비어있음\n  }\n\n  /**\n   * 애니메이션을 중지합니다. 애니메이션이 필요한 레이어에서 오버라이드합니다.\n   */\n  stopAnimation() {\n    // 기본 구현은 비어있음\n  }\n}\n"]}

package/dist/src/layers/cloud-layer.d.ts

@@ -0,0 +1,17 @@
+import BaseLayer from 'ol/layer/Base';
+import { BaseWeatherLayer } from './base-weather-layer.js';
+import { WeatherData, WeatherLayerType } from '../types.js';
+/**
+ * 구름 레이어 구현
+ */
+export declare class CloudLayer extends BaseWeatherLayer {
+    getType(): WeatherLayerType;
+    /**
+     * 벡터 레이어를 생성하여 구름을 표현합니다.
+     */
+    createLayer(): BaseLayer;
+    /**
+     * 레이어에 날씨 데이터를 설정합니다.
+     */
+    setWeatherData(data: WeatherData[]): void;
+}