feat(polyline): add Polyline Component

playground/App.vue

@@ -8,7 +8,8 @@
     :initLayers="initLayers"
     @onLoad="loadMap($event)"
   >
-    <naver-polygon :paths="polygonPaths" @onLoad="loadPolygon($event)" />
+    <naver-polyline :paths="polylinePaths" @onLoad="loadPolyline($event)" />
+    <!-- <naver-polygon :paths="polygonPaths" @onLoad="loadPolygon($event)" /> -->
     <!-- <naver-rectangle
       :bounds="rectangleBounds"
       @onLoad="loadRectangle($event)"
@@ -57,6 +58,7 @@ import {
   NaverEllipse,
   NaverRectangle,
   NaverPolygon,
+  NaverPolyline,
 } from "vue3-naver-maps";
 
 export default defineComponent({
@@ -68,6 +70,7 @@ export default defineComponent({
     NaverEllipse,
     NaverRectangle,
     NaverPolygon,
+    NaverPolyline,
   },
   name: "App",
   setup: (props, { emit }) => {
@@ -102,6 +105,20 @@ export default defineComponent({
       [126.9837414, 37.5653719],
       [126.9811162, 37.5651081],
     ]);
+    const polyline = ref<naver.maps.Polyline>();
+    const polylinePaths = ref<naver.maps.ArrayOfCoords>([
+      new window.naver.maps.LatLng(37.359924641705476, 127.1148204803467),
+      new window.naver.maps.LatLng(37.36343797188166, 127.11486339569092),
+      new window.naver.maps.LatLng(37.368520071054576, 127.11473464965819),
+      new window.naver.maps.LatLng(37.3685882848096, 127.1088123321533),
+      new window.naver.maps.LatLng(37.37295383612657, 127.10876941680907),
+      new window.naver.maps.LatLng(37.38001321351567, 127.11851119995116),
+      new window.naver.maps.LatLng(37.378546827477855, 127.11984157562254),
+      new window.naver.maps.LatLng(37.376637072444105, 127.12052822113036),
+      new window.naver.maps.LatLng(37.37530703574853, 127.12190151214598),
+      new window.naver.maps.LatLng(37.371657839593894, 127.11645126342773),
+      new window.naver.maps.LatLng(37.36855417793982, 127.1207857131958),
+    ]);
     const infoWindowOptions = ref<naver.maps.InfoWindowOptions>();
     const isOpen = ref<boolean>(false);
     const mapSize = reactive({
@@ -149,6 +166,10 @@ export default defineComponent({
       polygon.value = polygonObject;
       console.log(polygon.value);
     };
+    const loadPolyline = (polylineObject: naver.maps.Polyline) => {
+      polyline.value = polylineObject;
+      console.log(polyline.value);
+    };
 
     const openInfoWindow = () => {
       // console.log("openAction: ", infoWindow.value);
@@ -193,6 +214,9 @@ export default defineComponent({
       polygon,
       polygonPaths,
       loadPolygon,
+      polyline,
+      polylinePaths,
+      loadPolyline,
     };
   },
 });

src/components/Polyline.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_POLYLINE, addEventPolyline } from "../utils";
+
+export default defineComponent({
+  name: "Polyline",
+  emits: [...UI_EVENT_POLYLINE, "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.PolylineOptions>,
+      default: {},
+    },
+  },
+  setup: (props, { emit }) => {
+    const map = inject(naverMapObject)!;
+    const polyline = ref<naver.maps.Polyline>();
+    const { options, paths } = toRefs(props);
+
+    const createPolygon = () => {
+      polyline.value = new window.naver.maps.Polyline(
+        Object.assign(
+          {
+            map: map.value,
+            paths: paths.value,
+          },
+          options.value
+        )
+      );
+
+      addEventPolyline(emit, polyline.value);
+      emit("onLoad", polyline.value);
+    };
+
+    const setPolygon = (newOptions: naver.maps.PolylineOptions) => {
+      polyline.value!.setOptions(newOptions);
+    };
+
+    onMounted(() => {
+      watchEffect(() => {
+        const newOptions = options.value;
+        if (!map.value) return;
+        polyline.value ? setPolygon(newOptions) : createPolygon();
+      });
+    });
+
+    onUnmounted(() => polyline.value!.setMap(null));
+  },
+});
+</script>

src/index.ts

@@ -7,6 +7,7 @@ import NaverCircle from "./components/Circle.vue";
 import NaverEllipse from "./components/Ellipse.vue";
 import NaverRectangle from "./components/Rectangle.vue";
 import NaverPolygon from "./components/Polygon.vue";
+import NaverPolyline from "./components/Polyline.vue";
 
 export { naverV3 } from "./types";
 
@@ -21,5 +22,6 @@ export {
   NaverEllipse,
   NaverRectangle,
   NaverPolygon,
+  NaverPolyline,
 };
 export default install;

src/utils/eventAction.ts

@@ -6,6 +6,7 @@ import {
   UI_EVENT_ELLIPSE,
   UI_EVENT_RECTANGLE,
   UI_EVENT_POLYGON,
+  UI_EVENT_POLYLINE,
 } from "./eventList";
 
 export function addEvent(emit: any, target: any, name: string) {
@@ -41,3 +42,7 @@ export function addEventRectangle(emit: any, target: naver.maps.Rectangle) {
 export function addEventPolygon(emit: any, target: naver.maps.Polygon) {
   UI_EVENT_POLYGON.forEach((name) => addEvent(emit, target, name));
 }
+
+export function addEventPolyline(emit: any, target: naver.maps.Polyline) {
+  UI_EVENT_POLYLINE.forEach((name) => addEvent(emit, target, name));
+}

src/utils/eventList.ts

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