feat: Add polygon component and function

<script>

import { onMounted, ref, inject } from "vue";

import { remapEvents, propsBinder } from "../utils.js";

import { props, setup as polygonSetup } from "../functions/polygon";

/**

 * Polygon component, lets you add and customize polygon regions on the map

 */

export default {

  name: "LPolygon",

  props,

  setup(props, context) {

    const leafletRef = ref({});

    const addLayer = inject("addLayer");

    const { options, methods } = polygonSetup(props, leafletRef, context);

    onMounted(async () => {

      const { polygon, DomEvent, setOptions } = await import(

        "leaflet/dist/leaflet-src.esm"

      );

      leafletRef.value = polygon(props.latLngs, options);

      const listeners = remapEvents(context.attrs);

      DomEvent.on(leafletRef.value, listeners);

      propsBinder(methods, leafletRef.value, props, setOptions);

      addLayer({

        ...props,

        ...methods,

        leafletObject: leafletRef.value,

      });

    });

  },

  render() {

    return null;

  },

};

</script>

import { props as polylineProps, setup as polylineSetup } from "./polyline";

export const props = {

  ...polylineProps,

};

export const setup = (props, leafletRef, context) => {

  const { options: polylineOptions, methods: polylineMethods } = polylineSetup(

    props,

    leafletRef,

    context

  );

  const options = {

    ...polylineOptions,

    ...props,

  };

  const methods = {

    ...polylineMethods,

    toGeoJSON(precision) {

      return leafletRef.value.toGeoJSON(precision);

    },

  };

  return { options, methods };

};