@summeruse/ol 0.1.0 → 0.1.1-beta.1

package/CHANGELOG.md

@@ -1,15 +1,21 @@
 # @summeruse/ol
 
-## 0.1.0
+## 0.1.1-beta.1
 
-### Minor Changes
+### Patch Changes
 
-- 更新 0.1.0 正式版
+- e651b52: 添加经纬度标签样式支持
 
-## 0.0.1
+## 0.1.1-beta.0
 
 ### Patch Changes
 
+- c26ae5a: 重构 useGraticule 以支持更灵活的样式配置
+
+## 0.1.0
+
+### Minor Changes
+
 - 8e34a3f: 添加 useDrawLineString useDrawPolygon
 - b6b95dc: 添加创建几何要素的实用函数
 - 58c1e99: 添加坐标系相关函数的注释

package/dist/index.js

@@ -1,88 +1,88 @@
-import { defineComponent as Y, ref as v, onMounted as D, createBlock as he, openBlock as U, unref as R, shallowRef as Ce, withCtx as ke, createVNode as Fe, watch as f, provide as Me, createElementBlock as Ae, renderSlot as Te, computed as pe, render as z, onUnmounted as Se, toValue as _e } from "vue";
-import { NDropdown as Re, NPopover as ze } from "naive-ui";
-import { RenderVNode as Ze } from "@summeruse/common";
-import { Map as Ge, View as Be, Feature as H, Overlay as Z } from "ol";
-import { Zoom as ne, Attribution as re, Rotate as oe, FullScreen as ie, OverviewMap as ae, ScaleLine as ce } from "ol/control";
-import { DragPan as le, MouseWheelZoom as se, DoubleClickZoom as ue, PinchRotate as fe, PinchZoom as de, DragRotate as me, KeyboardPan as ye, KeyboardZoom as we, Draw as Ee, Modify as Oe } from "ol/interaction";
-import { Point as De, LineString as W, Polygon as $, Circle as Ne, MultiPoint as je, MultiLineString as Ve, MultiPolygon as We } from "ol/geom";
-import Q from "ol/layer/Vector";
-import q from "ol/source/Vector";
-import { destination as $e, lineString as Xe, length as Ke, area as Ye, polygon as Ue, bearing as He, midpoint as Qe } from "@turf/turf";
-import { Circle as qe, Stroke as F, Fill as G, Text as Je, Icon as et, Style as tt } from "ol/style";
-import { Tile as J, Graticule as ve } from "ol/layer";
-import { XYZ as nt, BingMaps as rt, OSM as ot } from "ol/source";
-import { transform as xe, transformExtent as be } from "ol/proj";
-const Rt = /* @__PURE__ */ Y({
+import { defineComponent as U, ref as g, onMounted as N, createBlock as pe, openBlock as H, unref as Z, shallowRef as Ce, withCtx as ke, createVNode as Fe, watch as d, provide as Me, createElementBlock as Te, renderSlot as Ae, computed as Se, render as z, onUnmounted as he, toValue as _e } from "vue";
+import { NDropdown as Re, NPopover as Ze } from "naive-ui";
+import { RenderVNode as ze } from "@summeruse/common";
+import { Map as Ge, View as Be, Feature as Q, Overlay as G } from "ol";
+import { Zoom as oe, Attribution as re, Rotate as ie, FullScreen as ae, OverviewMap as ce, ScaleLine as le } from "ol/control";
+import { DragPan as se, MouseWheelZoom as ue, DoubleClickZoom as fe, PinchRotate as de, PinchZoom as me, DragRotate as ye, KeyboardPan as ve, KeyboardZoom as we, Draw as Oe, Modify as Ee } from "ol/interaction";
+import { Point as De, LineString as $, Polygon as K, Circle as Ne, MultiPoint as je, MultiLineString as Ve, MultiPolygon as We } from "ol/geom";
+import q from "ol/layer/Vector";
+import J from "ol/source/Vector";
+import { destination as $e, lineString as Ke, length as Xe, area as Ye, polygon as Ue, bearing as He, midpoint as Qe } from "@turf/turf";
+import { Circle as qe, Stroke as T, Fill as B, Text as Je, Icon as et, Style as tt } from "ol/style";
+import { Tile as ee, Graticule as nt } from "ol/layer";
+import { XYZ as ot, BingMaps as rt, OSM as it } from "ol/source";
+import { transform as be, transformExtent as xe } from "ol/proj";
+const Rt = /* @__PURE__ */ U({
   __name: "index",
   props: {
     olMap: {},
     createOptions: { type: Function }
   },
   setup(t) {
-    const e = t, { olMap: n } = e, i = v({
+    const e = t, { olMap: n } = e, a = g({
       visible: !1,
       x: 0,
       y: 0
     });
-    function o() {
-      i.value.visible = !1;
+    function r() {
+      a.value.visible = !1;
     }
-    const a = v();
-    D(() => {
-      const d = n.getViewport();
-      d && (d.oncontextmenu = (s) => {
+    const i = g();
+    N(() => {
+      const f = n.getViewport();
+      f && (f.oncontextmenu = (s) => {
         s.preventDefault();
-        const l = n.getEventPixel(s), p = n.getEventCoordinate(s), w = n.getFeaturesAtPixel(l);
-        a.value = e.createOptions({ event: s, pixel: l, coordinate: p, features: w }), i.value = {
+        const l = n.getEventPixel(s), w = n.getEventCoordinate(s), y = n.getFeaturesAtPixel(l);
+        i.value = e.createOptions({ event: s, pixel: l, coordinate: w, features: y }), a.value = {
           visible: !0,
           x: s.clientX,
           y: s.clientY
         };
       });
     });
-    function c(d, s) {
+    function c(f, s) {
       const { onClick: l } = s;
-      l && l(), i.value.visible = !1;
+      l && l(), a.value.visible = !1;
     }
-    return (d, s) => (U(), he(R(Re), {
+    return (f, s) => (H(), pe(Z(Re), {
       placement: "bottom-start",
       trigger: "manual",
-      show: a.value && a.value.length > 0 && i.value.visible,
-      x: i.value.x,
-      y: i.value.y,
-      options: a.value,
-      "on-clickoutside": o,
+      show: i.value && i.value.length > 0 && a.value.visible,
+      x: a.value.x,
+      y: a.value.y,
+      options: i.value,
+      "on-clickoutside": r,
       onSelect: c
     }, null, 8, ["show", "x", "y", "options"]));
   }
-}), zt = /* @__PURE__ */ Y({
+}), Zt = /* @__PURE__ */ U({
   __name: "index",
   props: {
     olMap: {},
     createOptions: { type: Function }
   },
   setup(t) {
-    const e = t, n = v({
+    const e = t, n = g({
       visible: !1,
       x: 0,
       y: 0
-    }), i = Ce(), o = v("bottom-start"), a = v(!1), c = v(!1);
-    return D(() => {
-      var d;
-      (d = e.olMap) == null || d.on("pointermove", (s) => {
-        const l = e.olMap.getFeaturesAtPixel(s.pixel), { clientX: p, clientY: w } = s.originalEvent;
+    }), a = Ce(), r = g("bottom-start"), i = g(!1), c = g(!1);
+    return N(() => {
+      var f;
+      (f = e.olMap) == null || f.on("pointermove", (s) => {
+        const l = e.olMap.getFeaturesAtPixel(s.pixel), { clientX: w, clientY: y } = s.originalEvent;
         n.value.visible = !1;
         const m = e.createOptions({
           pixel: s.pixel,
           coordinate: s.coordinate,
           features: l
         });
-        m && (i.value = m.content, o.value = m.placement || "bottom-start", c.value = m.showArrow || !1, a.value = m.raw || !1, n.value.visible = !0, n.value.x = p, n.value.y = w);
+        m && (a.value = m.content, r.value = m.placement || "bottom-start", c.value = m.showArrow || !1, i.value = m.raw || !1, n.value.visible = !0, n.value.x = w, n.value.y = y);
       });
-    }), (d, s) => (U(), he(R(ze), {
+    }), (f, s) => (H(), pe(Z(Ze), {
       "show-arrow": c.value,
-      raw: a.value,
-      placement: o.value,
+      raw: i.value,
+      placement: r.value,
       show: n.value.visible,
       x: n.value.x,
       y: n.value.y,
@@ -93,12 +93,12 @@ const Rt = /* @__PURE__ */ Y({
       }
     }, {
       default: ke(() => [
-        Fe(R(Ze), { "dynamic-v-node": i.value }, null, 8, ["dynamic-v-node"])
+        Fe(Z(ze), { "dynamic-v-node": a.value }, null, 8, ["dynamic-v-node"])
       ]),
       _: 1
     }, 8, ["show-arrow", "raw", "placement", "show", "x", "y"]));
   }
-}), it = Symbol("olMapInjectionKey"), Zt = /* @__PURE__ */ Y({
+}), at = Symbol("olMapInjectionKey"), zt = /* @__PURE__ */ U({
   __name: "index",
   props: {
     olMap: { default: () => new Ge() },
@@ -123,93 +123,93 @@ const Rt = /* @__PURE__ */ Y({
     altShiftDragRotate: { type: Boolean }
   },
   setup(t, { expose: e }) {
-    const n = t, i = v(), o = n.olMap, a = new Be({
+    const n = t, a = g(), r = n.olMap, i = new Be({
       projection: n.projection,
       extent: n.extent
     });
-    o.setView(a), f(() => n.zoom, (r) => {
-      a.setZoom(r);
+    r.setView(i), d(() => n.zoom, (o) => {
+      i.setZoom(o);
     }, {
       immediate: !0
-    }), f(() => n.center, (r) => {
-      a.setCenter(r);
+    }), d(() => n.center, (o) => {
+      i.setCenter(o);
     }, {
       immediate: !0
-    }), f(() => n.constrainResolution, (r) => {
-      a.setConstrainResolution(r);
+    }), d(() => n.constrainResolution, (o) => {
+      i.setConstrainResolution(o);
     }, {
       immediate: !0
-    }), f(() => n.minZoom, (r) => {
-      r && a.setMinZoom(r);
+    }), d(() => n.minZoom, (o) => {
+      o && i.setMinZoom(o);
     }, {
       immediate: !0
-    }), f(() => n.maxZoom, (r) => {
-      r && a.setMaxZoom(r);
+    }), d(() => n.maxZoom, (o) => {
+      o && i.setMaxZoom(o);
     }, {
       immediate: !0
-    }), f(i, (r) => {
-      r && o.setTarget(r);
+    }), d(a, (o) => {
+      o && r.setTarget(o);
     }), e({
-      olMap: o
-    }), Me(it, o);
-    const c = o.getControls().getArray(), d = c.find((r) => r instanceof ne) || new ne(), s = c.find((r) => r instanceof re) || new re(), l = c.find((r) => r instanceof oe) || new oe(), p = c.find((r) => r instanceof ie) || new ie(), w = c.find((r) => r instanceof ae) || new ae(), m = c.find((r) => r instanceof ce) || new ce();
-    f(() => n.showZoom, (r) => {
-      d.setMap(r ? o : null);
+      olMap: r
+    }), Me(at, r);
+    const c = r.getControls().getArray(), f = c.find((o) => o instanceof oe) || new oe(), s = c.find((o) => o instanceof re) || new re(), l = c.find((o) => o instanceof ie) || new ie(), w = c.find((o) => o instanceof ae) || new ae(), y = c.find((o) => o instanceof ce) || new ce(), m = c.find((o) => o instanceof le) || new le();
+    d(() => n.showZoom, (o) => {
+      f.setMap(o ? r : null);
     }, {
       immediate: !0
-    }), f(() => n.showAttribution, (r) => {
-      s.setMap(r ? o : null);
+    }), d(() => n.showAttribution, (o) => {
+      s.setMap(o ? r : null);
     }, {
       immediate: !0
-    }), f(() => n.showRotate, (r) => {
-      l.setMap(r ? o : null);
+    }), d(() => n.showRotate, (o) => {
+      l.setMap(o ? r : null);
     }, {
       immediate: !0
-    }), f(() => n.showFullScreen, (r) => {
-      p.setMap(r ? o : null);
+    }), d(() => n.showFullScreen, (o) => {
+      w.setMap(o ? r : null);
     }, {
       immediate: !0
-    }), f(() => n.showOverview, (r) => {
-      w.setMap(r ? o : null);
+    }), d(() => n.showOverview, (o) => {
+      y.setMap(o ? r : null);
     }, {
       immediate: !0
-    }), f(() => n.showScale, (r) => {
-      m.setMap(r ? o : null);
+    }), d(() => n.showScale, (o) => {
+      m.setMap(o ? r : null);
     }, {
       immediate: !0
     });
-    const y = o.getInteractions().getArray(), S = y.find((r) => r instanceof le) || new le(), P = y.find((r) => r instanceof se) || new se(), E = y.find((r) => r instanceof ue) || new ue(), O = y.find((r) => r instanceof fe) || new fe(), x = y.find((r) => r instanceof de) || new de(), I = y.find((r) => r instanceof me) || new me(), u = y.find((r) => r instanceof ye) || new ye(), g = y.find((r) => r instanceof we) || new we();
-    return o.removeInteraction(S), o.addInteraction(S), o.removeInteraction(P), o.addInteraction(P), o.removeInteraction(E), o.addInteraction(E), o.removeInteraction(O), o.addInteraction(O), o.removeInteraction(x), o.addInteraction(x), o.removeInteraction(I), o.addInteraction(I), o.removeInteraction(u), o.removeInteraction(g), f(() => n.dragPan, (r) => {
-      S.setActive(r);
+    const v = r.getInteractions().getArray(), p = v.find((o) => o instanceof se) || new se(), E = v.find((o) => o instanceof ue) || new ue(), S = v.find((o) => o instanceof fe) || new fe(), b = v.find((o) => o instanceof de) || new de(), x = v.find((o) => o instanceof me) || new me(), I = v.find((o) => o instanceof ye) || new ye(), u = v.find((o) => o instanceof ve) || new ve(), h = v.find((o) => o instanceof we) || new we();
+    return r.removeInteraction(p), r.addInteraction(p), r.removeInteraction(E), r.addInteraction(E), r.removeInteraction(S), r.addInteraction(S), r.removeInteraction(b), r.addInteraction(b), r.removeInteraction(x), r.addInteraction(x), r.removeInteraction(I), r.addInteraction(I), r.removeInteraction(u), r.removeInteraction(h), d(() => n.dragPan, (o) => {
+      p.setActive(o);
     }, {
       immediate: !0
-    }), f(() => n.mouseWheelZoom, (r) => {
-      P.setActive(r);
+    }), d(() => n.mouseWheelZoom, (o) => {
+      E.setActive(o);
     }, {
       immediate: !0
-    }), f(() => n.doubleClickZoom, (r) => {
-      E.setActive(r);
+    }), d(() => n.doubleClickZoom, (o) => {
+      S.setActive(o);
     }, {
       immediate: !0
-    }), f(() => n.pinchRotate, (r) => {
-      O.setActive(r);
+    }), d(() => n.pinchRotate, (o) => {
+      b.setActive(o);
     }, {
       immediate: !0
-    }), f(() => n.pinchZoom, (r) => {
-      x.setActive(r);
+    }), d(() => n.pinchZoom, (o) => {
+      x.setActive(o);
     }, {
       immediate: !0
-    }), f(() => n.altShiftDragRotate, (r) => {
-      I.setActive(r);
+    }), d(() => n.altShiftDragRotate, (o) => {
+      I.setActive(o);
     }, {
       immediate: !0
-    }), (r, h) => (U(), Ae("div", {
+    }), (o, O) => (H(), Te("div", {
       ref_key: "mapRef",
-      ref: i
+      ref: a
     }, [
-      Te(r.$slots, "default", {
-        olMap: R(o),
-        mapRef: i.value
+      Ae(o.$slots, "default", {
+        olMap: Z(r),
+        mapRef: a.value
       })
     ], 512));
   }
@@ -217,15 +217,15 @@ const Rt = /* @__PURE__ */ Y({
 function X(t) {
   return t < 0 ? X(t + 360) : t > 360 ? X(t - 360) : t;
 }
-function K(t) {
-  return t < -180 ? K(t + 360) : t > 180 ? K(t - 360) : t;
+function Y(t) {
+  return t < -180 ? Y(t + 360) : t > 180 ? Y(t - 360) : t;
 }
-function at(t, e, n) {
-  return $e(t, e, K(n), { units: "meters" }).geometry.coordinates;
+function ct(t, e, n) {
+  return $e(t, e, Y(n), { units: "meters" }).geometry.coordinates;
 }
 function Gt(t) {
-  const e = Xe(t);
-  return Ke(e, { units: "meters" });
+  const e = Ke(t);
+  return Xe(e, { units: "meters" });
 }
 function Bt(t) {
   return Ye(Ue(t));
@@ -233,73 +233,73 @@ function Bt(t) {
 function Dt(t, e) {
   return X(He(t, e));
 }
-function ct(t, e) {
+function lt(t, e) {
   return Qe(t, e).geometry.coordinates;
 }
 function Le(t) {
-  return ct([t[0], t[1]], [t[2], t[3]]);
+  return lt([t[0], t[1]], [t[2], t[3]]);
 }
-const Pe = 1852, T = "EPSG:3857", _ = "EPSG:4326", ge = T, lt = _;
+const Pe = 1852, A = "EPSG:3857", _ = "EPSG:4326", ge = A, st = _;
 function Nt(t) {
   return t * 1e3 / Pe;
 }
 function jt(t) {
   return t * Pe / 1e3;
 }
-function st(t) {
-  const { fillOptions: e, strokeOptions: n, ...i } = t;
+function ut(t) {
+  const { fillOptions: e, strokeOptions: n, ...a } = t;
   return new qe({
-    ...i,
-    fill: e ? new G(e) : void 0,
-    stroke: n ? new F(n) : void 0
+    ...a,
+    fill: e ? new B(e) : void 0,
+    stroke: n ? new T(n) : void 0
   });
 }
-function ut(t) {
-  const { fillOptions: e, strokeOptions: n, backgroundFillOptions: i, backgroundStrokeOptions: o, ...a } = t;
+function R(t) {
+  const { fillOptions: e, strokeOptions: n, backgroundFillOptions: a, backgroundStrokeOptions: r, ...i } = t;
   return new Je({
-    ...a,
-    fill: e ? new G(e) : void 0,
-    stroke: n ? new F(n) : void 0,
-    backgroundFill: i ? new G(i) : void 0,
-    backgroundStroke: o ? new F(o) : void 0
+    ...i,
+    fill: e ? new B(e) : void 0,
+    stroke: n ? new T(n) : void 0,
+    backgroundFill: a ? new B(a) : void 0,
+    backgroundStroke: r ? new T(r) : void 0
   });
 }
-function L(t) {
-  const { fillOptions: e, strokeOptions: n, iconOptions: i, circleOptions: o, textOptions: a, ...c } = t, d = e ? new G(e) : void 0, s = n ? new F(n) : void 0, l = i ? new et(i) : void 0, p = o ? st(o) : void 0, w = a ? ut(a) : void 0;
+function P(t) {
+  const { fillOptions: e, strokeOptions: n, iconOptions: a, circleOptions: r, textOptions: i, ...c } = t, f = e ? new B(e) : void 0, s = n ? new T(n) : void 0, l = a ? new et(a) : void 0, w = r ? ut(r) : void 0, y = i ? R(i) : void 0;
   return new tt({
     ...c,
-    fill: d,
+    fill: f,
     stroke: s,
-    image: l || p,
-    text: w
+    image: l || w,
+    text: y
   });
 }
 function ft(t) {
   return new De(t);
 }
 function dt(t) {
-  return new W(t);
+  return new $(t);
 }
 function mt(t) {
-  return new $(t);
+  return new K(t);
 }
 function yt(t, e) {
   return new Ne(t, e);
 }
-function wt(t) {
+function vt(t) {
   return new je(t);
 }
-function vt(t) {
+function wt(t) {
   return new Ve(t);
 }
 function gt(t) {
   return new We(t);
 }
 function k(t) {
-  const { styleOptions: e, ...n } = t ?? {}, i = e ? L(e) : n.style;
-  return new H({
+  const { styleOptions: e, ...n } = t ?? {}, a = e ? P(e) : n.style;
+  return new Q({
     ...n,
-    style: i
+    style: a
   });
 }
 function Vt(t, e) {
@@ -323,22 +323,22 @@ function $t(t, e) {
     geometry: n
   });
 }
-function Xt(t, e, n) {
-  const i = yt(t, e);
+function Kt(t, e, n) {
+  const a = yt(t, e);
   return k({
     ...n,
-    geometry: i
+    geometry: a
   });
 }
-function Kt(t, e) {
-  const n = wt(t);
+function Xt(t, e) {
+  const n = vt(t);
   return k({
     ...e,
     geometry: n
   });
 }
 function Yt(t, e) {
-  const n = vt(t);
+  const n = wt(t);
   return k({
     ...e,
     geometry: n
@@ -351,16 +351,16 @@ function Ut(t, e) {
     geometry: n
   });
 }
-function ht(t) {
-  const { type: e = "img", projection: n = ge, key: i } = t, o = t.url || "https://t{0-4}.tianditu.gov.cn", a = `&tk=${i}&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}`;
-  return `${o}/${e}_${n === lt ? "c" : n === ge ? "w" : "c"}/wmts?LAYER=${e}${a}`;
+function pt(t) {
+  const { type: e = "img", projection: n = ge, key: a } = t, r = t.url || "https://t{0-4}.tianditu.gov.cn", i = `&tk=${a}&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}`;
+  return `${r}/${e}_${n === st ? "c" : n === ge ? "w" : "c"}/wmts?LAYER=${e}${i}`;
 }
 function Ht(t) {
-  const { zIndex: e, projection: n, className: i } = t;
-  return new J({
-    className: i,
-    source: new nt({
-      url: ht(t),
+  const { zIndex: e, projection: n, className: a } = t;
+  return new ee({
+    className: a,
+    source: new ot({
+      url: pt(t),
       projection: n,
       crossOrigin: "Anonymous"
     }),
@@ -371,10 +371,10 @@ function Qt({
   name: t,
   zIndex: e,
   key: n,
-  className: i
+  className: a
 }) {
-  return new J({
-    className: i,
+  return new ee({
+    className: a,
     source: new rt({
       key: n,
       imagerySet: t,
@@ -384,278 +384,263 @@ function Qt({
   });
 }
 function qt(t) {
-  return new J({
+  return new ee({
     className: t == null ? void 0 : t.className,
-    source: new ot({
+    source: new it({
       crossOrigin: "Anonymous"
     }),
     zIndex: t == null ? void 0 : t.zIndex
   });
 }
 function Jt(t) {
-  const { styleOptions: e, ...n } = t || {}, i = e ? L(e) : void 0, o = new q(), a = new Q({
-    source: o,
+  const { styleOptions: e, ...n } = t || {}, a = e ? P(e) : void 0, r = new J(), i = new q({
+    source: r,
     ...n,
-    style: i || n.style
+    style: a || n.style
   });
   return {
-    source: o,
-    layer: a
+    source: r,
+    layer: i
   };
 }
-function ee(t) {
-  return xe(t, _, T);
-}
-const en = ee;
-function pt(t) {
-  return xe(t, T, _);
+function te(t) {
+  return be(t, _, A);
 }
-const tn = pt;
+const en = te;
 function St(t) {
-  return be(t, _, T);
+  return be(t, A, _);
 }
-const nn = St;
-function te(t) {
-  return be(t, T, _);
+const tn = St;
+function ht(t) {
+  return xe(t, _, A);
 }
-const rn = te;
-function on(t, e, n = 60) {
-  const i = [], o = 360 / n;
-  for (let a = -180; a < 180; a = a + o)
-    i.push(at(t, e, a));
-  return [i];
+const nn = ht;
+function ne(t) {
+  return xe(t, A, _);
 }
-function B(t) {
+const on = ne;
+function rn(t, e, n = 60) {
+  const a = [], r = 360 / n;
+  for (let i = -180; i < 180; i = i + r)
+    a.push(ct(t, e, i));
+  return [a];
+}
+function D(t) {
   const e = document.createElement("div");
   return e.innerHTML = t, e.style.cursor = "pointer", e.style.userSelect = "none", e.style.backgroundColor = "red", e.style.color = "white", e.style.borderRadius = "5px", e.style.padding = "0 5px", e.style.fontSize = "12px", e.style.border = "2px solid white", e;
 }
 function an(t, e) {
-  const n = v(!0), i = v([]), o = pe(() => i.value.map((u) => u.getGeometry().getCoordinates())), a = new q(), c = e.styleOptions ? L(e.styleOptions) : e == null ? void 0 : e.style, d = new Q({
-    source: a,
+  const n = g(!0), a = g([]), r = Se(() => a.value.map((u) => u.getGeometry().getCoordinates())), i = new J(), c = e.styleOptions ? P(e.styleOptions) : e == null ? void 0 : e.style, f = new q({
+    source: i,
     style: c,
     zIndex: e == null ? void 0 : e.zIndex
   });
-  t.addLayer(d);
-  const s = e.drawStyleOptions ? L(e.drawStyleOptions) : e == null ? void 0 : e.drawStyle, l = new Ee({
-    source: a,
+  t.addLayer(f);
+  const s = e.drawStyleOptions ? P(e.drawStyleOptions) : e == null ? void 0 : e.drawStyle, l = new Oe({
+    source: i,
     style: s || c,
     type: "LineString"
   });
   l.setActive(!1);
-  const p = e.modifyStyleOptions ? L(e.modifyStyleOptions) : e == null ? void 0 : e.modifyStyle, w = new Oe({
-    source: a,
-    style: p || c
+  const w = e.modifyStyleOptions ? P(e.modifyStyleOptions) : e == null ? void 0 : e.modifyStyle, y = new Ee({
+    source: i,
+    style: w || c
   }), m = /* @__PURE__ */ new Set();
-  t.addInteraction(l), D(() => {
-    t.addInteraction(w);
-  }), a.on("addfeature", () => {
-    e.size && a.getFeatures().length >= e.size && l.setActive(!1);
-  }), a.on("removefeature", () => {
-    e.size && a.getFeatures().length < e.size && l.setActive(!0);
+  t.addInteraction(l), N(() => {
+    t.addInteraction(y);
+  }), i.on("addfeature", () => {
+    e.size && i.getFeatures().length >= e.size && l.setActive(!1);
+  }), i.on("removefeature", () => {
+    e.size && i.getFeatures().length < e.size && l.setActive(!0);
   });
-  const y = () => {
+  const v = () => {
     m.forEach((u) => {
       t.removeOverlay(u);
     }), m.clear();
   };
-  a.on("change", () => {
-    y(), a.getFeatures().forEach((u) => {
-      const g = u.getGeometry(), r = Le(te(g.getExtent()));
-      let h = document.createElement("div");
-      e.deleteFeatureLabel ? z(e.deleteFeatureLabel, h) : h = B("删除线"), h.addEventListener("click", () => {
-        a.removeFeature(u);
+  i.on("change", () => {
+    v(), i.getFeatures().forEach((u) => {
+      const h = u.getGeometry(), o = Le(ne(h.getExtent()));
+      let O = document.createElement("div");
+      e.deleteFeatureLabel ? z(e.deleteFeatureLabel, O) : O = D("删除线"), O.addEventListener("click", () => {
+        i.removeFeature(u);
       });
-      const M = new Z({
-        position: ee(r),
+      const F = new G({
+        position: te(o),
         positioning: "center-center",
-        element: h
+        element: O
       });
-      m.add(M), t.addOverlay(M);
-      const C = g.getCoordinates();
-      C.length < 3 || C.forEach((N, j) => {
-        let b = document.createElement("div");
-        e.deletePointLabel ? z(e.deletePointLabel, b) : b = B("删除点"), b.addEventListener("click", () => {
-          u.setGeometry(new W(C.filter((Ie, V) => V !== j)));
+      m.add(F), t.addOverlay(F);
+      const C = h.getCoordinates();
+      C.length < 3 || C.forEach((j, V) => {
+        let L = document.createElement("div");
+        e.deletePointLabel ? z(e.deletePointLabel, L) : L = D("删除点"), L.addEventListener("click", () => {
+          u.setGeometry(new $(C.filter((Ie, W) => W !== V)));
         });
-        const A = new Z({
-          position: N,
+        const M = new G({
+          position: j,
           positioning: "top-center",
           offset: [0, -30],
-          element: b
+          element: L
         });
-        m.add(A), t.addOverlay(A);
+        m.add(M), t.addOverlay(M);
       });
     });
   }), l.on("change:active", () => {
     n.value = l.getActive();
-  }), a.on("change", () => {
-    i.value = a.getFeatures();
+  }), i.on("change", () => {
+    a.value = i.getFeatures();
   });
-  const S = () => {
-    y(), t.removeLayer(d), t.removeInteraction(l), t.removeInteraction(w);
-  }, P = () => {
-    e.size && i.value.length >= e.size || l.setActive(!0);
+  const p = () => {
+    v(), t.removeLayer(f), t.removeInteraction(l), t.removeInteraction(y);
   }, E = () => {
+    e.size && a.value.length >= e.size || l.setActive(!0);
+  }, S = () => {
     l.setActive(!1);
-  }, O = (u) => {
-    a.clear(), u.forEach((g) => {
-      if (g.length < 2)
+  }, b = (u) => {
+    i.clear(), u.forEach((h) => {
+      if (h.length < 2)
         return;
-      const r = new H({
-        geometry: new W(g)
+      const o = new Q({
+        geometry: new $(h)
       });
-      a.addFeature(r);
+      i.addFeature(o);
     });
   }, x = () => {
-    O(e.defaultCoordinates || []);
+    b(e.defaultCoordinates || []);
   };
   x();
   const I = () => {
-    a.clear(), E();
+    i.clear(), S();
   };
-  return Se(() => {
-    S();
+  return he(() => {
+    p();
   }), {
     inDraw: n,
-    start: P,
-    stop: E,
+    start: E,
+    stop: S,
     clear: I,
-    setFeatures: O,
+    setFeatures: b,
     reset: x,
-    features: i,
-    coordinates: o,
-    destroy: S
+    features: a,
+    coordinates: r,
+    destroy: p
   };
 }
 function cn(t, e) {
-  const n = v(!0), i = v([]), o = pe(() => i.value.map((u) => u.getGeometry().getCoordinates())), a = e.styleOptions ? L(e.styleOptions) : e == null ? void 0 : e.style, c = new q(), d = new Q({
+  const n = g(!0), a = g([]), r = Se(() => a.value.map((u) => u.getGeometry().getCoordinates())), i = e.styleOptions ? P(e.styleOptions) : e == null ? void 0 : e.style, c = new J(), f = new q({
     source: c,
-    style: a,
+    style: i,
     zIndex: e == null ? void 0 : e.zIndex
   });
-  t.addLayer(d);
-  const s = e.drawStyleOptions ? L(e.drawStyleOptions) : e == null ? void 0 : e.drawStyle, l = new Ee({
+  t.addLayer(f);
+  const s = e.drawStyleOptions ? P(e.drawStyleOptions) : e == null ? void 0 : e.drawStyle, l = new Oe({
     source: c,
-    style: s || a,
+    style: s || i,
     type: "Polygon"
   });
   l.setActive(!1);
-  const p = e.modifyStyleOptions ? L(e.modifyStyleOptions) : e == null ? void 0 : e.modifyStyle, w = new Oe({
+  const w = e.modifyStyleOptions ? P(e.modifyStyleOptions) : e == null ? void 0 : e.modifyStyle, y = new Ee({
     source: c,
-    style: p || a
+    style: w || i
   }), m = /* @__PURE__ */ new Set();
-  t.addInteraction(l), D(() => {
-    t.addInteraction(w);
+  t.addInteraction(l), N(() => {
+    t.addInteraction(y);
   }), c.on("addfeature", () => {
     e.size && c.getFeatures().length >= e.size && l.setActive(!1);
   }), c.on("removefeature", () => {
     e.size && c.getFeatures().length < e.size && l.setActive(!0);
   });
-  const y = () => {
+  const v = () => {
     m.forEach((u) => {
       t.removeOverlay(u);
     }), m.clear();
   };
   c.on("change", () => {
-    y(), c.getFeatures().forEach((u) => {
-      const g = u.getGeometry(), r = Le(te(g.getExtent()));
-      let h = document.createElement("div");
-      e.deleteFeatureLabel ? z(e.deleteFeatureLabel, h) : h = B("删除区域"), h.addEventListener("click", () => {
+    v(), c.getFeatures().forEach((u) => {
+      const h = u.getGeometry(), o = Le(ne(h.getExtent()));
+      let O = document.createElement("div");
+      e.deleteFeatureLabel ? z(e.deleteFeatureLabel, O) : O = D("删除区域"), O.addEventListener("click", () => {
         c.removeFeature(u);
       });
-      const M = new Z({
-        position: ee(r),
+      const F = new G({
+        position: te(o),
         positioning: "center-center",
-        element: h
+        element: O
       });
-      m.add(M), t.addOverlay(M);
-      const C = g.getCoordinates()[0];
-      C.length < 3 || C.forEach((N, j) => {
-        let b = document.createElement("div");
-        e.deletePointLabel ? z(e.deletePointLabel, b) : b = B("删除点"), b.addEventListener("click", () => {
-          u.setGeometry(new $([C.filter((Ie, V) => V !== j)]));
+      m.add(F), t.addOverlay(F);
+      const C = h.getCoordinates()[0];
+      C.length < 3 || C.forEach((j, V) => {
+        let L = document.createElement("div");
+        e.deletePointLabel ? z(e.deletePointLabel, L) : L = D("删除点"), L.addEventListener("click", () => {
+          u.setGeometry(new K([C.filter((Ie, W) => W !== V)]));
         });
-        const A = new Z({
-          position: N,
+        const M = new G({
+          position: j,
           positioning: "top-center",
           offset: [0, -30],
-          element: b
+          element: L
         });
-        m.add(A), t.addOverlay(A);
+        m.add(M), t.addOverlay(M);
       });
     });
   }), l.on("change:active", () => {
     n.value = l.getActive();
   }), c.on("change", () => {
-    i.value = c.getFeatures();
+    a.value = c.getFeatures();
   });
-  const S = () => {
-    y(), t.removeLayer(d), t.removeInteraction(l), t.removeInteraction(w);
-  }, P = () => {
-    e.size && i.value.length >= e.size || l.setActive(!0);
+  const p = () => {
+    v(), t.removeLayer(f), t.removeInteraction(l), t.removeInteraction(y);
   }, E = () => {
+    e.size && a.value.length >= e.size || l.setActive(!0);
+  }, S = () => {
     l.setActive(!1);
-  }, O = (u) => {
-    c.clear(), u == null || u.forEach((g) => {
-      g.forEach((r) => {
-        if (r.length < 2)
+  }, b = (u) => {
+    c.clear(), u == null || u.forEach((h) => {
+      h.forEach((o) => {
+        if (o.length < 2)
           return;
-        r[0] !== r[r.length - 1] && r.push(r[0]);
-        const h = new H({
-          geometry: new $([r])
+        o[0] !== o[o.length - 1] && o.push(o[0]);
+        const O = new Q({
+          geometry: new K([o])
         });
-        c.addFeature(h);
+        c.addFeature(O);
       });
     });
   }, x = () => {
-    O(e.defaultCoordinates);
+    b(e.defaultCoordinates);
   };
   x();
   const I = () => {
-    c.clear(), E();
+    c.clear(), S();
   };
-  return Se(() => {
-    S();
+  return he(() => {
+    p();
   }), {
     inDraw: n,
-    start: P,
-    stop: E,
+    start: E,
+    stop: S,
     clear: I,
-    setFeatures: O,
+    setFeatures: b,
     reset: x,
-    features: i,
-    coordinates: o,
-    destroy: S
+    features: a,
+    coordinates: r,
+    destroy: p
   };
 }
 function ln(t) {
-  const e = v(t.defaultShow || !1);
-  let n = new ve({
-    strokeStyle: t.strokeStyle || new F({
-      color: "#000",
-      width: 1.5,
-      lineDash: [4, 4]
-    }),
-    showLabels: !0,
-    wrapX: !1,
-    zIndex: 1
+  const e = g(t.defaultShow || !1), { strokeStyleOption: n, strokeStyle: a, labelStyleOption: r, latLabelStyleOption: i, lonLabelStyleOption: c, latLabelStyle: f, lonLabelStyle: s, ...l } = t.graticuleOptions || {}, w = n ? new T(n) : a, y = r ? R(r) : void 0, m = (i ? R(i) : f) || y, v = (c ? R(c) : s) || y, p = new nt({
+    ...l,
+    strokeStyle: w,
+    latLabelStyle: m,
+    lonLabelStyle: v
   });
-  return f(
+  return d(
     e,
-    (i) => {
-      if (n.setMap(null), i) {
-        n = new ve({
-          strokeStyle: new F({
-            color: "#555",
-            width: 1.5,
-            lineDash: [4, 4]
-          }),
-          showLabels: !0,
-          wrapX: !1,
-          zIndex: 1
-        });
-        const o = _e(t.olMap);
-        o && n.setMap(o);
+    (E) => {
+      if (p.setMap(null), E) {
+        const S = _e(t.olMap);
+        S && p.setMap(S);
       }
     },
     {
@@ -667,18 +652,18 @@ function ln(t) {
   };
 }
 function sn(t) {
-  const e = v(t.defaultLayerName || Object.keys(t.layers)[0]);
+  const e = g(t.defaultLayerName || Object.keys(t.layers)[0]);
   return Object.values(t.layers).forEach((n) => {
-    n.forEach((i) => {
-      t.olMap.addLayer(i);
+    n.forEach((a) => {
+      t.olMap.addLayer(a);
     });
-  }), f(
+  }), d(
     e,
     () => {
-      Object.entries(t.layers).forEach(([n, i]) => {
-        const o = n === e.value;
-        i.forEach((a) => {
-          a.setVisible(o);
+      Object.entries(t.layers).forEach(([n, a]) => {
+        const r = n === e.value;
+        a.forEach((i) => {
+          i.setVisible(r);
         });
       });
     },
@@ -688,59 +673,59 @@ function sn(t) {
   ), { visibleLayerName: e };
 }
 export {
-  T as EPSG_3857,
-  rn as EPSG_3857ExtentToEPSG_4326,
+  A as EPSG_3857,
+  on as EPSG_3857ExtentToEPSG_4326,
   tn as EPSG_3857ToEPSG_4326,
   _ as EPSG_4326,
   nn as EPSG_4326ExtentToEPSG_3857,
   en as EPSG_4326ToEPSG_3857,
   Rt as NOlContextmenu,
-  zt as NOlPointermove,
+  Zt as NOlPointermove,
   Pe as ONE_NM,
-  Zt as OlMap,
-  lt as WGS84Projection,
+  zt as OlMap,
+  st as WGS84Projection,
   ge as WebMercatorProjection,
   yt as createCircle,
-  Xt as createCircleFeature,
-  st as createCircleStyle,
+  Kt as createCircleFeature,
+  ut as createCircleStyle,
   k as createFeature,
   dt as createLineString,
   Wt as createLineStringFeature,
-  vt as createMultiLineString,
+  wt as createMultiLineString,
   Yt as createMultiLineStringFeature,
-  wt as createMultiPoint,
-  Kt as createMultiPointFeature,
+  vt as createMultiPoint,
+  Xt as createMultiPointFeature,
   gt as createMultiPolygon,
   Ut as createMultiPolygonFeature,
   ft as createPoint,
   Vt as createPointFeature,
   mt as createPolygon,
   $t as createPolygonFeature,
-  L as createStyle,
-  ut as createTextStyle,
+  P as createStyle,
+  R as createTextStyle,
   Jt as createVectorLayer,
   Dt as getAngle,
   Bt as getArea,
   Qt as getBingLayer,
-  ct as getCenter,
-  at as getDestinationPoint,
+  lt as getCenter,
+  ct as getDestinationPoint,
   Le as getExtentCenter,
   Gt as getLineLength,
   qt as getOSMLayer,
-  on as getRealCircleCoordinates,
+  rn as getRealCircleCoordinates,
   Ht as getTianDiTuLayer,
-  ht as getTianDiTuUrl,
+  pt as getTianDiTuUrl,
   Nt as kmToNauticalMiles,
-  te as mercatorExtentToWgs84,
-  pt as mercatorToWgs84,
+  ne as mercatorExtentToWgs84,
+  St as mercatorToWgs84,
   jt as nauticalMilesToKm,
-  it as olMapInjectionKey,
+  at as olMapInjectionKey,
   X as toOlAngle,
-  K as toTurfAngle,
+  Y as toTurfAngle,
   an as useDrawLineString,
   cn as useDrawPolygon,
   ln as useGraticule,
   sn as useSwitchBaseLayer,
-  St as wgs84ExtentToMercator,
-  ee as wgs84ToMercator
+  ht as wgs84ExtentToMercator,
+  te as wgs84ToMercator
 };

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

@@ -0,0 +1 @@
+export {};

package/es/composables/useGraticule/index.d.ts

@@ -1,9 +1,17 @@
 import { Map as OLMap } from 'ol';
 import { MaybeRef, Ref } from 'vue';
-import { Stroke } from 'ol/style';
+import { StrokeOptions, TextOptions } from '../../utils';
+import { Graticule } from 'ol/layer';
+export type _GraticuleOptions = ConstructorParameters<typeof Graticule>[0];
+export type GraticuleOptions = _GraticuleOptions & {
+    strokeStyleOption?: StrokeOptions;
+    labelStyleOption?: TextOptions;
+    latLabelStyleOption?: TextOptions;
+    lonLabelStyleOption?: TextOptions;
+};
 export interface UseGraticuleOptions {
     olMap: MaybeRef<OLMap | null | undefined>;
-    strokeStyle?: Stroke;
+    graticuleOptions?: GraticuleOptions;
     defaultShow?: boolean;
 }
 export declare function useGraticule(options: UseGraticuleOptions): {

package/es/composables/useGraticule/index.mjs

@@ -1,34 +1,27 @@
-import { Graticule as a } from "ol/layer";
-import { Stroke as o } from "ol/style";
-import { ref as i, watch as u, toValue as w } from "vue";
-function h(e) {
-  const r = i(e.defaultShow || !1);
-  let t = new a({
-    strokeStyle: e.strokeStyle || new o({
-      color: "#000",
-      width: 1.5,
-      lineDash: [4, 4]
-    }),
-    showLabels: !0,
-    wrapX: !1,
-    zIndex: 1
+import { Graticule as O } from "ol/layer";
+import { Stroke as w } from "ol/style";
+import { ref as x, watch as d, toValue as k } from "vue";
+import "@turf/turf";
+import "ol";
+import "ol/geom";
+import { createTextStyle as e } from "../../utils/style/index.mjs";
+import "ol/layer/Vector";
+import "ol/source";
+import "ol/source/Vector";
+import "ol/proj";
+function B(t) {
+  const l = x(t.defaultShow || !1), { strokeStyleOption: o, strokeStyle: m, labelStyleOption: r, latLabelStyleOption: a, lonLabelStyleOption: i, latLabelStyle: s, lonLabelStyle: u, ...S } = t.graticuleOptions || {}, y = o ? new w(o) : m, n = r ? e(r) : void 0, b = (a ? e(a) : s) || n, f = (i ? e(i) : u) || n, p = new O({
+    ...S,
+    strokeStyle: y,
+    latLabelStyle: b,
+    lonLabelStyle: f
   });
-  return u(
-    r,
-    (s) => {
-      if (t.setMap(null), s) {
-        t = new a({
-          strokeStyle: new o({
-            color: "#555",
-            width: 1.5,
-            lineDash: [4, 4]
-          }),
-          showLabels: !0,
-          wrapX: !1,
-          zIndex: 1
-        });
-        const l = w(e.olMap);
-        l && t.setMap(l);
+  return d(
+    l,
+    (L) => {
+      if (p.setMap(null), L) {
+        const c = k(t.olMap);
+        c && p.setMap(c);
       }
     },
     {
@@ -36,9 +29,9 @@ function h(e) {
       deep: !0
     }
   ), {
-    showGraticule: r
+    showGraticule: l
   };
 }
 export {
-  h as useGraticule
+  B as useGraticule
 };

package/es/utils/calculate/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/ol-map/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/composables/useGraticule/index.d.ts

@@ -1,9 +1,17 @@
 import { Map as OLMap } from 'ol';
 import { MaybeRef, Ref } from 'vue';
-import { Stroke } from 'ol/style';
+import { StrokeOptions, TextOptions } from '../../utils';
+import { Graticule } from 'ol/layer';
+export type _GraticuleOptions = ConstructorParameters<typeof Graticule>[0];
+export type GraticuleOptions = _GraticuleOptions & {
+    strokeStyleOption?: StrokeOptions;
+    labelStyleOption?: TextOptions;
+    latLabelStyleOption?: TextOptions;
+    lonLabelStyleOption?: TextOptions;
+};
 export interface UseGraticuleOptions {
     olMap: MaybeRef<OLMap | null | undefined>;
-    strokeStyle?: Stroke;
+    graticuleOptions?: GraticuleOptions;
     defaultShow?: boolean;
 }
 export declare function useGraticule(options: UseGraticuleOptions): {

package/lib/composables/useGraticule/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("ol/layer"),s=require("ol/style"),r=require("vue");function i(e){const l=r.ref(e.defaultShow||!1);let t=new u.Graticule({strokeStyle:e.strokeStyle||new s.Stroke({color:"#000",width:1.5,lineDash:[4,4]}),showLabels:!0,wrapX:!1,zIndex:1});return r.watch(l,o=>{if(t.setMap(null),o){t=new u.Graticule({strokeStyle:new s.Stroke({color:"#555",width:1.5,lineDash:[4,4]}),showLabels:!0,wrapX:!1,zIndex:1});const a=r.toValue(e.olMap);a&&t.setMap(a)}},{immediate:!0,deep:!0}),{showGraticule:l}}exports.useGraticule=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("ol/layer"),O=require("ol/style"),t=require("vue");require("@turf/turf");require("ol");require("ol/geom");const l=require("../../utils/style/index.js");require("ol/layer/Vector");require("ol/source");require("ol/source/Vector");require("ol/proj");function T(e){const r=t.ref(e.defaultShow||!1),{strokeStyleOption:a,strokeStyle:y,labelStyleOption:o,latLabelStyleOption:i,lonLabelStyleOption:u,latLabelStyle:S,lonLabelStyle:b,...q}=e.graticuleOptions||{},p=a?new O.Stroke(a):y,n=o?l.createTextStyle(o):void 0,L=(i?l.createTextStyle(i):S)||n,d=(u?l.createTextStyle(u):b)||n,c=new x.Graticule({...q,strokeStyle:p,latLabelStyle:L,lonLabelStyle:d});return t.watch(r,f=>{if(c.setMap(null),f){const s=t.toValue(e.olMap);s&&c.setMap(s)}},{immediate:!0,deep:!0}),{showGraticule:r}}exports.useGraticule=T;

package/lib/utils/calculate/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@summeruse/ol",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.1.1-beta.1",
   "description": "",
   "author": "finalsummer",
   "license": "ISC",