@operato/scene-openlayers 1.2.54

package/src/groups/geography.ts

@@ -0,0 +1,48 @@
+const icon = `
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
+  <style type="text/css">
+    .st0{fill:{{strokeColor}};}
+  </style>
+  <g>
+    <g>
+      <path class="st0" d="M33.2,15.2v4.6h-4.6v-4.6H33.2 M34,14.4h-6.1v6.1H34V14.4L34,14.4z"/>
+    </g>
+    <g>
+      <g>
+        <path class="st0" d="M17.5,15.3l2.2,2.2l-2.2,2.2l-2.2-2.2L17.5,15.3 M17.5,14.2l-3.3,3.3l3.3,3.3l3.3-3.3L17.5,14.2L17.5,14.2z"
+          />
+      </g>
+      <g>
+        <path class="st0" d="M19.8,7.2v4.6h-4.6V7.2H19.8 M20.6,6.5h-6.1v6.1h6.1V6.5L20.6,6.5z"/>
+      </g>
+      <g>
+        <path class="st0" d="M19.8,23.1v4.6h-4.6v-4.6H19.8 M20.6,22.4h-6.1v6.1h6.1V22.4L20.6,22.4z"/>
+      </g>
+    </g>
+    <g>
+      <g>
+        <polygon class="st0" points="13.3,17.4 10.6,19.6 10.6,15.2 13.3,17.4 			"/>
+      </g>
+      <rect x="8.2" y="16.9" class="st0" width="3.4" height="0.9"/>
+    </g>
+    <g>
+      <g>
+        <polygon class="st0" points="26.8,17.4 24,19.6 24,15.2 26.8,17.4 			"/>
+      </g>
+      <rect x="21.7" y="16.9" class="st0" width="3.4" height="0.9"/>
+    </g>
+    <g>
+      <path class="st0" d="M4.1,15.2c1.3,0,2.3,1,2.3,2.3s-1,2.3-2.3,2.3s-2.3-1-2.3-2.3S2.8,15.2,4.1,15.2 M4.1,14.4
+        c-1.7,0-3.1,1.4-3.1,3.1c0,1.7,1.4,3.1,3.1,3.1s3.1-1.4,3.1-3.1C7.1,15.8,5.8,14.4,4.1,14.4L4.1,14.4z"/>
+    </g>
+  </g>
+</svg>
+`
+
+export const geography = {
+  name: 'geography',
+  description: 'a group of Geographic Components',
+  icon,
+  templates: []
+}

package/src/groups/index.ts

@@ -0,0 +1,3 @@
+import { geography } from './geography'
+
+export default [geography]

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default as Openlayers } from './openlayers'
+export { default as OpenLayersMarker } from './ol-marker'

package/src/ol-marker.ts

