@operato/scene-openlayers 1.2.54

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [1.2.54](https://github.com/things-scene/operato-scene/compare/v1.2.53...v1.2.54) (2023-09-03)
+
+
+### :bug: Bug Fix
+
+* add openlayers module ([2e3aec2](https://github.com/things-scene/operato-scene/commit/2e3aec223d9b82afa18ad0953d1121c5e9ff9787))

package/README.md

@@ -0,0 +1,13 @@
+## build
+
+`$ yarn build`
+
+| type | filename                                   | for            | tested |
+| ---- | ------------------------------------------ | -------------- | ------ |
+| UMD  | things-scene-scene-openlayers.js    | modern browser | O      |
+| UMD  | things-scene-scene-openlayers-ie.js | ie 11          | O      |
+| ESM  | things-scene-scene-openlayers.mjs   | modern browser | O      |
+
+## publish
+
+`$ yarn publish`

package/dist/editors/index.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=index.js.map

package/dist/editors/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/editors/index.ts"],"names":[],"mappings":"","sourcesContent":[""]}

package/dist/groups/geography.d.ts

@@ -0,0 +1,6 @@
+export declare const geography: {
+    name: string;
+    description: string;
+    icon: string;
+    templates: never[];
+};

package/dist/groups/geography.js

@@ -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: []
+};
+//# sourceMappingURL=geography.js.map

package/dist/groups/geography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"geography.js","sourceRoot":"","sources":["../../src/groups/geography.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCZ,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE,WAAW;IACjB,WAAW,EAAE,kCAAkC;IAC/C,IAAI;IACJ,SAAS,EAAE,EAAE;CACd,CAAA","sourcesContent":["const icon = `\n<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\t viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n  <style type=\"text/css\">\n    .st0{fill:{{strokeColor}};}\n  </style>\n  <g>\n    <g>\n      <path class=\"st0\" d=\"M33.2,15.2v4.6h-4.6v-4.6H33.2 M34,14.4h-6.1v6.1H34V14.4L34,14.4z\"/>\n    </g>\n    <g>\n      <g>\n        <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\"\n          />\n      </g>\n      <g>\n        <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\"/>\n      </g>\n      <g>\n        <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\"/>\n      </g>\n    </g>\n    <g>\n      <g>\n        <polygon class=\"st0\" points=\"13.3,17.4 10.6,19.6 10.6,15.2 13.3,17.4 \t\t\t\"/>\n      </g>\n      <rect x=\"8.2\" y=\"16.9\" class=\"st0\" width=\"3.4\" height=\"0.9\"/>\n    </g>\n    <g>\n      <g>\n        <polygon class=\"st0\" points=\"26.8,17.4 24,19.6 24,15.2 26.8,17.4 \t\t\t\"/>\n      </g>\n      <rect x=\"21.7\" y=\"16.9\" class=\"st0\" width=\"3.4\" height=\"0.9\"/>\n    </g>\n    <g>\n      <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\n        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\"/>\n    </g>\n  </g>\n</svg>\n`\n\nexport const geography = {\n  name: 'geography',\n  description: 'a group of Geographic Components',\n  icon,\n  templates: []\n}\n"]}

package/dist/groups/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    name: string;
+    description: string;
+    icon: string;
+    templates: never[];
+}[];
+export default _default;

package/dist/groups/index.js

@@ -0,0 +1,3 @@
+import { geography } from './geography';
+export default [geography];
+//# sourceMappingURL=index.js.map

package/dist/groups/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/groups/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,eAAe,CAAC,SAAS,CAAC,CAAA","sourcesContent":["import { geography } from './geography'\n\nexport default [geography]\n"]}

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,3 @@
+export { default as Openlayers } from './openlayers';
+export { default as OpenLayersMarker } from './ol-marker';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,aAAa,CAAA","sourcesContent":["export { default as Openlayers } from './openlayers'\nexport { default as OpenLayersMarker } from './ol-marker'\n"]}

package/dist/ol-marker.d.ts

@@ -0,0 +1,79 @@
+import { Component, InfoWindow as SceneInfoWindow, Properties, Shape } from '@hatiolab/things-scene';
+import Openlayers from './openlayers';
+import 'ol/ol.css';
+import { Map, MapBrowserEvent } from 'ol';
+import { Style } from 'ol/style';
+declare const OpenLayersMarker_base: typeof Shape;
+export default class OpenLayersMarker extends OpenLayersMarker_base {
+    _infoWindow: any;
+    _marker: any;
+    _map: Map | null;
+    static markerStyle: Style;
+    dispose(): void;
+    ready(): void;
+    get map(): Map | null;
+    get infoWindow(): any;
+    findInfoWindow(type: string): Component | undefined;
+    setInfoContent(sceneInfoWindow: SceneInfoWindow): void;
+    openInfoWindow(iw: SceneInfoWindow): void;
+    onmarkerclick(e: MapBrowserEvent<UIEvent>): void;
+    onmarkermouseover(e: MapBrowserEvent<UIEvent>): void;
+    onmarkermouseout(e: MapBrowserEvent<UIEvent>): void;
+    set marker(marker: any);
+    get marker(): any;
+    render(context: CanvasRenderingContext2D): void;
+    detachFromOldOpenlayers(map: Openlayers): void;
+    attachToNewOpenlayers(map: Openlayers): void;
+    onchangeTargetMap(after: string, before: string): void;
+    get targetMap(): Openlayers;
+    onchange(after: Properties, before: Properties): void;
+    get latlng(): {
+        lat: any;
+        lng: any;
+    };
+    set latlng(latlng: {
+        lat: any;
+        lng: any;
+    });
+    get nature(): {
+        mutable: boolean;
+        resizable: boolean;
+        rotatable: boolean;
+        properties: ({
+            type: string;
+            label: string;
+            name: string;
+            property: {
+                component: string;
+                step?: undefined;
+                max?: undefined;
+                min?: undefined;
+                options?: undefined;
+            };
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            property: {
+                step: number;
+                max: number;
+                min: number;
+                component?: undefined;
+                options?: undefined;
+            };
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            property: {
+                options: string[];
+                component?: undefined;
+                step?: undefined;
+                max?: undefined;
+                min?: undefined;
+            };
+        })[];
+        'value-property': string;
+    };
+}
+export {};

package/dist/ol-marker.js

@@ -0,0 +1,247 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, RectPath, Shape } from '@hatiolab/things-scene';
+import 'ol/ol.css';
+import { Overlay } from 'ol';
+import { fromLonLat } from 'ol/proj';
+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) {
+    constructor() {
+        super(...arguments);
+        this._map = null;
+    }
+    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) {
+        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) {
+        var tpl = Component.template(sceneInfoWindow.model.frontSideTemplate);
+        var content = `<style>${sceneInfoWindow.model.style}</style>` + tpl(this);
+        this.infoWindow.setContent(content);
+    }
+    openInfoWindow(iw) {
+        this.setInfoContent(iw);
+        if (!this.map)
+            return;
+        this.infoWindow.open(this.map, this.marker);
+    }
+    onmarkerclick(e) {
+        var iw = this.findInfoWindow('tap');
+        iw && this.openInfoWindow(iw);
+        // this.trigger('click', e.ya) ??????
+    }
+    onmarkermouseover(e) {
+        var iw = this.findInfoWindow('hover');
+        iw && this.openInfoWindow(iw);
+    }
+    onmarkermouseout(e) {
+        var iw = this.findInfoWindow('hover');
+        iw && this.infoWindow.close();
+    }
+    set marker(marker) {
+        this._marker = marker;
+    }
+    get marker() {
+        return this._marker;
+    }
+    render(context) {
+        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) {
+        var _a;
+        if (this._marker && map) {
+            (_a = map.vectorSource) === null || _a === void 0 ? void 0 : _a.removeFeature(this._marker);
+            this._marker = null;
+        }
+    }
+    attachToNewOpenlayers(map) {
+        var _a;
+        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]))
+            });
+            (_a = map.vectorSource) === null || _a === void 0 ? void 0 : _a.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, before) {
+        const oldMap = this.root.findById(before);
+        const newMap = this.root.findById(after);
+        this.detachFromOldOpenlayers(oldMap);
+        this.attachToNewOpenlayers(newMap);
+    }
+    get targetMap() {
+        const { targetMap } = this.state;
+        return this.root.findById(targetMap);
+    }
+    onchange(after, before) {
+        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 _a;
+        var { lat, lng } = latlng;
+        (_a = this.marker) === null || _a === void 0 ? void 0 : _a.getGeometry().setCoordinates(fromLonLat([lng, lat]));
+        this.setState({
+            lat,
+            lng
+        });
+    }
+    get nature() {
+        return NATURE;
+    }
+}
+OpenLayersMarker.markerStyle = 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>')
+    })
+});
+Component.register('ol-marker', OpenLayersMarker);
+//# sourceMappingURL=ol-marker.js.map

