feat(polygon): add Polygon Component

playground/App.vue

@@ -8,10 +8,11 @@
     :initLayers="initLayers"
     @onLoad="loadMap($event)"
   >
-    <naver-rectangle
+    <naver-polygon :paths="polygonPaths" @onLoad="loadPolygon($event)" />
+    <!-- <naver-rectangle
       :bounds="rectangleBounds"
       @onLoad="loadRectangle($event)"
-    ></naver-rectangle>
+    ></naver-rectangle> -->
     <!-- <naver-ellipse
       :bounds="ellipseBounds"
       @onLoad="loadEllpise($event)"
@@ -55,6 +56,7 @@ import {
   NaverCircle,
   NaverEllipse,
   NaverRectangle,
+  NaverPolygon,
 } from "../dist/vue3-naver-maps";
 
 export default defineComponent({
@@ -65,6 +67,7 @@ export default defineComponent({
     NaverCircle,
     NaverEllipse,
     NaverRectangle,
+    NaverPolygon,
   },
   name: "App",
   setup: (props, { emit }) => {
@@ -86,6 +89,19 @@ export default defineComponent({
       west: 126.97837068565364,
       east: 127.97837068565364,
     });
+    const polygon = ref<naver.maps.Polygon>();
+    const polygonPaths = ref<naver.maps.ArrayOfCoordsLiteral>([
+      [126.9797895, 37.5670131],
+      [126.979215, 37.5649555],
+      [126.9766789, 37.5649082],
+      [126.9789515, 37.5637645],
+      [126.9785598, 37.5614914],
+      [126.9804949, 37.5632666],
+      [126.9827689, 37.5619065],
+      [126.9818039, 37.5639213],
+      [126.9837414, 37.5653719],
+      [126.9811162, 37.5651081],
+    ]);
     const infoWindowOptions = ref<naver.maps.InfoWindowOptions>();
     const isOpen = ref<boolean>(false);
     const mapSize = reactive({
@@ -129,6 +145,10 @@ export default defineComponent({
       rectangle.value = rectangleObject;
       console.log(rectangle.value);
     };
+    const loadPolygon = (polygonObject: naver.maps.Polygon) => {
+      polygon.value = polygonObject;
+      console.log(polygon.value);
+    };
 
     const openInfoWindow = () => {
       // console.log("openAction: ", infoWindow.value);
@@ -170,6 +190,9 @@ export default defineComponent({
       rectangle,
       rectangleBounds,
       loadRectangle,
+      polygon,
+      polygonPaths,
+      loadPolygon,
     };
   },
 });

src/components/Polygon.vue

@@ -0,0 +1,69 @@
+<template></template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  PropType,
+  inject,
+  ref,
+  toRefs,
+  onMounted,
+  onUnmounted,
+  watchEffect,
+} from "vue";
+import { naverMapObject } from "../injectionKeys";
+import { UI_EVENT_POLYGON, addEventPolygon } from "../utils";
+
+export default defineComponent({
+  name: "Polygon",
+  emits: [...UI_EVENT_POLYGON, "onLoad"],
+  props: {
+    paths: {
+      type: Array as PropType<
+        | naver.maps.ArrayOfCoords
+        | naver.maps.KVOArrayOfCoords
+        | naver.maps.ArrayOfCoordsLiteral
+      >,
+      required: true,
+    },
+    options: {
+      type: Object as PropType<naver.maps.PolygonOptions>,
+      default: {},
+    },
+  },
+  setup: (props, { emit }) => {
+    const map = inject(naverMapObject)!;
+    const polygon = ref<naver.maps.Polygon>();
+    const { options, paths } = toRefs(props);
+
+    const createPolygon = () => {
+      polygon.value = new window.naver.maps.Polygon(
+        Object.assign(
+          {
+            map: map.value,
+            paths: paths.value,
+          },
+          options.value
+        )
+      );
+
+      addEventPolygon(emit, polygon.value);
+      emit("onLoad", polygon.value);
+    };
+
+    const setPolygon = (newOptions: naver.maps.PolygonOptions) => {
+      polygon.value!.setOptions(newOptions);
+    };
+
+    onMounted(() => {
+      watchEffect(() => {
+        const newOptions = options.value;
+        if (!map.value) return;
+        polygon.value ? setPolygon(newOptions) : createPolygon();
+      });
+    });
+
+    onUnmounted(() => polygon.value!.setMap(null));
+  },
+});
+</script>

src/index.ts

@@ -6,6 +6,7 @@ import NaverInfoWindow from "./components/InfoWindow.vue";
 import NaverCircle from "./components/Circle.vue";
 import NaverEllipse from "./components/Ellipse.vue";
 import NaverRectangle from "./components/Rectangle.vue";
+import NaverPolygon from './components/Polygon.vue'
 
 // export * from "./apis";
 export { naverV3 } from "./types";
@@ -20,6 +21,7 @@ export {
   NaverCircle,
   NaverEllipse,
   NaverRectangle,
+  NaverPolygon,
   /**
    * default
    */

src/utils/eventAction.ts

@@ -5,6 +5,7 @@ import {
   UI_EVENT_CIRCLE,
   UI_EVENT_ELLIPSE,
   UI_EVENT_RECTANGLE,
+  UI_EVENT_POLYGON,
 } from "./eventList";
 
 export function addEvent(emit: any, target: any, name: string) {
@@ -36,3 +37,7 @@ export function addEventEllipse(emit: any, target: naver.maps.Ellipse) {
 export function addEventRectangle(emit: any, target: naver.maps.Rectangle) {
   UI_EVENT_RECTANGLE.forEach((name) => addEvent(emit, target, name));
 }
+
+export function addEventPolygon(emit: any, target: naver.maps.Polygon) {
+  UI_EVENT_POLYGON.forEach((name) => addEvent(emit, target, name));
+}

src/utils/eventList.ts

@@ -134,3 +134,18 @@ export const UI_EVENT_RECTANGLE = [
   "visible_changed",
   "zIndex_changed",
 ];
+
+/**
+ * Naver Rectangle UI Event
+ */
+export const UI_EVENT_POLYGON = [
+  "click",
+  "clickable_changed",
+  "dblclick",
+  "mousedown",
+  "mouseout",
+  "mouseover",
+  "mouseup",
+  "visible_changed",
+  "zIndex_changed",
+];