@@ -0,0 +1,318 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { Component, InfoWindow as SceneInfoWindow, Properties, RectPath, Shape } from '@hatiolab/things-scene'
+import Openlayers from './openlayers'
+
+import 'ol/ol.css'
+import { Map, MapBrowserEvent, Overlay, View } from 'ol'
+import { fromLonLat } from 'ol/proj'
+import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
+import { OSM, Vector as VectorSource } from 'ol/source'
+import { Icon, Style } from 'ol/style'
+import { Feature } from 'ol'
+import Point from 'ol/geom/Point'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'id-input',
+      label: 'target-map',
+      name: 'targetMap',
+      property: {
+        component: 'openlayers'
+      }
+    },
+    {
+      type: 'number',
+      label: 'latitude',
+      name: 'lat',
+      property: {
+        step: 0.000001,
+        max: 90,
+        min: -90
+      }
+    },
+    {
+      type: 'number',
+      label: 'longitude',
+      name: 'lng',
+      property: {
+        step: 0.000001,
+        max: 180,
+        min: -180
+      }
+    },
+    {
+      type: 'select',
+      label: 'style',
+      name: 'style',
+      property: {
+        options: ['circle', 'marker']
+      }
+    }
+  ],
+  'value-property': 'latlng'
+  // help: 'scene/component/gmap-marker'
+}
+
+const MARKER_PATH = 'M10 0 C14.42 0 18 3.58 18 8 C18 12.42 14.42 16 10 16 C5.58 16 2 12.42 2 8 C2 3.58 5.58 0 10 0 Z'
+
+export default class OpenLayersMarker extends RectPath(Shape) {
+  _infoWindow: any
+  _marker: any
+  _map: Map | null = null
+
+  static markerStyle: Style = new Style({
+    image: new Icon({
+      anchor: [0.5, 1], // 이미지 중심 아래쪽을 지도 위치에 맞춤
+      src:
+        'data:image/svg+xml;charset=utf-8,' +
+        encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">' + MARKER_PATH + '</svg>')
+    })
+  })
+
+  dispose() {
+    this.detachFromOldOpenlayers(this.targetMap)
+
+    this.marker = null
+    delete this._infoWindow
+
+    super.dispose()
+  }
+
+  ready() {
+    super.ready()
+
+    if (this.isTemplate()) {
+      return
+    }
+
+    this.attachToNewOpenlayers(this.targetMap)
+  }
+
+  get map() {
+    return this._map
+  }
+
+  get infoWindow() {
+    if (!this._infoWindow) {
+      // this._infoWindow = new google.maps.InfoWindow()
+
+      // 인포윈도우 생성
+      this._infoWindow = new Overlay({
+        element: document.getElementById('info')!,
+        positioning: 'bottom-center',
+        stopEvent: false
+      })
+
+      // // 마커 클릭 이벤트 리스너 추가
+      // marker.on('click', event => {
+      //   const coordinate = event.coordinate
+      //   const content = '<div>Hello, This is InfoWindow!</div>'
+      //   infoWindow.setPosition(coordinate)
+      //   infoWindow.getElement().innerHTML = content
+      //   map.addOverlay(infoWindow)
+      // })
+
+      // // 지도에 레이어 추가
+      // map.addLayer(markerLayer)
+
+      // // 인포윈도우를 닫는 함수
+      // const closeInfoWindow = () => {
+      //   infoWindow.setPosition(undefined)
+      //   infoWindow.getElement().innerHTML = ''
+      // }
+    }
+
+    return this._infoWindow
+  }
+
+  findInfoWindow(type: string) {
+    var eventSetting = (this.state.event && this.state.event[type]) || {}
+
+    var infoWindow =
+      /* event spec v1.0 */ eventSetting.infoWindow ||
+      /* event spec v1.1 */ (eventSetting.action == 'infoWindow' && eventSetting.target)
+
+    if (infoWindow) {
+      return this.root.findById(infoWindow)
+    }
+  }
+
+  setInfoContent(sceneInfoWindow: SceneInfoWindow) {
+    var tpl = Component.template(sceneInfoWindow.model.frontSideTemplate)
+    var content = `<style>${sceneInfoWindow.model.style}</style>` + tpl(this)
+
+    this.infoWindow.setContent(content)
+  }
+
+  openInfoWindow(iw: SceneInfoWindow) {
+    this.setInfoContent(iw)
+
+    if (!this.map) return
+
+    this.infoWindow.open(this.map, this.marker)
+  }
+
+  onmarkerclick(e: MapBrowserEvent<UIEvent>) {
+    var iw = this.findInfoWindow('tap')
+    iw && this.openInfoWindow(iw)
+
+    // this.trigger('click', e.ya) ??????
+  }
+
+  onmarkermouseover(e: MapBrowserEvent<UIEvent>) {
+    var iw = this.findInfoWindow('hover')
+    iw && this.openInfoWindow(iw)
+  }
+
+  onmarkermouseout(e: MapBrowserEvent<UIEvent>) {
+    var iw = this.findInfoWindow('hover')
+    iw && this.infoWindow.close()
+  }
+
+  set marker(marker) {
+    this._marker = marker
+  }
+
+  get marker() {
+    return this._marker
+  }
+
+  render(context: CanvasRenderingContext2D) {
+    var { top, left, width, height } = this.state
+
+    context.translate(left, top)
+
+    // 마커 모양 그리기
+    context.beginPath()
+
+    context.moveTo(width / 2, height * 0.9)
+    context.bezierCurveTo(width / 2.3, height * 0.6, 0, height / 2, 0, height / 4)
+
+    context.ellipse(width / 2, height / 4, width / 2, height / 4, 0, Math.PI * 1, Math.PI * 0)
+
+    context.bezierCurveTo(width, height / 2, width / 1.7, height * 0.6, width / 2, height * 0.9)
+    context.closePath()
+
+    context.translate(-left, -top)
+  }
+
+  detachFromOldOpenlayers(map: Openlayers) {
+    if (this._marker && map) {
+      map.vectorSource?.removeFeature(this._marker)
+      this._marker = null
+    }
+  }
+
+  attachToNewOpenlayers(map: Openlayers) {
+    if (!this._marker && map) {
+      let {
+        lat,
+        lng,
+        style = 'circle',
+        fillStyle: fillColor,
+        alpha: fillOpacity = 1,
+        strokeStyle: strokeColor,
+        lineWidth: strokeWeight
+      } = this.state
+
+      const marker = new Feature({
+        type: style,
+        geometry: new Point(fromLonLat([lng || 0, lat || 0]))
+      })
+
+      map.vectorSource?.addFeatures([marker])
+
+      if (marker) {
+        //@ts-ignore
+        marker.on('click', this.onmarkerclick.bind(this))
+        //@ts-ignore
+        marker.on('mouseover', this.onmarkermouseover.bind(this))
+        //@ts-ignore
+        marker.on('mouseout', this.onmarkermouseout.bind(this))
+      }
+
+      this._marker = marker
+    }
+  }
+
+  onchangeTargetMap(after: string, before: string) {
+    const oldMap = this.root.findById(before) as Openlayers
+    const newMap = this.root.findById(after) as Openlayers
+
+    this.detachFromOldOpenlayers(oldMap)
+    this.attachToNewOpenlayers(newMap)
+  }
+
+  get targetMap() {
+    const { targetMap } = this.state
+    return this.root.findById(targetMap) as Openlayers
+  }
+
+  onchange(after: Properties, before: Properties) {
+    if ('targetMap' in after) {
+      this.onchangeTargetMap(after.targetMap, before.targetMap)
+    }
+
+    if ('lat' in after || 'lng' in after) {
+      var { lat, lng } = this.state
+      this.latlng = {
+        lat,
+        lng
+      }
+    }
+
+    if (('fillStyle' in after || 'strokeStyle' in after || 'lineWidth' in after) && this.marker) {
+      let {
+        fillStyle: fillColor,
+        alpha: fillOpacity = 1,
+        strokeStyle: strokeColor,
+        lineWidth: strokeWeight
+      } = this.state
+
+      this.marker.setIcon({
+        path: MARKER_PATH,
+        fillColor,
+        fillOpacity,
+        strokeColor,
+        strokeWeight
+      })
+    }
+
+    if ('style' in after) {
+      const { targetMap } = this.state
+      this.onchangeTargetMap(targetMap, targetMap)
+    }
+
+    super.onchange && super.onchange(after, before)
+  }
+
+  get latlng() {
+    return {
+      lat: this.getState('lat'),
+      lng: this.getState('lng')
+    }
+  }
+
+  set latlng(latlng) {
+    var { lat, lng } = latlng
+    this.marker?.getGeometry().setCoordinates(fromLonLat([lng, lat]))
+
+    this.setState({
+      lat,
+      lng
+    })
+  }
+
+  get nature() {
+    return NATURE
+  }
+}
+
+Component.register('ol-marker', OpenLayersMarker)