@summeruse/ol 0.0.0 → 0.0.1-beta.2

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# @summeruse/ol
+
+## 0.0.1-beta.2
+
+### Patch Changes
+
+- 添加 ol-map 组件
+- 添加 useGraticule
+- 添加 useSwitchBaseLayer
+- 添加 n-ol-pointermove
+
+## 0.0.1-beta.0
+
+### Patch Changes
+
+- 更新 ol-contextmenu Props 类型

package/dist/index.js

@@ -1,44 +1,286 @@
-import { defineComponent as d, ref as c, createBlock as f, openBlock as m, unref as v } from "vue";
-import { NDropdown as x } from "naive-ui";
-const _ = /* @__PURE__ */ d({
-  __name: "n-ol-contextmenu",
+import { defineComponent as y, ref as d, onMounted as X, createBlock as $, openBlock as _, unref as C, watch as a, provide as Y, createElementBlock as T, renderSlot as q, h as H, isVNode as S, shallowRef as J, withCtx as Q, createVNode as U, toValue as ee } from "vue";
+import { NDropdown as te, NPopover as oe } from "naive-ui";
+import { Map as ne, View as ae } from "ol";
+import { Zoom as k, Attribution as I, Rotate as R, FullScreen as B, OverviewMap as N, ScaleLine as A } from "ol/control";
+import { DragPan as O, MouseWheelZoom as V, DoubleClickZoom as P, PinchRotate as D, PinchZoom as j, DragRotate as F, KeyboardPan as L, KeyboardZoom as z } from "ol/interaction";
+import { Graticule as E } from "ol/layer";
+import { Stroke as W } from "ol/style";
+const we = /* @__PURE__ */ y({
+  __name: "index",
   props: {
     olMap: {},
-    createDropdownOptions: { type: Function }
+    createOptions: { type: Function }
   },
-  setup(a) {
-    const s = a, { olMap: n } = s, o = c({
+  setup(n) {
+    const i = n, { olMap: t } = i, l = d({
       visible: !1,
       x: 0,
       y: 0
-    }), r = () => {
-      o.value.visible = !1;
-    }, l = c();
-    n.getViewport().oncontextmenu = (e) => {
-      e.preventDefault();
-      const t = n.getEventPixel(e), i = n.getEventCoordinate(e), u = n.getFeaturesAtPixel(t);
-      l.value = s.createDropdownOptions({ event: e, pixel: t, coordinate: i, features: u }), o.value = {
-        visible: !0,
-        x: e.clientX,
-        y: e.clientY
-      };
+    }), o = () => {
+      l.value.visible = !1;
+    }, s = d();
+    X(() => {
+      const u = t.getViewport();
+      u && (u.oncontextmenu = (r) => {
+        r.preventDefault();
+        const m = t.getEventPixel(r), w = t.getEventCoordinate(r), v = t.getFeaturesAtPixel(m);
+        s.value = i.createOptions({ event: r, pixel: m, coordinate: w, features: v }), l.value = {
+          visible: !0,
+          x: r.clientX,
+          y: r.clientY
+        };
+      });
+    });
+    const c = (u, r) => {
+      const { onClick: m } = r;
+      m && m(), l.value.visible = !1;
     };
-    const p = (e, t) => {
-      const { onClick: i } = t;
-      i && i(), o.value.visible = !1;
-    };
-    return (e, t) => (m(), f(v(x), {
+    return (u, r) => (_(), $(C(te), {
       placement: "bottom-start",
       trigger: "manual",
-      show: l.value && l.value.length > 0 && o.value.visible,
-      x: o.value.x,
-      y: o.value.y,
-      options: l.value,
-      "on-clickoutside": r,
-      onSelect: p
+      show: s.value && s.value.length > 0 && l.value.visible,
+      x: l.value.x,
+      y: l.value.y,
+      options: s.value,
+      "on-clickoutside": o,
+      onSelect: c
     }, null, 8, ["show", "x", "y", "options"]));
   }
-});
+}), ie = Symbol(), ve = /* @__PURE__ */ y({
+  __name: "index",
+  props: {
+    olMap: { default: () => new ne() },
+    center: { default: () => [0, 0] },
+    zoom: { default: 2 },
+    minZoom: { default: 2 },
+    maxZoom: { default: 18 },
+    constrainResolution: { type: Boolean, default: !0 },
+    projection: {},
+    extent: {},
+    showZoom: { type: Boolean, default: !1 },
+    showAttribution: { type: Boolean, default: !1 },
+    showRotate: { type: Boolean, default: !1 },
+    showFullScreen: { type: Boolean, default: !1 },
+    showOverview: { type: Boolean, default: !1 },
+    showScale: { type: Boolean, default: !1 },
+    dragPan: { type: Boolean, default: !0 },
+    mouseWheelZoom: { type: Boolean, default: !0 },
+    doubleClickZoom: { type: Boolean, default: !1 },
+    pinchRotate: { type: Boolean },
+    pinchZoom: { type: Boolean },
+    altShiftDragRotate: { type: Boolean }
+  },
+  setup(n, { expose: i }) {
+    const t = n, l = d(), o = t.olMap, s = new ae({
+      projection: t.projection,
+      extent: t.extent
+    });
+    o.setView(s), a(() => t.zoom, (e) => {
+      s.setZoom(e);
+    }, {
+      immediate: !0
+    }), a(() => t.center, (e) => {
+      s.setCenter(e);
+    }, {
+      immediate: !0
+    }), a(() => t.constrainResolution, (e) => {
+      s.setConstrainResolution(e);
+    }, {
+      immediate: !0
+    }), a(() => t.minZoom, (e) => {
+      e && s.setMinZoom(e);
+    }, {
+      immediate: !0
+    }), a(() => t.maxZoom, (e) => {
+      e && s.setMaxZoom(e);
+    }, {
+      immediate: !0
+    }), a(l, (e) => {
+      e && o.setTarget(e);
+    }), i({
+      olMap: o
+    }), Y(ie, o);
+    const c = o.getControls().getArray(), u = c.find((e) => e instanceof k) || new k(), r = c.find((e) => e instanceof I) || new I(), m = c.find((e) => e instanceof R) || new R(), w = c.find((e) => e instanceof B) || new B(), v = c.find((e) => e instanceof N) || new N(), p = c.find((e) => e instanceof A) || new A();
+    a(() => t.showZoom, (e) => {
+      u.setMap(e ? o : null);
+    }, {
+      immediate: !0
+    }), a(() => t.showAttribution, (e) => {
+      r.setMap(e ? o : null);
+    }, {
+      immediate: !0
+    }), a(() => t.showRotate, (e) => {
+      m.setMap(e ? o : null);
+    }, {
+      immediate: !0
+    }), a(() => t.showFullScreen, (e) => {
+      w.setMap(e ? o : null);
+    }, {
+      immediate: !0
+    }), a(() => t.showOverview, (e) => {
+      v.setMap(e ? o : null);
+    }, {
+      immediate: !0
+    }), a(() => t.showScale, (e) => {
+      p.setMap(e ? o : null);
+    }, {
+      immediate: !0
+    });
+    const f = o.getInteractions().getArray(), h = f.find((e) => e instanceof O) || new O(), x = f.find((e) => e instanceof V) || new V(), b = f.find((e) => e instanceof P) || new P(), g = f.find((e) => e instanceof D) || new D(), M = f.find((e) => e instanceof j) || new j(), Z = f.find((e) => e instanceof F) || new F(), G = f.find((e) => e instanceof L) || new L(), K = f.find((e) => e instanceof z) || new z();
+    return o.removeInteraction(h), o.addInteraction(h), o.removeInteraction(x), o.addInteraction(x), o.removeInteraction(b), o.addInteraction(b), o.removeInteraction(g), o.addInteraction(g), o.removeInteraction(M), o.addInteraction(M), o.removeInteraction(Z), o.addInteraction(Z), o.removeInteraction(G), o.removeInteraction(K), a(() => t.dragPan, (e) => {
+      h.setActive(e);
+    }, {
+      immediate: !0
+    }), a(() => t.mouseWheelZoom, (e) => {
+      x.setActive(e);
+    }, {
+      immediate: !0
+    }), a(() => t.doubleClickZoom, (e) => {
+      b.setActive(e);
+    }, {
+      immediate: !0
+    }), a(() => t.pinchRotate, (e) => {
+      g.setActive(e);
+    }, {
+      immediate: !0
+    }), a(() => t.pinchZoom, (e) => {
+      M.setActive(e);
+    }, {
+      immediate: !0
+    }), a(() => t.altShiftDragRotate, (e) => {
+      Z.setActive(e);
+    }, {
+      immediate: !0
+    }), (e, re) => (_(), T("div", {
+      ref_key: "mapRef",
+      ref: l
+    }, [
+      q(e.$slots, "default", {
+        olMap: C(o),
+        mapRef: l.value
+      })
+    ], 512));
+  }
+}), le = y({
+  props: {
+    dynamicVNode: {
+      type: [Function, String, Object],
+      default: void 0
+    }
+  },
+  setup(n) {
+    return () => {
+      if (!n.dynamicVNode) return H("span");
+      if (typeof n.dynamicVNode == "string" || S(n.dynamicVNode)) return n.dynamicVNode;
+      if (typeof n.dynamicVNode == "function") {
+        const i = n.dynamicVNode();
+        return S(i), i;
+      }
+    };
+  }
+}), ye = /* @__PURE__ */ y({
+  __name: "index",
+  props: {
+    olMap: {},
+    createOptions: { type: Function }
+  },
+  setup(n) {
+    const i = n, t = d({
+      visible: !1,
+      x: 0,
+      y: 0
+    }), l = J(), o = d("bottom-start"), s = d(!1), c = d(!1);
+    return X(() => {
+      var u;
+      (u = i.olMap) == null || u.on("pointermove", (r) => {
+        const m = i.olMap.getFeaturesAtPixel(r.pixel), { clientX: w, clientY: v } = r.originalEvent;
+        t.value.visible = !1;
+        const p = i.createOptions({
+          pixel: r.pixel,
+          coordinate: r.coordinate,
+          features: m
+        });
+        p && (l.value = p.content, o.value = p.placement || "bottom-start", c.value = p.showArrow || !1, s.value = p.raw || !1, t.value.visible = !0, t.value.x = w, t.value.y = v);
+      });
+    }), (u, r) => (_(), $(C(oe), {
+      "show-arrow": c.value,
+      raw: s.value,
+      placement: o.value,
+      show: t.value.visible,
+      x: t.value.x,
+      y: t.value.y,
+      trigger: "manual",
+      class: "n-ol-pointermove"
+    }, {
+      default: Q(() => [
+        U(le, { "dynamic-v-node": l.value }, null, 8, ["dynamic-v-node"])
+      ]),
+      _: 1
+    }, 8, ["show-arrow", "raw", "placement", "show", "x", "y"]));
+  }
+}), he = (n) => {
+  const i = d(n.defaultShow || !1);
+  let t = new E({
+    strokeStyle: n.strokeStyle || new W({
+      color: "#000",
+      width: 1.5,
+      lineDash: [4, 4]
+    }),
+    showLabels: !0,
+    wrapX: !1,
+    zIndex: 1
+  });
+  return a(
+    i,
+    (l) => {
+      if (t.setMap(null), l) {
+        t = new E({
+          strokeStyle: new W({
+            color: "#555",
+            width: 1.5,
+            lineDash: [4, 4]
+          }),
+          showLabels: !0,
+          wrapX: !1,
+          zIndex: 1
+        });
+        const o = ee(n.olMap);
+        o && t.setMap(o);
+      }
+    },
+    {
+      immediate: !0,
+      deep: !0
+    }
+  ), {
+    showGraticule: i
+  };
+}, xe = (n) => {
+  const i = d(n.defaultLayerName || Object.keys(n.layers)[0]);
+  return Object.values(n.layers).map((t) => {
+    t.map((l) => {
+      n.olMap.addLayer(l);
+    });
+  }), a(
+    i,
+    () => {
+      Object.entries(n.layers).map(([t, l]) => {
+        const o = t === i.value;
+        l.map((s) => {
+          s.setVisible(o);
+        });
+      });
+    },
+    {
+      immediate: !0
+    }
+  ), { visibleLayerName: i };
+};
 export {
-  _ as NOlContextmenu
+  we as NOlContextmenu,
+  ye as NOlPointermove,
+  ve as OlMap,
+  ie as olMapInjectionKey,
+  he as useGraticule,
+  xe as useSwitchBaseLayer
 };

package/dist/ol.css

@@ -0,0 +1 @@
+.n-ol-pointermove.n-popover{box-shadow:none!important}

package/es/components/common/render-v-node.vue.d.ts

@@ -0,0 +1,17 @@
+import { PropType, VNodeChild } from 'vue';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    dynamicVNode: {
+        type: PropType<(() => VNodeChild) | VNodeChild | string>;
+        default: undefined;
+    };
+}>, () => string | number | boolean | void | import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}> | import('vue').VNodeArrayChildren | null, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    dynamicVNode: {
+        type: PropType<(() => VNodeChild) | VNodeChild | string>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    dynamicVNode: VNodeChild | (() => VNodeChild);
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/components/common/render-v-node.vue.mjs

@@ -0,0 +1,22 @@
+import { defineComponent as i, h as t, isVNode as d } from "vue";
+const c = i({
+  props: {
+    dynamicVNode: {
+      type: [Function, String, Object],
+      default: void 0
+    }
+  },
+  setup(e) {
+    return () => {
+      if (!e.dynamicVNode) return t("span");
+      if (typeof e.dynamicVNode == "string" || d(e.dynamicVNode)) return e.dynamicVNode;
+      if (typeof e.dynamicVNode == "function") {
+        const n = e.dynamicVNode();
+        return d(n), n;
+      }
+    };
+  }
+});
+export {
+  c as default
+};

package/es/components/common/render-v-node.vue2.mjs

@@ -0,0 +1,4 @@
+import f from "./render-v-node.vue.mjs";
+export {
+  f as default
+};

package/es/components/index.d.ts

@@ -1,3 +1,3 @@
-import { default as NOlContextmenu } from './ol-contextmenu/n-ol-contextmenu.vue';
-export { NOlContextmenu };
-export * from './ol-contextmenu/props';
+export * from './n-ol-contextmenu';
+export * from './ol-map';
+export * from './n-ol-pointermove';

package/es/components/n-ol-contextmenu/index.d.ts

@@ -0,0 +1,3 @@
+import { default as NOlContextmenu } from './index.vue';
+export { NOlContextmenu };
+export * from './props';

package/es/components/n-ol-contextmenu/index.vue.d.ts

@@ -0,0 +1,3 @@
+import { NOlContextmenuProps } from './props';
+declare const _default: import('vue').DefineComponent<NOlContextmenuProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<NOlContextmenuProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/es/components/n-ol-contextmenu/index.vue.mjs

@@ -0,0 +1,47 @@
+import { defineComponent as d, ref as a, onMounted as v, createBlock as x, openBlock as m, unref as g } from "vue";
+import { NDropdown as w } from "naive-ui";
+const y = /* @__PURE__ */ d({
+  __name: "index",
+  props: {
+    olMap: {},
+    createOptions: { type: Function }
+  },
+  setup(c) {
+    const s = c, { olMap: n } = s, o = a({
+      visible: !1,
+      x: 0,
+      y: 0
+    }), r = () => {
+      o.value.visible = !1;
+    }, l = a();
+    v(() => {
+      const i = n.getViewport();
+      i && (i.oncontextmenu = (e) => {
+        e.preventDefault();
+        const t = n.getEventPixel(e), u = n.getEventCoordinate(e), f = n.getFeaturesAtPixel(t);
+        l.value = s.createOptions({ event: e, pixel: t, coordinate: u, features: f }), o.value = {
+          visible: !0,
+          x: e.clientX,
+          y: e.clientY
+        };
+      });
+    });
+    const p = (i, e) => {
+      const { onClick: t } = e;
+      t && t(), o.value.visible = !1;
+    };
+    return (i, e) => (m(), x(g(w), {
+      placement: "bottom-start",
+      trigger: "manual",
+      show: l.value && l.value.length > 0 && o.value.visible,
+      x: o.value.x,
+      y: o.value.y,
+      options: l.value,
+      "on-clickoutside": r,
+      onSelect: p
+    }, null, 8, ["show", "x", "y", "options"]));
+  }
+});
+export {
+  y as default
+};

package/es/components/n-ol-contextmenu/index.vue2.mjs

@@ -0,0 +1,4 @@
+import f from "./index.vue.mjs";
+export {
+  f as default
+};

package/{lib/components/ol-contextmenu → es/components/n-ol-contextmenu}/props.d.ts

@@ -3,13 +3,15 @@ import { DropdownMixedOption } from 'naive-ui/es/dropdown/src/interface';
 import { Pixel } from 'ol/pixel';
 import { Coordinate } from 'ol/coordinate';
 import { FeatureLike } from 'ol/Feature';
-export interface Options {
+export interface NOlContextmenuOptions {
     event: MouseEvent;
     pixel: Pixel;
     coordinate: Coordinate;
     features: FeatureLike[];
 }
-export interface Props {
+export interface NOlContextmenuProps {
     olMap: OLMap;
-    createDropdownOptions: (options: Options) => DropdownMixedOption[];
+    createOptions: (options: NOlContextmenuOptions) => (DropdownMixedOption & {
+        onClick?: (options: NOlContextmenuOptions) => void;
+    })[];
 }

package/es/components/n-ol-pointermove/index.d.ts

@@ -0,0 +1,3 @@
+import { default as NOlPointermove } from './index.vue';
+export { NOlPointermove };
+export * from './props';

package/es/components/n-ol-pointermove/index.vue.d.ts

@@ -0,0 +1,3 @@
+import { NOlPointermoveProps } from './props';
+declare const _default: import('vue').DefineComponent<NOlPointermoveProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<NOlPointermoveProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/es/components/n-ol-pointermove/index.vue.mjs

@@ -0,0 +1,47 @@
+import { defineComponent as f, ref as t, shallowRef as w, onMounted as d, createBlock as x, openBlock as h, unref as _, withCtx as y, createVNode as b } from "vue";
+import { NPopover as g } from "naive-ui";
+import M from "../common/render-v-node.vue.mjs";
+const B = /* @__PURE__ */ f({
+  __name: "index",
+  props: {
+    olMap: {},
+    createOptions: { type: Function }
+  },
+  setup(p) {
+    const l = p, e = t({
+      visible: !1,
+      x: 0,
+      y: 0
+    }), r = w(), s = t("bottom-start"), i = t(!1), c = t(!1);
+    return d(() => {
+      var n;
+      (n = l.olMap) == null || n.on("pointermove", (o) => {
+        const u = l.olMap.getFeaturesAtPixel(o.pixel), { clientX: v, clientY: m } = o.originalEvent;
+        e.value.visible = !1;
+        const a = l.createOptions({
+          pixel: o.pixel,
+          coordinate: o.coordinate,
+          features: u
+        });
+        a && (r.value = a.content, s.value = a.placement || "bottom-start", c.value = a.showArrow || !1, i.value = a.raw || !1, e.value.visible = !0, e.value.x = v, e.value.y = m);
+      });
+    }), (n, o) => (h(), x(_(g), {
+      "show-arrow": c.value,
+      raw: i.value,
+      placement: s.value,
+      show: e.value.visible,
+      x: e.value.x,
+      y: e.value.y,
+      trigger: "manual",
+      class: "n-ol-pointermove"
+    }, {
+      default: y(() => [
+        b(M, { "dynamic-v-node": r.value }, null, 8, ["dynamic-v-node"])
+      ]),
+      _: 1
+    }, 8, ["show-arrow", "raw", "placement", "show", "x", "y"]));
+  }
+});
+export {
+  B as default
+};

package/es/components/n-ol-pointermove/index.vue3.mjs

@@ -0,0 +1,5 @@
+import o from "./index.vue.mjs";
+/* empty css            */
+export {
+  o as default
+};

package/es/components/n-ol-pointermove/props.d.ts

@@ -0,0 +1,20 @@
+import { PopoverPlacement } from 'naive-ui';
+import { Map as OLMap } from 'ol';
+import { Coordinate } from 'ol/coordinate';
+import { FeatureLike } from 'ol/Feature';
+import { Pixel } from 'ol/pixel';
+import { VNodeChild } from 'vue';
+export interface NOlPointermoveOptions {
+    pixel: Pixel;
+    coordinate: Coordinate;
+    features: FeatureLike[];
+}
+export interface NOlPointermoveProps {
+    olMap: OLMap;
+    createOptions: (data: NOlPointermoveOptions) => {
+        content: (() => VNodeChild) | VNodeChild | string;
+        raw?: boolean;
+        showArrow?: boolean;
+        placement?: PopoverPlacement;
+    } | undefined;
+}

package/es/components/ol-map/index.d.ts

@@ -0,0 +1,4 @@
+import { default as OlMap } from './index.vue';
+export { OlMap };
+export * from './props';
+export type OlMapInst = InstanceType<typeof OlMap>;

package/es/components/ol-map/index.vue.d.ts

@@ -0,0 +1,44 @@
+import { Map as OLMap } from 'ol';
+import { OlMapProps } from './props';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            olMap: OLMap;
+            mapRef: HTMLDivElement | undefined;
+        }): any;
+    };
+    refs: {
+        mapRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<OlMapProps, {
+    olMap: OLMap;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OlMapProps> & Readonly<{}>, {
+    olMap: OLMap;
+    center: import('ol/coordinate').Coordinate;
+    zoom: number;
+    minZoom: number;
+    maxZoom: number;
+    constrainResolution: boolean;
+    showZoom: boolean;
+    showAttribution: boolean;
+    showRotate: boolean;
+    showFullScreen: boolean;
+    showOverview: boolean;
+    showScale: boolean;
+    dragPan: boolean;
+    mouseWheelZoom: boolean;
+    doubleClickZoom: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    mapRef: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};