@things-factory/kpi 9.0.28 → 9.0.30

package/client/google-map/common-google-map.ts

@@ -0,0 +1,332 @@
+import { LitElement, html, css } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { ScrollbarStyles } from '@operato/styles'
+
+import GoogleMapLoader from './google-map-loader.js'
+
+declare global {
+  interface Window {
+    google: any
+    markerClusterer?: any
+  }
+}
+
+declare const google: any
+
+declare namespace google.maps {
+  interface MapsLibrary {
+    Map: any
+    InfoWindow: any
+  }
+
+  interface MarkerLibrary {
+    AdvancedMarkerElement: any
+    PinElement: any
+  }
+}
+
+@customElement('common-google-map')
+export class CommonGoogleMap extends LitElement {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+      }
+
+      [map] {
+        flex: 1;
+      }
+
+      .gm-style .gm-style-iw-c {
+        padding: 0;
+      }
+
+      .gm-style .gm-style-iw-d {
+        overflow: auto !important;
+      }
+      .gm-style .gm-style-iw-d + button {
+        top: 0 !important;
+        right: 0 !important;
+      }
+    `
+  ]
+
+  @property({ type: Object }) center
+  @property({ type: Number }) zoom
+  @property({ type: Array }) locations: any[] = []
+  @property({ type: Object }) focused
+  @property({ type: Array }) polygons
+  @property({ type: Array }) polylines
+  @property({ type: Array }) markers
+  @property({ type: Array }) boundCoords
+  @property({ type: Object }) controls
+  @property({ type: Number }) clusterZoom = 10
+
+  @state() map: any = null
+  @state() defaultCenter: any = { lat: 36.5, lng: 127.5 }
+  private _infoWindow: any = null
+  private _markerClusterer: any = null
+
+  get anchor() {
+    return this.renderRoot.querySelector('[map]')
+  }
+
+  async readyMap() {
+    await GoogleMapLoader.load()
+
+    // MarkerClusterer 라이브러리 로드
+    if (!window.markerClusterer) {
+      await GoogleMapLoader.loadMarkerClusterer()
+    }
+
+    if (this.map) {
+      return
+    }
+
+    // DOM이 준비될 때까지 기다림
+    await this.updateComplete
+
+    // anchor가 준비될 때까지 기다림
+    let attempts = 0
+    const maxAttempts = 20
+    while (attempts < maxAttempts) {
+      const anchor = this.anchor as HTMLElement
+      if (anchor && anchor.offsetWidth > 0) {
+        break
+      }
+      await new Promise(resolve => setTimeout(resolve, 50))
+      attempts++
+    }
+
+    if (!this.anchor) {
+      console.error('Map anchor element not found')
+      return
+    }
+
+    var show = async (center, zoom) => {
+      try {
+        // Google Maps 최신 API 사용
+        const { Map } = (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary
+
+        const map = new Map(this.anchor, {
+          zoom,
+          center,
+          mapId: 'DEMO_MAP_ID'
+        })
+
+        this.markers && this.markers.forEach(marker => marker.setMap(map))
+
+        this.map = map
+
+        this.dispatchEvent(
+          new CustomEvent('map-change', {
+            detail: this.map
+          })
+        )
+
+        this.resetBounds()
+      } catch (e) {
+        console.error(e)
+      }
+    }
+
+    var { center, zoom = 10 } = this
+
+    /* center 속성이 설정되어있지 않으면, 현재 위치를 구해서 지도의 center로 설정한다. */
+    if (!center && 'geolocation' in navigator && !this.boundCoords?.length) {
+      navigator.geolocation.getCurrentPosition(
+        ({ coords: { latitude: lat, longitude: lng } }) => show({ lat, lng }, zoom),
+        err => {
+          console.warn(`navigator.geolocation.getCurrentPosition failed. (${err.code}): ${err.message}`)
+          show(this.defaultCenter, zoom)
+        },
+        {
+          /* https://stackoverflow.com/questions/3397585/navigator-geolocation-getcurrentposition-sometimes-works-sometimes-doesnt */
+          timeout: 500
+        }
+      )
+    } else {
+      show(center, zoom)
+    }
+  }
+
+  async buildMarkers(locations: any[] = []) {
+    if (!this.map) {
+      return
+    }
+
+    if (this.markers) {
+      this.markers.forEach(marker => marker.setMap(null))
+      this.markers = []
+    }
+
+    // 기존 클러스터 제거
+    if (this._markerClusterer) {
+      this._markerClusterer.clearMarkers()
+      this._markerClusterer = null
+    }
+
+    // Google Maps 최신 API 사용
+    const { AdvancedMarkerElement, PinElement } = (await google.maps.importLibrary(
+      'marker'
+    )) as google.maps.MarkerLibrary
+
+    this.markers = locations
+      .map(location => {
+        // location 객체가 유효한지 확인
+        if (!location || typeof location !== 'object') {
+          console.warn('Invalid location object:', location)
+          return null
+        }
+
+        // lat, lng 값이 유효한지 확인
+        const lat = parseFloat(location.lat)
+        const lng = parseFloat(location.lng)
+
+        if (isNaN(lat) || isNaN(lng)) {
+          console.warn('Invalid lat/lng values:', location)
+          return null
+        }
+
+        // LatLng 객체 생성
+        const position = new google.maps.LatLng(lat, lng)
+
+        // AdvancedMarkerElement 사용
+        const marker = new AdvancedMarkerElement({
+          position: position,
+          map: null // 클러스터에서 관리하므로 지도에 직접 추가하지 않음
+        })
+
+        marker.addListener('click', () => {
+          if (location?.content) {
+            var infowindow = this.infoWindow
+            infowindow.open(this.map, marker)
+            infowindow.setContent(location.content)
+          }
+        })
+
+        return marker
+      })
+      .filter(marker => marker !== null) // null 마커 제거
+
+    // Google Maps 공식 MarkerClusterer 사용 (예시와 동일한 방식)
+    if (this.markers.length > 0 && window.markerClusterer) {
+      this._markerClusterer = new window.markerClusterer.MarkerClusterer({
+        markers: this.markers,
+        map: this.map
+      })
+    }
+  }
+
+  get infoWindow() {
+    if (!this._infoWindow && this.map) {
+      this._infoWindow = new google.maps.InfoWindow({
+        content: 'loading...'
+      })
+    }
+
+    return this._infoWindow
+  }
+
+  setFocus(focus, icon) {
+    focus.setZIndex(1)
+    focus.setIcon(icon)
+  }
+
+  resetFocus(focus, icon) {
+    focus.setZIndex(0)
+    focus.setIcon(icon)
+  }
+
+  async changeFocus(after, before) {
+    await this.readyMap()
+
+    // map이 준비되지 않았으면 포커스 변경하지 않음
+    if (!this.map) {
+      return
+    }
+
+    var locations = this.locations || []
+
+    if (before) {
+      var idx = locations.findIndex(location => {
+        // location 객체의 구조를 안전하게 확인
+        const beforePos = before?.position
+        const locationPos = location?.position
+
+        return (
+          location?.name == before?.name && locationPos?.lat == beforePos?.lat && locationPos?.lng == beforePos?.lng
+        )
+      })
+      idx !== -1 && this.markers && this.resetFocus(this.markers[idx], locations[idx]?.icon)
+    }
+
+    if (after) {
+      var idx = locations.findIndex(location => {
+        // location 객체의 구조를 안전하게 확인
+        const afterPos = after?.position
+        const locationPos = location?.position
+
+        return location?.name == after?.name && locationPos?.lat == afterPos?.lat && locationPos?.lng == afterPos?.lng
+      })
+      idx !== -1 && this.markers && this.setFocus(this.markers[idx], after?.icon)
+    }
+  }
+
+  async updated(changes) {
+    if (!this.map) {
+      await this.readyMap()
+    }
+
+    if (changes.has('locations')) {
+      this.buildMarkers(this.locations)
+    }
+
+    if (changes.has('focused')) {
+      this.changeFocus(this.focused, changes.get('focused'))
+    }
+
+    if (changes.has('center')) {
+      this.map.setCenter(this.center)
+    }
+
+    if (changes.has('polygons')) {
+      ;(changes.get('polygons') || []).forEach(geofence => geofence.setMap(null))
+      ;(this.polygons || []).forEach(geofence => geofence.setMap(this.map))
+    }
+
+    if (changes.has('polylines')) {
+      ;(changes.get('polylines') || []).forEach(polyline => polyline.setMap(null))
+      ;(this.polylines || []).forEach(polyline => polyline.setMap(this.map))
+    }
+
+    if (changes.has('markers')) {
+      ;(changes.get('markers') || []).forEach(marker => marker.setMap(null))
+      ;(this.markers || []).forEach(marker => marker.setMap(this.map))
+    }
+
+    if (changes.has('boundCoords')) {
+      this.resetBounds()
+    }
+
+    // 클러스터링 설정 변경 시 마커 재구성
+    if (changes.has('clusterZoom')) {
+      this.buildMarkers(this.locations)
+    }
+  }
+
+  render() {
+    return html` <div map></div> `
+  }
+
+  resetBounds() {
+    if (!this.boundCoords || this.boundCoords.length < 1 || !this.map) {
+      return
+    }
+
+    var bounds = new google.maps.LatLngBounds()
+    this.boundCoords.forEach(coord => bounds.extend(coord))
+    this.map.fitBounds(bounds)
+  }
+}

package/client/google-map/google-map-loader.ts

@@ -0,0 +1,29 @@
+import ScriptLoader from './script-loader.js'
+
+export default class GoogleMapLoader {
+  static loaded = false
+  static markerClustererLoaded = false
+
+  static async load() {
+    if (GoogleMapLoader.loaded) {
+      return
+    }
+    var key = 'AIzaSyBgQZb-SFqjQBC_XTxNiz0XapejNwV9PgA'
+
+    await ScriptLoader.load(
+      'https://maps.googleapis.com/maps/api/js' + (key ? '?key=' + key : '') + '&libraries=places'
+    )
+    GoogleMapLoader.loaded = true
+  }
+
+  static async loadMarkerClusterer() {
+    if (GoogleMapLoader.markerClustererLoaded) {
+      return
+    }
+
+    // Google Maps 공식 MarkerClusterer 라이브러리 로드
+    await ScriptLoader.load('https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js')
+
+    GoogleMapLoader.markerClustererLoaded = true
+  }
+}

package/client/google-map/script-loader.ts

@@ -0,0 +1,173 @@
+/*
+ * 1. SCRIPTS, STYLES 에는 각 소스별 상태를 관리한다.
+ * SCRIPTS, STYLES : {
+ *   'http://echarts.baidu.com/dist/echarts.min.js': true | false (true means loaded, false means not loaded yet)
+ * }
+ *
+ * 2. PROMISES : 각 소스군별 pending resolver, reject 을 관리한다.
+ * PROMISES: [{
+ *   resolve,
+ *   reject,
+ *   srcs: ['src1', 'src2']
+ * }]
+ *
+ * [특징]
+ * 1. CORS 제약에서 자유롭다.
+ * 2. 같은 스크립트를 반복해서 로드하지 않는다.
+ * 3. 로드에 실패한 스크립트도 다시 반복해서 로드를 시도할 수 있다.
+ */
+
+// 타입 정의 추가
+interface LoadPromise {
+  resolve: (value?: any) => void
+  reject: (error: any) => void
+  scripts: string[]
+  styles?: string[]
+}
+
+// SystemJS를 활용하는 경우에는 다음과 같이 import 할 수 있다.
+//
+// import System from 'systemjs/dist/system-production'
+
+var SCRIPTS: Record<string, boolean> = {}
+var STYLES: Record<string, boolean> = {}
+
+var PROMISES: (LoadPromise | null)[] = []
+
+function onload(e) {
+  var types = e.target.tagName == 'SCRIPT' ? SCRIPTS : STYLES
+  var src = e.target.src || e.target.href
+
+  types[src] = true
+
+  PROMISES.forEach((ready, index) => {
+    if (!ready) return
+
+    let { resolve, scripts, styles } = ready
+
+    if (types == SCRIPTS) {
+      let idx = scripts.indexOf(src)
+      if (idx > -1 && idx < scripts.length - 1) request_script(scripts[idx + 1])
+    }
+
+    for (let i = 0; i < scripts.length; i++) if (!SCRIPTS[scripts[i]]) return
+
+    if (styles) {
+      for (let i = 0; i < styles.length; i++) if (!STYLES[styles[i]]) return
+    }
+
+    resolve()
+
+    PROMISES[index] = null
+  })
+
+  PROMISES = PROMISES.filter(x => x)
+}
+
+function onerror(e) {
+  var src = e.target.src
+  var types = e.target.tagName == 'SCRIPT' ? SCRIPTS : STYLES
+
+  PROMISES.forEach((ready, index) => {
+    if (!ready) return
+
+    let { reject, scripts, styles } = ready
+
+    let done = false
+
+    if (types === SCRIPTS) {
+      for (let i = 0; i < scripts.length; i++) {
+        if (scripts[i] == src) {
+          done = true
+          break
+        }
+      }
+    } else if (styles) {
+      for (let i = 0; i < styles.length; i++) {
+        if (styles[i] == src) {
+          done = true
+          break
+        }
+      }
+    }
+
+    if (done) {
+      reject(e)
+
+      PROMISES[index] = null
+    }
+  })
+
+  PROMISES = PROMISES.filter(x => x)
+
+  delete types[src]
+  document.head.removeChild(e.target)
+}
+
+function request_script(src) {
+  SCRIPTS[src] = false
+
+  var script = document.createElement('script')
+  script.onload = onload
+  script.onerror = onerror
+
+  script.type = 'text/javascript'
+  script.src = src
+  document.head.appendChild(script)
+}
+
+function request_style(src) {
+  STYLES[src] = false
+
+  var link = document.createElement('link')
+  link.onload = onload
+  link.onerror = onerror
+
+  link.type = 'text/css'
+  link.rel = 'stylesheet'
+  link.media = 'screen,print'
+  link.href = src
+
+  document.head.appendChild(link)
+}
+
+export default class ScriptLoader {
+  static load(scripts: string | string[], styles?: string | string[]) {
+    if (typeof scripts == 'string') scripts = [scripts]
+    if (typeof styles == 'string') styles = [styles]
+
+    return new Promise<void>(function (resolve, reject) {
+      if ((scripts && !(scripts instanceof Array)) || (styles && !(styles instanceof Array))) {
+        reject('invalid sources for load')
+        return
+      }
+
+      /* check state of each src */
+      var done = true
+
+      // style first
+      styles &&
+        styles.forEach(src => {
+          if (!STYLES.hasOwnProperty(src)) request_style(src)
+
+          if (!STYLES[src]) done = false
+        })
+
+      var first
+      if (scripts && scripts.length > 0) {
+        scripts.forEach(src => {
+          if (!SCRIPTS.hasOwnProperty(src)) first = first || src
+          else if (!SCRIPTS[src]) done = false
+        })
+      }
+
+      if (first) request_script(first)
+      else if (done) {
+        resolve()
+        return
+      }
+
+      PROMISES.push({ resolve, reject, scripts, styles })
+    })
+  }
+}