@summeruse/ol 0.1.0 → 0.1.1-beta.0

package/CHANGELOG.md

@@ -1,14 +1,14 @@
 # @summeruse/ol
 
-## 0.1.0
+## 0.1.1-beta.0
 
-### Minor Changes
+### Patch Changes
 
-- 更新 0.1.0 正式版
+- c26ae5a: 重构 useGraticule 以支持更灵活的样式配置
 
-## 0.0.1
+## 0.1.0
 
-### Patch Changes
+### Minor Changes
 
 - 8e34a3f: 添加 useDrawLineString useDrawPolygon
 - b6b95dc: 添加创建几何要素的实用函数

package/dist/index.js

@@ -1,16 +1,16 @@
-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 { defineComponent as Y, ref as v, onMounted as D, createBlock as pe, openBlock as U, unref as R, shallowRef as Ce, withCtx as ke, createVNode as Fe, watch as d, provide as Me, createElementBlock as Ae, renderSlot as Te, computed as he, 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 { Zoom as ne, Attribution as oe, Rotate as re, 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 Oe, Modify as Ee } 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 { XYZ as nt, BingMaps as ot, OSM as rt } from "ol/source";
 import { transform as xe, transformExtent as be } from "ol/proj";
 const Rt = /* @__PURE__ */ Y({
   __name: "index",
@@ -24,34 +24,34 @@ const Rt = /* @__PURE__ */ Y({
       x: 0,
       y: 0
     });
-    function o() {
+    function r() {
       i.value.visible = !1;
     }
     const a = v();
     D(() => {
-      const d = n.getViewport();
-      d && (d.oncontextmenu = (s) => {
+      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), h = n.getEventCoordinate(s), w = n.getFeaturesAtPixel(l);
+        a.value = e.createOptions({ event: s, pixel: l, coordinate: h, features: w }), i.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;
     }
-    return (d, s) => (U(), he(R(Re), {
+    return (f, s) => (U(), pe(R(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,
+      "on-clickoutside": r,
       onSelect: c
     }, null, 8, ["show", "x", "y", "options"]));
   }
@@ -66,23 +66,23 @@ const Rt = /* @__PURE__ */ Y({
       visible: !1,
       x: 0,
       y: 0
-    }), i = Ce(), o = v("bottom-start"), a = v(!1), c = v(!1);
+    }), i = Ce(), r = 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;
+      var f;
+      (f = e.olMap) == null || f.on("pointermove", (s) => {
+        const l = e.olMap.getFeaturesAtPixel(s.pixel), { clientX: h, clientY: w } = 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 && (i.value = m.content, r.value = m.placement || "bottom-start", c.value = m.showArrow || !1, a.value = m.raw || !1, n.value.visible = !0, n.value.x = h, n.value.y = w);
       });
-    }), (d, s) => (U(), he(R(ze), {
+    }), (f, s) => (U(), pe(R(ze), {
       "show-arrow": c.value,
       raw: a.value,
-      placement: o.value,
+      placement: r.value,
       show: n.value.visible,
       x: n.value.x,
       y: n.value.y,
@@ -123,92 +123,92 @@ 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, i = v(), r = n.olMap, a = new Be({
       projection: n.projection,
       extent: n.extent
     });
-    o.setView(a), f(() => n.zoom, (r) => {
-      a.setZoom(r);
+    r.setView(a), d(() => n.zoom, (o) => {
+      a.setZoom(o);
     }, {
       immediate: !0
-    }), f(() => n.center, (r) => {
-      a.setCenter(r);
+    }), d(() => n.center, (o) => {
+      a.setCenter(o);
     }, {
       immediate: !0
-    }), f(() => n.constrainResolution, (r) => {
-      a.setConstrainResolution(r);
+    }), d(() => n.constrainResolution, (o) => {
+      a.setConstrainResolution(o);
     }, {
       immediate: !0
-    }), f(() => n.minZoom, (r) => {
-      r && a.setMinZoom(r);
+    }), d(() => n.minZoom, (o) => {
+      o && a.setMinZoom(o);
     }, {
       immediate: !0
-    }), f(() => n.maxZoom, (r) => {
-      r && a.setMaxZoom(r);
+    }), d(() => n.maxZoom, (o) => {
+      o && a.setMaxZoom(o);
     }, {
       immediate: !0
-    }), f(i, (r) => {
-      r && o.setTarget(r);
+    }), d(i, (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(it, r);
+    const c = r.getControls().getArray(), f = c.find((o) => o instanceof ne) || new ne(), s = c.find((o) => o instanceof oe) || new oe(), l = c.find((o) => o instanceof re) || new re(), h = c.find((o) => o instanceof ie) || new ie(), w = c.find((o) => o instanceof ae) || new ae(), m = c.find((o) => o instanceof ce) || new ce();
+    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) => {
+      h.setMap(o ? r : null);
     }, {
       immediate: !0
-    }), f(() => n.showOverview, (r) => {
-      w.setMap(r ? o : null);
+    }), d(() => n.showOverview, (o) => {
+      w.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 y = r.getInteractions().getArray(), S = y.find((o) => o instanceof le) || new le(), P = y.find((o) => o instanceof se) || new se(), O = y.find((o) => o instanceof ue) || new ue(), E = y.find((o) => o instanceof fe) || new fe(), x = y.find((o) => o instanceof de) || new de(), I = y.find((o) => o instanceof me) || new me(), u = y.find((o) => o instanceof ye) || new ye(), g = y.find((o) => o instanceof we) || new we();
+    return r.removeInteraction(S), r.addInteraction(S), r.removeInteraction(P), r.addInteraction(P), r.removeInteraction(O), r.addInteraction(O), r.removeInteraction(E), r.addInteraction(E), r.removeInteraction(x), r.addInteraction(x), r.removeInteraction(I), r.addInteraction(I), r.removeInteraction(u), r.removeInteraction(g), d(() => n.dragPan, (o) => {
+      S.setActive(o);
     }, {
       immediate: !0
-    }), f(() => n.mouseWheelZoom, (r) => {
-      P.setActive(r);
+    }), d(() => n.mouseWheelZoom, (o) => {
+      P.setActive(o);
     }, {
       immediate: !0
-    }), f(() => n.doubleClickZoom, (r) => {
-      E.setActive(r);
+    }), d(() => n.doubleClickZoom, (o) => {
+      O.setActive(o);
     }, {
       immediate: !0
-    }), f(() => n.pinchRotate, (r) => {
-      O.setActive(r);
+    }), d(() => n.pinchRotate, (o) => {
+      E.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, p) => (U(), Ae("div", {
       ref_key: "mapRef",
       ref: i
     }, [
-      Te(r.$slots, "default", {
-        olMap: R(o),
+      Te(o.$slots, "default", {
+        olMap: R(r),
         mapRef: i.value
       })
     ], 512));
@@ -255,22 +255,22 @@ function st(t) {
   });
 }
 function ut(t) {
-  const { fillOptions: e, strokeOptions: n, backgroundFillOptions: i, backgroundStrokeOptions: o, ...a } = t;
+  const { fillOptions: e, strokeOptions: n, backgroundFillOptions: i, backgroundStrokeOptions: r, ...a } = 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
+    backgroundStroke: r ? new F(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;
+  const { fillOptions: e, strokeOptions: n, iconOptions: i, circleOptions: r, textOptions: a, ...c } = t, f = e ? new G(e) : void 0, s = n ? new F(n) : void 0, l = i ? new et(i) : void 0, h = r ? st(r) : void 0, w = a ? ut(a) : void 0;
   return new tt({
     ...c,
-    fill: d,
+    fill: f,
     stroke: s,
-    image: l || p,
+    image: l || h,
     text: w
   });
 }
@@ -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: i } = t, r = 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 `${r}/${e}_${n === lt ? "c" : n === ge ? "w" : "c"}/wmts?LAYER=${e}${a}`;
 }
 function Ht(t) {
   const { zIndex: e, projection: n, className: i } = t;
   return new J({
     className: i,
     source: new nt({
-      url: ht(t),
+      url: pt(t),
       projection: n,
       crossOrigin: "Anonymous"
     }),
@@ -375,7 +375,7 @@ function Qt({
 }) {
   return new J({
     className: i,
-    source: new rt({
+    source: new ot({
       key: n,
       imagerySet: t,
       placeholderTiles: !1
@@ -386,20 +386,20 @@ function Qt({
 function qt(t) {
   return new J({
     className: t == null ? void 0 : t.className,
-    source: new ot({
+    source: new rt({
       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 || {}, i = e ? L(e) : void 0, r = new q(), a = new Q({
+    source: r,
     ...n,
     style: i || n.style
   });
   return {
-    source: o,
+    source: r,
     layer: a
   };
 }
@@ -407,10 +407,10 @@ function ee(t) {
   return xe(t, _, T);
 }
 const en = ee;
-function pt(t) {
+function ht(t) {
   return xe(t, T, _);
 }
-const tn = pt;
+const tn = ht;
 function St(t) {
   return be(t, _, T);
 }
@@ -418,10 +418,10 @@ const nn = St;
 function te(t) {
   return be(t, T, _);
 }
-const rn = te;
-function on(t, e, n = 60) {
-  const i = [], o = 360 / n;
-  for (let a = -180; a < 180; a = a + o)
+const on = te;
+function rn(t, e, n = 60) {
+  const i = [], r = 360 / n;
+  for (let a = -180; a < 180; a = a + r)
     i.push(at(t, e, a));
   return [i];
 }
@@ -430,21 +430,21 @@ function B(t) {
   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({
+  const n = v(!0), i = v([]), r = he(() => i.value.map((u) => u.getGeometry().getCoordinates())), a = new q(), c = e.styleOptions ? L(e.styleOptions) : e == null ? void 0 : e.style, f = new Q({
     source: a,
     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({
+  t.addLayer(f);
+  const s = e.drawStyleOptions ? L(e.drawStyleOptions) : e == null ? void 0 : e.drawStyle, l = new Oe({
     source: a,
     style: s || c,
     type: "LineString"
   });
   l.setActive(!1);
-  const p = e.modifyStyleOptions ? L(e.modifyStyleOptions) : e == null ? void 0 : e.modifyStyle, w = new Oe({
+  const h = e.modifyStyleOptions ? L(e.modifyStyleOptions) : e == null ? void 0 : e.modifyStyle, w = new Ee({
     source: a,
-    style: p || c
+    style: h || c
   }), m = /* @__PURE__ */ new Set();
   t.addInteraction(l), D(() => {
     t.addInteraction(w);
@@ -460,15 +460,15 @@ function an(t, e) {
   };
   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", () => {
+      const g = u.getGeometry(), o = Le(te(g.getExtent()));
+      let p = document.createElement("div");
+      e.deleteFeatureLabel ? z(e.deleteFeatureLabel, p) : p = B("删除线"), p.addEventListener("click", () => {
         a.removeFeature(u);
       });
       const M = new Z({
-        position: ee(r),
+        position: ee(o),
         positioning: "center-center",
-        element: h
+        element: p
       });
       m.add(M), t.addOverlay(M);
       const C = g.getCoordinates();
@@ -492,57 +492,57 @@ function an(t, e) {
     i.value = a.getFeatures();
   });
   const S = () => {
-    y(), t.removeLayer(d), t.removeInteraction(l), t.removeInteraction(w);
+    y(), t.removeLayer(f), t.removeInteraction(l), t.removeInteraction(w);
   }, P = () => {
     e.size && i.value.length >= e.size || l.setActive(!0);
-  }, E = () => {
+  }, O = () => {
     l.setActive(!1);
-  }, O = (u) => {
+  }, E = (u) => {
     a.clear(), u.forEach((g) => {
       if (g.length < 2)
         return;
-      const r = new H({
+      const o = new H({
         geometry: new W(g)
       });
-      a.addFeature(r);
+      a.addFeature(o);
     });
   }, x = () => {
-    O(e.defaultCoordinates || []);
+    E(e.defaultCoordinates || []);
   };
   x();
   const I = () => {
-    a.clear(), E();
+    a.clear(), O();
   };
   return Se(() => {
     S();
   }), {
     inDraw: n,
     start: P,
-    stop: E,
+    stop: O,
     clear: I,
-    setFeatures: O,
+    setFeatures: E,
     reset: x,
     features: i,
-    coordinates: o,
+    coordinates: r,
     destroy: S
   };
 }
 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 = v(!0), i = v([]), r = he(() => i.value.map((u) => u.getGeometry().getCoordinates())), a = e.styleOptions ? L(e.styleOptions) : e == null ? void 0 : e.style, c = new q(), f = new Q({
     source: c,
     style: a,
     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 ? L(e.drawStyleOptions) : e == null ? void 0 : e.drawStyle, l = new Oe({
     source: c,
     style: s || a,
     type: "Polygon"
   });
   l.setActive(!1);
-  const p = e.modifyStyleOptions ? L(e.modifyStyleOptions) : e == null ? void 0 : e.modifyStyle, w = new Oe({
+  const h = e.modifyStyleOptions ? L(e.modifyStyleOptions) : e == null ? void 0 : e.modifyStyle, w = new Ee({
     source: c,
-    style: p || a
+    style: h || a
   }), m = /* @__PURE__ */ new Set();
   t.addInteraction(l), D(() => {
     t.addInteraction(w);
@@ -558,15 +558,15 @@ function cn(t, e) {
   };
   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", () => {
+      const g = u.getGeometry(), o = Le(te(g.getExtent()));
+      let p = document.createElement("div");
+      e.deleteFeatureLabel ? z(e.deleteFeatureLabel, p) : p = B("删除区域"), p.addEventListener("click", () => {
         c.removeFeature(u);
       });
       const M = new Z({
-        position: ee(r),
+        position: ee(o),
         positioning: "center-center",
-        element: h
+        element: p
       });
       m.add(M), t.addOverlay(M);
       const C = g.getCoordinates()[0];
@@ -590,61 +590,55 @@ function cn(t, e) {
     i.value = c.getFeatures();
   });
   const S = () => {
-    y(), t.removeLayer(d), t.removeInteraction(l), t.removeInteraction(w);
+    y(), t.removeLayer(f), t.removeInteraction(l), t.removeInteraction(w);
   }, P = () => {
     e.size && i.value.length >= e.size || l.setActive(!0);
-  }, E = () => {
+  }, O = () => {
     l.setActive(!1);
-  }, O = (u) => {
+  }, E = (u) => {
     c.clear(), u == null || u.forEach((g) => {
-      g.forEach((r) => {
-        if (r.length < 2)
+      g.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 p = new H({
+          geometry: new $([o])
         });
-        c.addFeature(h);
+        c.addFeature(p);
       });
     });
   }, x = () => {
-    O(e.defaultCoordinates);
+    E(e.defaultCoordinates);
   };
   x();
   const I = () => {
-    c.clear(), E();
+    c.clear(), O();
   };
   return Se(() => {
     S();
   }), {
     inDraw: n,
     start: P,
-    stop: E,
+    stop: O,
     clear: I,
-    setFeatures: O,
+    setFeatures: E,
     reset: x,
     features: i,
-    coordinates: o,
+    coordinates: r,
     destroy: S
   };
 }
 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 = v(t.defaultShow || !1), { strokeStyleOption: n, strokeStyle: i, ...r } = t.graticuleOptions || {}, a = n ? new F(n) : i;
+  let c = new ve({
+    ...r,
+    strokeStyle: a
   });
-  return f(
+  return d(
     e,
-    (i) => {
-      if (n.setMap(null), i) {
-        n = new ve({
+    (f) => {
+      if (c.setMap(null), f) {
+        c = new ve({
           strokeStyle: new F({
             color: "#555",
             width: 1.5,
@@ -654,8 +648,8 @@ function ln(t) {
           wrapX: !1,
           zIndex: 1
         });
-        const o = _e(t.olMap);
-        o && n.setMap(o);
+        const s = _e(t.olMap);
+        s && c.setMap(s);
       }
     },
     {
@@ -672,13 +666,13 @@ function sn(t) {
     n.forEach((i) => {
       t.olMap.addLayer(i);
     });
-  }), f(
+  }), d(
     e,
     () => {
       Object.entries(t.layers).forEach(([n, i]) => {
-        const o = n === e.value;
+        const r = n === e.value;
         i.forEach((a) => {
-          a.setVisible(o);
+          a.setVisible(r);
         });
       });
     },
@@ -689,7 +683,7 @@ function sn(t) {
 }
 export {
   T as EPSG_3857,
-  rn as EPSG_3857ExtentToEPSG_4326,
+  on as EPSG_3857ExtentToEPSG_4326,
   tn as EPSG_3857ToEPSG_4326,
   _ as EPSG_4326,
   nn as EPSG_4326ExtentToEPSG_3857,
@@ -727,12 +721,12 @@ export {
   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,
+  ht as mercatorToWgs84,
   jt as nauticalMilesToKm,
   it as olMapInjectionKey,
   X as toOlAngle,

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

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

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

@@ -1,9 +1,14 @@
 import { Map as OLMap } from 'ol';
 import { MaybeRef, Ref } from 'vue';
-import { Stroke } from 'ol/style';
+import { StrokeOptions } from '../../utils';
+import { Graticule } from 'ol/layer';
+export type _GraticuleOptions = ConstructorParameters<typeof Graticule>[0];
+export type GraticuleOptions = _GraticuleOptions & {
+    strokeStyleOption?: StrokeOptions;
+};
 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,24 +1,18 @@
 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);
+import { Stroke as s } from "ol/style";
+import { ref as p, watch as f, toValue as w } from "vue";
+function d(e) {
+  const r = p(e.defaultShow || !1), { strokeStyleOption: o, strokeStyle: i, ...n } = e.graticuleOptions || {}, u = o ? new s(o) : i;
   let t = new a({
-    strokeStyle: e.strokeStyle || new o({
-      color: "#000",
-      width: 1.5,
-      lineDash: [4, 4]
-    }),
-    showLabels: !0,
-    wrapX: !1,
-    zIndex: 1
+    ...n,
+    strokeStyle: u
   });
-  return u(
+  return f(
     r,
-    (s) => {
-      if (t.setMap(null), s) {
+    (c) => {
+      if (t.setMap(null), c) {
         t = new a({
-          strokeStyle: new o({
+          strokeStyle: new s({
             color: "#555",
             width: 1.5,
             lineDash: [4, 4]
@@ -40,5 +34,5 @@ function h(e) {
   };
 }
 export {
-  h as useGraticule
+  d 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,14 @@
 import { Map as OLMap } from 'ol';
 import { MaybeRef, Ref } from 'vue';
-import { Stroke } from 'ol/style';
+import { StrokeOptions } from '../../utils';
+import { Graticule } from 'ol/layer';
+export type _GraticuleOptions = ConstructorParameters<typeof Graticule>[0];
+export type GraticuleOptions = _GraticuleOptions & {
+    strokeStyleOption?: StrokeOptions;
+};
 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 u=require("ol/layer"),a=require("ol/style"),r=require("vue");function y(e){const l=r.ref(e.defaultShow||!1),{strokeStyleOption:o,strokeStyle:i,...c}=e.graticuleOptions||{},n=o?new a.Stroke(o):i;let t=new u.Graticule({...c,strokeStyle:n});return r.watch(l,w=>{if(t.setMap(null),w){t=new u.Graticule({strokeStyle:new a.Stroke({color:"#555",width:1.5,lineDash:[4,4]}),showLabels:!0,wrapX:!1,zIndex:1});const s=r.toValue(e.olMap);s&&t.setMap(s)}},{immediate:!0,deep:!0}),{showGraticule:l}}exports.useGraticule=y;

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.0",
   "description": "",
   "author": "finalsummer",
   "license": "ISC",