@things-factory/weather 9.0.0-beta.41

package/client/ol-components/wind.ts

@@ -0,0 +1,120 @@
+import { get as getProjection, transform } from 'ol/proj.js'
+import DataTileSource from 'ol/source/DataTile.js'
+import { createXYZ, wrapX } from 'ol/tilegrid.js'
+
+const windData: Promise<{ data: ArrayBuffer; width: number; height: number }> = new Promise((resolve, reject) => {
+  const image = new Image()
+  image.onload = () => {
+    const canvas = document.createElement('canvas')
+    const width = image.width
+    const height = image.height
+    canvas.width = width
+    canvas.height = height
+
+    const context = canvas.getContext('2d')!
+    context.drawImage(image, 0, 0)
+    const data = context.getImageData(0, 0, width, height).data
+    resolve({ data, width, height })
+  }
+  image.onerror = () => {
+    reject(new Error('failed to load'))
+  }
+  image.src = '/assets/images/wind.png'
+})
+
+function bilinearInterpolation(xAlong, yAlong, v11, v21, v12, v22) {
+  const q11 = (1 - xAlong) * (1 - yAlong) * v11
+  const q21 = xAlong * (1 - yAlong) * v21
+  const q12 = (1 - xAlong) * yAlong * v12
+  const q22 = xAlong * yAlong * v22
+  return q11 + q21 + q12 + q22
+}
+
+function interpolatePixels(xAlong, yAlong, p11, p21, p12, p22) {
+  return p11.map((_, i) => bilinearInterpolation(xAlong, yAlong, p11[i], p21[i], p12[i], p22[i]))
+}
+
+const dataTileGrid = createXYZ()
+const dataTileSize = 256
+
+const inputImageProjection = getProjection('EPSG:4326')!
+const dataTileProjection = getProjection('EPSG:3857')!
+
+const inputBands = 4
+const dataBands = 3
+
+// range of wind velocities
+// these values are stretched between 0 and 255 in the png
+const minU = -21.32
+const maxU = 26.8
+const deltaU = maxU - minU
+const minV = -21.57
+const maxV = 21.42
+const deltaV = maxV - minV
+
+const wind = new DataTileSource({
+  // transition must be 0, see https://github.com/openlayers/openlayers/issues/16119
+  transition: 0,
+  wrapX: true,
+  async loader(z, x, y) {
+    const { data: inputData, width: inputWidth, height: inputHeight } = await windData
+
+    const tileCoord = wrapX(dataTileGrid, [z, x, y], dataTileProjection)
+    const extent = dataTileGrid.getTileCoordExtent(tileCoord)
+    const resolution = dataTileGrid.getResolution(z)
+    const data = new Float32Array(dataTileSize * dataTileSize * dataBands)
+    for (let row = 0; row < dataTileSize; ++row) {
+      let offset = row * dataTileSize * dataBands
+      const mapY = extent[3] - row * resolution
+      for (let col = 0; col < dataTileSize; ++col) {
+        const mapX = extent[0] + col * resolution
+        const [lon, lat] = transform([mapX, mapY], dataTileProjection, inputImageProjection)
+
+        const x = (inputWidth * (lon + 180)) / 360
+        let x1 = Math.floor(x)
+        let x2 = Math.ceil(x)
+        const xAlong = x - x1
+        if (x1 < 0) {
+          x1 += inputWidth
+        }
+        if (x2 >= inputWidth) {
+          x2 -= inputWidth
+        }
+
+        const y = (inputHeight * (90 - lat)) / 180
+        let y1 = Math.floor(y)
+        let y2 = Math.ceil(y)
+        const yAlong = y - y1
+        if (y1 < 0) {
+          y1 = 0
+        }
+        if (y2 >= inputHeight) {
+          y2 = inputHeight - 1
+        }
+
+        const corners = [
+          [x1, y1],
+          [x2, y1],
+          [x1, y2],
+          [x2, y2]
+        ]
+
+        const pixels = corners.map(([cx, cy]) => {
+          const inputOffset = (cy * 360 + cx) * inputBands
+          return [inputData[inputOffset], inputData[inputOffset + 1]]
+        })
+
+        const interpolated = interpolatePixels(xAlong, yAlong, ...(pixels as [any, any, any, any]))
+        const u = minU + (deltaU * interpolated[0]) / 255
+        const v = minV + (deltaV * interpolated[1]) / 255
+
+        data[offset] = u
+        data[offset + 1] = v
+        offset += dataBands
+      }
+    }
+    return data
+  }
+})
+
+export default wind