package/dist/ol-marker.js.map

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

package/dist/openlayers.d.ts

@@ -0,0 +1,37 @@
+import { Map } from 'ol';
+import { Style } from 'ol/style.js';
+import { Vector as VectorSource } from 'ol/source';
+import { Geometry } from 'ol/geom';
+import { Component, HTMLOverlayContainer, Properties, ComponentNature } from '@hatiolab/things-scene';
+export default class Openlayers extends HTMLOverlayContainer {
+    static markerStyle: Style;
+    _anchor?: HTMLDivElement;
+    _map: Map | null;
+    _listenTo?: Component;
+    _listener?: Function;
+    _vectorSource?: VectorSource<Geometry>;
+    get eventMap(): {
+        'model-layer': {
+            '(self)': {
+                change: (after: any) => void;
+            };
+        };
+    };
+    rescale(): void;
+    createElement(): void;
+    get tagName(): string;
+    get map(): Map | null;
+    dispose(): void;
+    setElementProperties(div: HTMLDivElement): void;
+    onchange(after: Properties, before: Properties): void;
+    get latlng(): {
+        lat: any;
+        lng: any;
+    };
+    set latlng(latlng: {
+        lat: any;
+        lng: any;
+    });
+    get vectorSource(): VectorSource<Geometry> | undefined;
+    get nature(): ComponentNature;
+}