package/client/pages/weather-page.ts

@@ -0,0 +1,318 @@
+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 { 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 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 wind from '../ol-components/wind.js'
+import VectorTileLayer from 'ol/layer/VectorTile'
+
+const colors = colormap({
+  colormap: 'jet',
+  nshades: 10,
+  alpha: 0.3,
+  format: 'rgba'
+})
+
+@customElement('weather-page')
+export 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;
+      }
+    `
+  }
+
+  @property({ type: String }) private activeType = 'temperature'
+  @state() private map: any
+  @state() private weatherLayer: any
+  @state() private windLayer: any
+
+  constructor() {
+    super()
+  }
+
+  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 === 'humidity' ? 'active' : ''}"
+            @click=${() => this._changeWeatherType('humidity')}
+          >
+            습도
+          </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(): void {
+    super.connectedCallback()
+
+    requestAnimationFrame(() => {
+      this._initMap()
+    })
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback()
+
+    this.map.removeLayer(this.weatherLayer)
+    this.weatherLayer.dispose()
+    this.map.dispose()
+
+    this.map = null
+    this.weatherLayer = null
+  }
+
+  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: 'tranparent',
+      opacity: 1
+    })
+
+    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: 'tranparent',
+      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',
+          width: 1
+        })
+      })
+    })
+
+    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],
+      view: new View({
+        center: fromLonLat([127.5, 36.5]),
+        zoom: 7.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('🚨 기존 날씨 레이어 제거')
+    }
+
+    this.weatherLayer = new ImageLayer({
+      source: new WebGLImageStatic({
+        url: `/weather/map/${this.activeType}.png`,
+        imageExtent: [-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892],
+        interpolation: true,
+        projection: 'EPSG:3857' // 좌표 시스템 설정
+      })
+    })
+
+    this.map.addLayer(this.weatherLayer)
+
+    console.log('🚨 날씨 레이어 추가', this.map.getLayers())
+  }
+
+  private _changeWeatherType(type: string) {
+    if (this.activeType === type) return
+    this.activeType = type
+    this._addWeatherLayer()
+  }
+
+  private _refreshWeatherMap() {
+    this._addWeatherLayer()
+  }
+}

package/client/route.ts

@@ -0,0 +1,7 @@
+export default function route(page: string) {
+  switch (page) {
+    case 'weather-page':
+      import('./pages/weather-page.js')
+      return page
+  }
+}

package/client/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig-base.json",
+  "compilerOptions": {
+    "strict": true,
+    "declaration": true,
+    "module": "esnext",
+    "outDir": "../dist-client",
+    "baseUrl": "./"
+  },
+  "include": ["./**/*"]
+}

package/config/config.development.js

@@ -0,0 +1,25 @@
+const DEFAULT_CACHE_TTL = 3600 // 1시간 (초 단위)
+const DEFAULT_TILE_SIZE = 256
+const DEFAULT_MAX_ZOOM = 14
+
+module.exports = {
+  weather: {
+    cacheTtl: DEFAULT_CACHE_TTL * 1000, // 밀리초 단위로 변환
+
+    // 타일 설정
+    tileSize: DEFAULT_TILE_SIZE,
+    maxZoom: DEFAULT_MAX_ZOOM,
+
+    // Mock 데이터 사용 여부
+    useMockData: true,
+
+    // 타일 생성 설정
+    defaultResolution: 8, // 기본 그리드 해상도
+    minResolution: 4, // 최소 그리드 해상도 (낮은 줌 레벨에서 사용)
+    maxResolution: 16, // 최대 그리드 해상도 (높은 줌 레벨에서 사용)
+
+    openWeatherMap: {
+      ApiKey: '41937147fdd666b7184c85f8388b845b'
+    }
+  }
+}

package/config/config.production.js

@@ -0,0 +1,7 @@
+module.exports = {
+  weather: {
+    openWeatherMap: {
+      ApiKey: '1234567890'
+    }
+  }
+}