@summeruse/ol 0.1.1 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @summeruse/ol
 
+## 0.1.2
+
+### Patch Changes
+
+- 007fa24: n-ol-pointermove 的 createOptions 添加 `followTarget` 参数
+
+## 0.1.2-beta.0
+
+### Patch Changes
+
+- 007fa24: n-ol-pointermove 的 createOptions 添加 `followTarget` 参数
+
 ## 0.1.1
 
 ### Patch Changes

package/README.md

@@ -1,3 +1,5 @@
+# @summeruse/ol
+
 <p align="center">
   <img width="144px" src="https://642661520.github.io/SummerUse/summeruse_logo_256.png" />
 </p>

package/dist/index.js

@@ -1,25 +1,26 @@
-import { defineComponent as U, ref as g, onMounted as j, createBlock as pe, openBlock as H, unref as Z, shallowRef as Me, withCtx as ke, createVNode as Fe, inject as Te, watch as d, provide as Ae, createElementBlock as _e, renderSlot as Re, computed as Se, render as z, onUnmounted as he, toValue as Ze } from "vue";
+import { defineComponent as U, ref as S, onMounted as j, createBlock as pe, openBlock as H, unref as Z, shallowRef as Me, withCtx as Fe, createVNode as Te, inject as ke, watch as m, provide as Ae, createElementBlock as _e, renderSlot as Re, computed as Se, render as z, onUnmounted as he, toValue as Ze } from "vue";
 import { NDropdown as ze, NPopover as Ge } from "naive-ui";
 import { RenderVNode as Be } from "@summeruse/common";
-import { Map as De, View as je, Feature as Q, Overlay as G } from "ol";
+import { getCenter as De } from "ol/extent";
+import { Map as je, View as Ne, 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 Ne, LineString as $, Polygon as K, Circle as Ve, MultiPoint as We, MultiLineString as $e, MultiPolygon as Ke } from "ol/geom";
+import { DragPan as se, MouseWheelZoom as ue, DoubleClickZoom as fe, PinchRotate as me, PinchZoom as de, DragRotate as ye, KeyboardPan as ge, KeyboardZoom as ve, Draw as Oe, Modify as xe } from "ol/interaction";
+import { Point as Ve, LineString as W, Polygon as K, Circle as $e, MultiPoint as We, MultiLineString as Ke, MultiPolygon as Xe } from "ol/geom";
 import q from "ol/layer/Vector";
 import J from "ol/source/Vector";
-import { destination as Xe, lineString as Ye, length as Ue, area as He, polygon as Qe, bearing as qe, midpoint as Je } from "@turf/turf";
-import { Circle as et, Stroke as T, Fill as B, Text as tt, Icon as nt, Style as ot } from "ol/style";
-import { Tile as ee, Graticule as rt } from "ol/layer";
-import { XYZ as it, BingMaps as at, OSM as ct } from "ol/source";
-import { transform as be, transformExtent as xe } from "ol/proj";
-const Zt = /* @__PURE__ */ U({
+import { destination as Ye, lineString as Ue, length as He, area as Qe, polygon as qe, bearing as Je, midpoint as et } from "@turf/turf";
+import { Circle as tt, Stroke as k, Fill as B, Text as nt, Icon as ot, Style as rt } from "ol/style";
+import { Tile as ee, Graticule as it } from "ol/layer";
+import { XYZ as at, BingMaps as ct, OSM as lt } from "ol/source";
+import { transform as Ee, transformExtent as be } from "ol/proj";
+const Gt = /* @__PURE__ */ U({
   __name: "index",
   props: {
     olMap: {},
     createOptions: { type: Function }
   },
   setup(t) {
-    const e = t, { olMap: n } = e, a = g({
+    const e = t, { olMap: n } = e, a = S({
       visible: !1,
       x: 0,
       y: 0
@@ -27,13 +28,13 @@ const Zt = /* @__PURE__ */ U({
     function r() {
       a.value.visible = !1;
     }
-    const i = g();
+    const i = S();
     j(() => {
       const f = n.getViewport();
       f && (f.oncontextmenu = (s) => {
         s.preventDefault();
-        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 = {
+        const l = n.getEventPixel(s), d = n.getEventCoordinate(s), g = n.getFeaturesAtPixel(l);
+        i.value = e.createOptions({ event: s, pixel: l, coordinate: d, features: g }), a.value = {
           visible: !0,
           x: s.clientX,
           y: s.clientY
@@ -55,29 +56,40 @@ const Zt = /* @__PURE__ */ U({
       onSelect: c
     }, null, 8, ["show", "x", "y", "options"]));
   }
-}), zt = /* @__PURE__ */ U({
+}), Bt = /* @__PURE__ */ U({
   __name: "index",
   props: {
     olMap: {},
     createOptions: { type: Function }
   },
   setup(t) {
-    const e = t, n = g({
+    const e = t, n = S({
       visible: !1,
       x: 0,
       y: 0
-    }), a = Me(), r = g("bottom-start"), i = g(!1), c = g(!1);
+    }), a = Me(), r = S("bottom-start"), i = S(!1), c = S(!1);
     return j(() => {
       var f;
       (f = e.olMap) == null || f.on("pointermove", (s) => {
-        const l = e.olMap.getFeaturesAtPixel(s.pixel), { clientX: w, clientY: y } = s.originalEvent;
+        const l = e.olMap.getFeaturesAtPixel(s.pixel);
         n.value.visible = !1;
-        const m = e.createOptions({
+        const d = e.createOptions({
           pixel: s.pixel,
           coordinate: s.coordinate,
           features: l
         });
-        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);
+        if (d) {
+          if (a.value = d.content, r.value = d.placement || "bottom-start", c.value = d.showArrow || !1, i.value = d.raw || !1, n.value.visible = !0, d.followTarget === "feature" && l.length > 0) {
+            const w = l[0].getGeometry();
+            if (w) {
+              const E = w.getExtent(), p = De(E), h = e.olMap.getPixelFromCoordinate(p), { top: b, left: L } = e.olMap.getViewport().getBoundingClientRect();
+              n.value.x = h[0] + L, n.value.y = h[1] + b;
+              return;
+            }
+          }
+          const { clientX: g, clientY: v } = s.originalEvent;
+          n.value.x = g, n.value.y = v;
+        }
       });
     }), (f, s) => (H(), pe(Z(Ge), {
       "show-arrow": c.value,
@@ -92,20 +104,20 @@ const Zt = /* @__PURE__ */ U({
         boxShadow: "none"
       }
     }, {
-      default: ke(() => [
-        Fe(Z(Be), { "dynamic-v-node": a.value }, null, 8, ["dynamic-v-node"])
+      default: Fe(() => [
+        Te(Z(Be), { "dynamic-v-node": a.value }, null, 8, ["dynamic-v-node"])
       ]),
       _: 1
     }, 8, ["show-arrow", "raw", "placement", "show", "x", "y"]));
   }
 }), Le = Symbol("olMapInjectionKey");
-function Gt() {
-  return Te(Le);
+function Dt() {
+  return ke(Le);
 }
-const Bt = /* @__PURE__ */ U({
+const jt = /* @__PURE__ */ U({
   __name: "index",
   props: {
-    olMap: { default: () => new De() },
+    olMap: { default: () => new je() },
     center: { default: () => [0, 0] },
     zoom: { default: 2 },
     minZoom: { default: 2 },
@@ -127,87 +139,87 @@ const Bt = /* @__PURE__ */ U({
     altShiftDragRotate: { type: Boolean }
   },
   setup(t, { expose: e }) {
-    const n = t, a = g(), r = n.olMap, i = new je({
+    const n = t, a = S(), r = n.olMap, i = new Ne({
       projection: n.projection,
       extent: n.extent
     });
-    r.setView(i), d(() => n.zoom, (o) => {
+    r.setView(i), m(() => n.zoom, (o) => {
       i.setZoom(o);
     }, {
       immediate: !0
-    }), d(() => n.center, (o) => {
+    }), m(() => n.center, (o) => {
       i.setCenter(o);
     }, {
       immediate: !0
-    }), d(() => n.constrainResolution, (o) => {
+    }), m(() => n.constrainResolution, (o) => {
       i.setConstrainResolution(o);
     }, {
       immediate: !0
-    }), d(() => n.minZoom, (o) => {
+    }), m(() => n.minZoom, (o) => {
       o && i.setMinZoom(o);
     }, {
       immediate: !0
-    }), d(() => n.maxZoom, (o) => {
+    }), m(() => n.maxZoom, (o) => {
       o && i.setMaxZoom(o);
     }, {
       immediate: !0
-    }), d(a, (o) => {
+    }), m(a, (o) => {
       o && r.setTarget(o);
     }), e({
       olMap: r
     }), Ae(Le, 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) => {
+    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(), d = c.find((o) => o instanceof ae) || new ae(), g = c.find((o) => o instanceof ce) || new ce(), v = c.find((o) => o instanceof le) || new le();
+    m(() => n.showZoom, (o) => {
       f.setMap(o ? r : null);
     }, {
       immediate: !0
-    }), d(() => n.showAttribution, (o) => {
+    }), m(() => n.showAttribution, (o) => {
       s.setMap(o ? r : null);
     }, {
       immediate: !0
-    }), d(() => n.showRotate, (o) => {
+    }), m(() => n.showRotate, (o) => {
       l.setMap(o ? r : null);
     }, {
       immediate: !0
-    }), d(() => n.showFullScreen, (o) => {
-      w.setMap(o ? r : null);
+    }), m(() => n.showFullScreen, (o) => {
+      d.setMap(o ? r : null);
     }, {
       immediate: !0
-    }), d(() => n.showOverview, (o) => {
-      y.setMap(o ? r : null);
+    }), m(() => n.showOverview, (o) => {
+      g.setMap(o ? r : null);
     }, {
       immediate: !0
-    }), d(() => n.showScale, (o) => {
-      m.setMap(o ? r : null);
+    }), m(() => n.showScale, (o) => {
+      v.setMap(o ? r : null);
     }, {
       immediate: !0
     });
-    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);
+    const y = r.getInteractions().getArray(), w = y.find((o) => o instanceof se) || new se(), E = y.find((o) => o instanceof ue) || new ue(), p = y.find((o) => o instanceof fe) || new fe(), h = y.find((o) => o instanceof me) || new me(), b = y.find((o) => o instanceof de) || new de(), L = y.find((o) => o instanceof ye) || new ye(), u = y.find((o) => o instanceof ge) || new ge(), O = y.find((o) => o instanceof ve) || new ve();
+    return r.removeInteraction(w), r.addInteraction(w), r.removeInteraction(E), r.addInteraction(E), r.removeInteraction(p), r.addInteraction(p), r.removeInteraction(h), r.addInteraction(h), r.removeInteraction(b), r.addInteraction(b), r.removeInteraction(L), r.addInteraction(L), r.removeInteraction(u), r.removeInteraction(O), m(() => n.dragPan, (o) => {
+      w.setActive(o);
     }, {
       immediate: !0
-    }), d(() => n.mouseWheelZoom, (o) => {
+    }), m(() => n.mouseWheelZoom, (o) => {
       E.setActive(o);
     }, {
       immediate: !0
-    }), d(() => n.doubleClickZoom, (o) => {
-      S.setActive(o);
+    }), m(() => n.doubleClickZoom, (o) => {
+      p.setActive(o);
     }, {
       immediate: !0
-    }), d(() => n.pinchRotate, (o) => {
-      b.setActive(o);
+    }), m(() => n.pinchRotate, (o) => {
+      h.setActive(o);
     }, {
       immediate: !0
-    }), d(() => n.pinchZoom, (o) => {
-      x.setActive(o);
+    }), m(() => n.pinchZoom, (o) => {
+      b.setActive(o);
     }, {
       immediate: !0
-    }), d(() => n.altShiftDragRotate, (o) => {
-      I.setActive(o);
+    }), m(() => n.altShiftDragRotate, (o) => {
+      L.setActive(o);
     }, {
       immediate: !0
-    }), (o, O) => (H(), _e("div", {
+    }), (o, x) => (H(), _e("div", {
       ref_key: "mapRef",
       ref: a
     }, [
@@ -224,154 +236,154 @@ function X(t) {
 function Y(t) {
   return t < -180 ? Y(t + 360) : t > 180 ? Y(t - 360) : t;
 }
-function lt(t, e, n) {
-  return Xe(t, e, Y(n), { units: "meters" }).geometry.coordinates;
+function st(t, e, n) {
+  return Ye(t, e, Y(n), { units: "meters" }).geometry.coordinates;
 }
-function Dt(t) {
-  const e = Ye(t);
-  return Ue(e, { units: "meters" });
+function Nt(t) {
+  const e = Ue(t);
+  return He(e, { units: "meters" });
 }
-function jt(t) {
-  return He(Qe(t));
+function Vt(t) {
+  return Qe(qe(t));
 }
-function Nt(t, e) {
-  return X(qe(t, e));
+function $t(t, e) {
+  return X(Je(t, e));
 }
-function st(t, e) {
-  return Je(t, e).geometry.coordinates;
+function ut(t, e) {
+  return et(t, e).geometry.coordinates;
 }
 function Pe(t) {
-  return st([t[0], t[1]], [t[2], t[3]]);
-}
-const Ie = 1852, A = "EPSG:3857", _ = "EPSG:4326", ge = A, ut = _;
-function Vt(t) {
-  return t * 1e3 / Ie;
+  return ut([t[0], t[1]], [t[2], t[3]]);
 }
+const Ce = 1852, A = "EPSG:3857", _ = "EPSG:4326", we = A, ft = _;
 function Wt(t) {
-  return t * Ie / 1e3;
+  return t * 1e3 / Ce;
+}
+function Kt(t) {
+  return t * Ce / 1e3;
 }
-function ft(t) {
+function mt(t) {
   const { fillOptions: e, strokeOptions: n, ...a } = t;
-  return new et({
+  return new tt({
     ...a,
     fill: e ? new B(e) : void 0,
-    stroke: n ? new T(n) : void 0
+    stroke: n ? new k(n) : void 0
   });
 }
 function R(t) {
   const { fillOptions: e, strokeOptions: n, backgroundFillOptions: a, backgroundStrokeOptions: r, ...i } = t;
-  return new tt({
+  return new nt({
     ...i,
     fill: e ? new B(e) : void 0,
-    stroke: n ? new T(n) : void 0,
+    stroke: n ? new k(n) : void 0,
     backgroundFill: a ? new B(a) : void 0,
-    backgroundStroke: r ? new T(r) : void 0
+    backgroundStroke: r ? new k(r) : 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 nt(a) : void 0, w = r ? ft(r) : void 0, y = i ? R(i) : void 0;
-  return new ot({
+function C(t) {
+  const { fillOptions: e, strokeOptions: n, iconOptions: a, circleOptions: r, textOptions: i, ...c } = t, f = e ? new B(e) : void 0, s = n ? new k(n) : void 0, l = a ? new ot(a) : void 0, d = r ? mt(r) : void 0, g = i ? R(i) : void 0;
+  return new rt({
     ...c,
     fill: f,
     stroke: s,
-    image: l || w,
-    text: y
+    image: l || d,
+    text: g
   });
 }
 function dt(t) {
-  return new Ne(t);
-}
-function mt(t) {
-  return new $(t);
+  return new Ve(t);
 }
 function yt(t) {
+  return new W(t);
+}
+function gt(t) {
   return new K(t);
 }
 function vt(t, e) {
-  return new Ve(t, e);
+  return new $e(t, e);
 }
 function wt(t) {
   return new We(t);
 }
-function gt(t) {
-  return new $e(t);
-}
 function pt(t) {
   return new Ke(t);
 }
+function St(t) {
+  return new Xe(t);
+}
 function M(t) {
-  const { styleOptions: e, ...n } = t ?? {}, a = e ? P(e) : n.style;
+  const { styleOptions: e, ...n } = t ?? {}, a = e ? C(e) : n.style;
   return new Q({
     ...n,
     style: a
   });
 }
-function $t(t, e) {
+function Xt(t, e) {
   const n = dt(t);
   return M({
     ...e,
     geometry: n
   });
 }
-function Kt(t, e) {
-  const n = mt(t);
+function Yt(t, e) {
+  const n = yt(t);
   return M({
     ...e,
     geometry: n
   });
 }
-function Xt(t, e) {
-  const n = yt(t);
+function Ut(t, e) {
+  const n = gt(t);
   return M({
     ...e,
     geometry: n
   });
 }
-function Yt(t, e, n) {
+function Ht(t, e, n) {
   const a = vt(t, e);
   return M({
     ...n,
     geometry: a
   });
 }
-function Ut(t, e) {
+function Qt(t, e) {
   const n = wt(t);
   return M({
     ...e,
     geometry: n
   });
 }
-function Ht(t, e) {
-  const n = gt(t);
+function qt(t, e) {
+  const n = pt(t);
   return M({
     ...e,
     geometry: n
   });
 }
-function Qt(t, e) {
-  const n = pt(t);
+function Jt(t, e) {
+  const n = St(t);
   return M({
     ...e,
     geometry: n
   });
 }
-function St(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 === ut ? "c" : n === ge ? "w" : "c"}/wmts?LAYER=${e}${i}`;
+function ht(t) {
+  const { type: e = "img", projection: n = we, 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 === ft ? "c" : n === we ? "w" : "c"}/wmts?LAYER=${e}${i}`;
 }
-function qt(t) {
+function en(t) {
   const { zIndex: e, projection: n, className: a } = t;
   return new ee({
     className: a,
-    source: new it({
-      url: St(t),
+    source: new at({
+      url: ht(t),
       projection: n,
       crossOrigin: "Anonymous"
     }),
     zIndex: e
   });
 }
-function Jt({
+function tn({
   name: t,
   zIndex: e,
   key: n,
@@ -379,7 +391,7 @@ function Jt({
 }) {
   return new ee({
     className: a,
-    source: new at({
+    source: new ct({
       key: n,
       imagerySet: t,
       placeholderTiles: !1
@@ -387,17 +399,17 @@ function Jt({
     zIndex: e
   });
 }
-function en(t) {
+function nn(t) {
   return new ee({
     className: t == null ? void 0 : t.className,
-    source: new ct({
+    source: new lt({
       crossOrigin: "Anonymous"
     }),
     zIndex: t == null ? void 0 : t.zIndex
   });
 }
-function tn(t) {
-  const { styleOptions: e, ...n } = t || {}, a = e ? P(e) : void 0, r = new J(), i = new q({
+function on(t) {
+  const { styleOptions: e, ...n } = t || {}, a = e ? C(e) : void 0, r = new J(), i = new q({
     source: r,
     ...n,
     style: a || n.style
@@ -408,86 +420,86 @@ function tn(t) {
   };
 }
 function te(t) {
-  return be(t, _, A);
+  return Ee(t, _, A);
 }
-const nn = te;
-function ht(t) {
-  return be(t, A, _);
-}
-const on = ht;
+const rn = te;
 function Ot(t) {
-  return xe(t, _, A);
+  return Ee(t, A, _);
 }
-const rn = Ot;
+const an = Ot;
+function xt(t) {
+  return be(t, _, A);
+}
+const cn = xt;
 function ne(t) {
-  return xe(t, A, _);
+  return be(t, A, _);
 }
-const an = ne;
-function cn(t, e, n = 60) {
+const ln = ne;
+function sn(t, e, n = 60) {
   const a = [], r = 360 / n;
   for (let i = -180; i < 180; i = i + r)
-    a.push(lt(t, e, i));
+    a.push(st(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 ln(t, e) {
-  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({
+function un(t, e) {
+  const n = S(!0), a = S([]), r = Se(() => a.value.map((u) => u.getGeometry().getCoordinates())), i = new J(), c = e.styleOptions ? C(e.styleOptions) : e == null ? void 0 : e.style, f = new q({
     source: i,
     style: c,
     zIndex: e == null ? void 0 : e.zIndex
   });
   t.addLayer(f);
-  const s = e.drawStyleOptions ? P(e.drawStyleOptions) : e == null ? void 0 : e.drawStyle, l = new Oe({
+  const s = e.drawStyleOptions ? C(e.drawStyleOptions) : e == null ? void 0 : e.drawStyle, l = new Oe({
     source: i,
     style: s || c,
     type: "LineString"
   });
   l.setActive(!1);
-  const w = e.modifyStyleOptions ? P(e.modifyStyleOptions) : e == null ? void 0 : e.modifyStyle, y = new Ee({
+  const d = e.modifyStyleOptions ? C(e.modifyStyleOptions) : e == null ? void 0 : e.modifyStyle, g = new xe({
     source: i,
-    style: w || c
-  }), m = /* @__PURE__ */ new Set();
+    style: d || c
+  }), v = /* @__PURE__ */ new Set();
   t.addInteraction(l), j(() => {
-    t.addInteraction(y);
+    t.addInteraction(g);
   }), 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 v = () => {
-    m.forEach((u) => {
+  const y = () => {
+    v.forEach((u) => {
       t.removeOverlay(u);
-    }), m.clear();
+    }), v.clear();
   };
   i.on("change", () => {
-    v(), i.getFeatures().forEach((u) => {
-      const h = u.getGeometry(), o = Pe(ne(h.getExtent()));
-      let O = document.createElement("div");
-      e.deleteFeatureLabel ? z(e.deleteFeatureLabel, O) : O = D("删除线"), O.addEventListener("click", () => {
+    y(), i.getFeatures().forEach((u) => {
+      const O = u.getGeometry(), o = Pe(ne(O.getExtent()));
+      let x = document.createElement("div");
+      e.deleteFeatureLabel ? z(e.deleteFeatureLabel, x) : x = D("删除线"), x.addEventListener("click", () => {
         i.removeFeature(u);
       });
-      const k = new G({
+      const F = new G({
         position: te(o),
         positioning: "center-center",
-        element: O
+        element: x
       });
-      m.add(k), t.addOverlay(k);
-      const C = h.getCoordinates();
-      C.length < 3 || C.forEach((N, V) => {
-        let L = document.createElement("div");
-        e.deletePointLabel ? z(e.deletePointLabel, L) : L = D("删除点"), L.addEventListener("click", () => {
-          u.setGeometry(new $(C.filter((Ce, W) => W !== V)));
+      v.add(F), t.addOverlay(F);
+      const I = O.getCoordinates();
+      I.length < 3 || I.forEach((N, V) => {
+        let P = document.createElement("div");
+        e.deletePointLabel ? z(e.deletePointLabel, P) : P = D("删除点"), P.addEventListener("click", () => {
+          u.setGeometry(new W(I.filter((Ie, $) => $ !== V)));
         });
-        const F = new G({
+        const T = new G({
           position: N,
           positioning: "top-center",
           offset: [0, -30],
-          element: L
+          element: P
         });
-        m.add(F), t.addOverlay(F);
+        v.add(T), t.addOverlay(T);
       });
     });
   }), l.on("change:active", () => {
@@ -495,97 +507,97 @@ function ln(t, e) {
   }), i.on("change", () => {
     a.value = i.getFeatures();
   });
-  const p = () => {
-    v(), t.removeLayer(f), t.removeInteraction(l), t.removeInteraction(y);
+  const w = () => {
+    y(), t.removeLayer(f), t.removeInteraction(l), t.removeInteraction(g);
   }, E = () => {
     e.size && a.value.length >= e.size || l.setActive(!0);
-  }, S = () => {
+  }, p = () => {
     l.setActive(!1);
-  }, b = (u) => {
-    i.clear(), u.forEach((h) => {
-      if (h.length < 2)
+  }, h = (u) => {
+    i.clear(), u.forEach((O) => {
+      if (O.length < 2)
         return;
       const o = new Q({
-        geometry: new $(h)
+        geometry: new W(O)
       });
       i.addFeature(o);
     });
-  }, x = () => {
-    b(e.defaultCoordinates || []);
+  }, b = () => {
+    h(e.defaultCoordinates || []);
   };
-  x();
-  const I = () => {
-    i.clear(), S();
+  b();
+  const L = () => {
+    i.clear(), p();
   };
   return he(() => {
-    p();
+    w();
   }), {
     inDraw: n,
     start: E,
-    stop: S,
-    clear: I,
-    setFeatures: b,
-    reset: x,
+    stop: p,
+    clear: L,
+    setFeatures: h,
+    reset: b,
     features: a,
     coordinates: r,
-    destroy: p
+    destroy: w
   };
 }
-function sn(t, e) {
-  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({
+function fn(t, e) {
+  const n = S(!0), a = S([]), r = Se(() => a.value.map((u) => u.getGeometry().getCoordinates())), i = e.styleOptions ? C(e.styleOptions) : e == null ? void 0 : e.style, c = new J(), f = new q({
     source: c,
     style: i,
     zIndex: e == null ? void 0 : e.zIndex
   });
   t.addLayer(f);
-  const s = e.drawStyleOptions ? P(e.drawStyleOptions) : e == null ? void 0 : e.drawStyle, l = new Oe({
+  const s = e.drawStyleOptions ? C(e.drawStyleOptions) : e == null ? void 0 : e.drawStyle, l = new Oe({
     source: c,
     style: s || i,
     type: "Polygon"
   });
   l.setActive(!1);
-  const w = e.modifyStyleOptions ? P(e.modifyStyleOptions) : e == null ? void 0 : e.modifyStyle, y = new Ee({
+  const d = e.modifyStyleOptions ? C(e.modifyStyleOptions) : e == null ? void 0 : e.modifyStyle, g = new xe({
     source: c,
-    style: w || i
-  }), m = /* @__PURE__ */ new Set();
+    style: d || i
+  }), v = /* @__PURE__ */ new Set();
   t.addInteraction(l), j(() => {
-    t.addInteraction(y);
+    t.addInteraction(g);
   }), 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 v = () => {
-    m.forEach((u) => {
+  const y = () => {
+    v.forEach((u) => {
       t.removeOverlay(u);
-    }), m.clear();
+    }), v.clear();
   };
   c.on("change", () => {
-    v(), c.getFeatures().forEach((u) => {
-      const h = u.getGeometry(), o = Pe(ne(h.getExtent()));
-      let O = document.createElement("div");
-      e.deleteFeatureLabel ? z(e.deleteFeatureLabel, O) : O = D("删除区域"), O.addEventListener("click", () => {
+    y(), c.getFeatures().forEach((u) => {
+      const O = u.getGeometry(), o = Pe(ne(O.getExtent()));
+      let x = document.createElement("div");
+      e.deleteFeatureLabel ? z(e.deleteFeatureLabel, x) : x = D("删除区域"), x.addEventListener("click", () => {
         c.removeFeature(u);
       });
-      const k = new G({
+      const F = new G({
         position: te(o),
         positioning: "center-center",
-        element: O
+        element: x
       });
-      m.add(k), t.addOverlay(k);
-      const C = h.getCoordinates()[0];
-      C.length < 3 || C.forEach((N, V) => {
-        let L = document.createElement("div");
-        e.deletePointLabel ? z(e.deletePointLabel, L) : L = D("删除点"), L.addEventListener("click", () => {
-          u.setGeometry(new K([C.filter((Ce, W) => W !== V)]));
+      v.add(F), t.addOverlay(F);
+      const I = O.getCoordinates()[0];
+      I.length < 3 || I.forEach((N, V) => {
+        let P = document.createElement("div");
+        e.deletePointLabel ? z(e.deletePointLabel, P) : P = D("删除点"), P.addEventListener("click", () => {
+          u.setGeometry(new K([I.filter((Ie, $) => $ !== V)]));
         });
-        const F = new G({
+        const T = new G({
           position: N,
           positioning: "top-center",
           offset: [0, -30],
-          element: L
+          element: P
         });
-        m.add(F), t.addOverlay(F);
+        v.add(T), t.addOverlay(T);
       });
     });
   }), l.on("change:active", () => {
@@ -593,58 +605,58 @@ function sn(t, e) {
   }), c.on("change", () => {
     a.value = c.getFeatures();
   });
-  const p = () => {
-    v(), t.removeLayer(f), t.removeInteraction(l), t.removeInteraction(y);
+  const w = () => {
+    y(), t.removeLayer(f), t.removeInteraction(l), t.removeInteraction(g);
   }, E = () => {
     e.size && a.value.length >= e.size || l.setActive(!0);
-  }, S = () => {
+  }, p = () => {
     l.setActive(!1);
-  }, b = (u) => {
-    c.clear(), u == null || u.forEach((h) => {
-      h.forEach((o) => {
+  }, h = (u) => {
+    c.clear(), u == null || u.forEach((O) => {
+      O.forEach((o) => {
         if (o.length < 2)
           return;
         o[0] !== o[o.length - 1] && o.push(o[0]);
-        const O = new Q({
+        const x = new Q({
           geometry: new K([o])
         });
-        c.addFeature(O);
+        c.addFeature(x);
       });
     });
-  }, x = () => {
-    b(e.defaultCoordinates);
+  }, b = () => {
+    h(e.defaultCoordinates);
   };
-  x();
-  const I = () => {
-    c.clear(), S();
+  b();
+  const L = () => {
+    c.clear(), p();
   };
   return he(() => {
-    p();
+    w();
   }), {
     inDraw: n,
     start: E,
-    stop: S,
-    clear: I,
-    setFeatures: b,
-    reset: x,
+    stop: p,
+    clear: L,
+    setFeatures: h,
+    reset: b,
     features: a,
     coordinates: r,
-    destroy: p
+    destroy: w
   };
 }
-function un(t) {
-  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 rt({
+function mn(t) {
+  const e = S(t.defaultShow || !1), { strokeStyleOption: n, strokeStyle: a, labelStyleOption: r, latLabelStyleOption: i, lonLabelStyleOption: c, latLabelStyle: f, lonLabelStyle: s, ...l } = t.graticuleOptions || {}, d = n ? new k(n) : a, g = r ? R(r) : void 0, v = (i ? R(i) : f) || g, y = (c ? R(c) : s) || g, w = new it({
     ...l,
-    strokeStyle: w,
-    latLabelStyle: m,
-    lonLabelStyle: v
+    strokeStyle: d,
+    latLabelStyle: v,
+    lonLabelStyle: y
   });
-  return d(
+  return m(
     e,
     (E) => {
-      if (p.setMap(null), E) {
-        const S = Ze(t.olMap);
-        S && p.setMap(S);
+      if (w.setMap(null), E) {
+        const p = Ze(t.olMap);
+        p && w.setMap(p);
       }
     },
     {
@@ -655,13 +667,13 @@ function un(t) {
     showGraticule: e
   };
 }
-function fn(t) {
-  const e = g(t.defaultLayerName || Object.keys(t.layers)[0]);
+function dn(t) {
+  const e = S(t.defaultLayerName || Object.keys(t.layers)[0]);
   return Object.values(t.layers).forEach((n) => {
     n.forEach((a) => {
       t.olMap.addLayer(a);
     });
-  }), d(
+  }), m(
     e,
     () => {
       Object.entries(t.layers).forEach(([n, a]) => {
@@ -678,59 +690,59 @@ function fn(t) {
 }
 export {
   A as EPSG_3857,
-  an as EPSG_3857ExtentToEPSG_4326,
-  on as EPSG_3857ToEPSG_4326,
+  ln as EPSG_3857ExtentToEPSG_4326,
+  an as EPSG_3857ToEPSG_4326,
   _ as EPSG_4326,
-  rn as EPSG_4326ExtentToEPSG_3857,
-  nn as EPSG_4326ToEPSG_3857,
-  Zt as NOlContextmenu,
-  zt as NOlPointermove,
-  Ie as ONE_NM,
-  Bt as OlMap,
-  ut as WGS84Projection,
-  ge as WebMercatorProjection,
+  cn as EPSG_4326ExtentToEPSG_3857,
+  rn as EPSG_4326ToEPSG_3857,
+  Gt as NOlContextmenu,
+  Bt as NOlPointermove,
+  Ce as ONE_NM,
+  jt as OlMap,
+  ft as WGS84Projection,
+  we as WebMercatorProjection,
   vt as createCircle,
-  Yt as createCircleFeature,
-  ft as createCircleStyle,
+  Ht as createCircleFeature,
+  mt as createCircleStyle,
   M as createFeature,
-  mt as createLineString,
-  Kt as createLineStringFeature,
-  gt as createMultiLineString,
-  Ht as createMultiLineStringFeature,
+  yt as createLineString,
+  Yt as createLineStringFeature,
+  pt as createMultiLineString,
+  qt as createMultiLineStringFeature,
   wt as createMultiPoint,
-  Ut as createMultiPointFeature,
-  pt as createMultiPolygon,
-  Qt as createMultiPolygonFeature,
+  Qt as createMultiPointFeature,
+  St as createMultiPolygon,
+  Jt as createMultiPolygonFeature,
   dt as createPoint,
-  $t as createPointFeature,
-  yt as createPolygon,
-  Xt as createPolygonFeature,
-  P as createStyle,
+  Xt as createPointFeature,
+  gt as createPolygon,
+  Ut as createPolygonFeature,
+  C as createStyle,
   R as createTextStyle,
-  tn as createVectorLayer,
-  Nt as getAngle,
-  jt as getArea,
-  Jt as getBingLayer,
-  st as getCenter,
-  lt as getDestinationPoint,
+  on as createVectorLayer,
+  $t as getAngle,
+  Vt as getArea,
+  tn as getBingLayer,
+  ut as getCenter,
+  st as getDestinationPoint,
   Pe as getExtentCenter,
-  Dt as getLineLength,
-  en as getOSMLayer,
-  cn as getRealCircleCoordinates,
-  qt as getTianDiTuLayer,
-  St as getTianDiTuUrl,
-  Vt as kmToNauticalMiles,
+  Nt as getLineLength,
+  nn as getOSMLayer,
+  sn as getRealCircleCoordinates,
+  en as getTianDiTuLayer,
+  ht as getTianDiTuUrl,
+  Wt as kmToNauticalMiles,
   ne as mercatorExtentToWgs84,
-  ht as mercatorToWgs84,
-  Wt as nauticalMilesToKm,
+  Ot as mercatorToWgs84,
+  Kt as nauticalMilesToKm,
   Le as olMapInjectionKey,
   X as toOlAngle,
   Y as toTurfAngle,
-  ln as useDrawLineString,
-  sn as useDrawPolygon,
-  un as useGraticule,
-  Gt as useOlMap,
-  fn as useSwitchBaseLayer,
-  Ot as wgs84ExtentToMercator,
+  un as useDrawLineString,
+  fn as useDrawPolygon,
+  mn as useGraticule,
+  Dt as useOlMap,
+  dn as useSwitchBaseLayer,
+  xt as wgs84ExtentToMercator,
   te as wgs84ToMercator
 };

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

@@ -1,34 +1,46 @@
-import { defineComponent as d, ref as t, shallowRef as w, onMounted as x, createBlock as h, openBlock as y, unref as p, withCtx as b, createVNode as _ } from "vue";
-import { RenderVNode as g } from "@summeruse/common";
-import { NPopover as M } from "naive-ui";
-const k = /* @__PURE__ */ d({
+import { defineComponent as b, ref as n, shallowRef as _, onMounted as C, createBlock as M, openBlock as A, unref as m, withCtx as B, createVNode as F } from "vue";
+import { RenderVNode as N } from "@summeruse/common";
+import { NPopover as P } from "naive-ui";
+import { getCenter as R } from "ol/extent";
+const S = /* @__PURE__ */ b({
   __name: "index",
   props: {
     olMap: {},
     createOptions: { type: Function }
   },
-  setup(u) {
-    const l = u, e = t({
+  setup(v) {
+    const t = v, e = n({
       visible: !1,
       x: 0,
       y: 0
-    }), r = w(), s = t("bottom-start"), i = t(!1), c = t(!1);
-    return x(() => {
-      var n;
-      (n = l.olMap) == null || n.on("pointermove", (o) => {
-        const v = l.olMap.getFeaturesAtPixel(o.pixel), { clientX: m, clientY: f } = o.originalEvent;
+    }), s = _(), i = n("bottom-start"), c = n(!1), p = n(!1);
+    return C(() => {
+      var r;
+      (r = t.olMap) == null || r.on("pointermove", (a) => {
+        const l = t.olMap.getFeaturesAtPixel(a.pixel);
         e.value.visible = !1;
-        const a = l.createOptions({
-          pixel: o.pixel,
-          coordinate: o.coordinate,
-          features: v
+        const o = t.createOptions({
+          pixel: a.pixel,
+          coordinate: a.coordinate,
+          features: l
         });
-        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 = m, e.value.y = f);
+        if (o) {
+          if (s.value = o.content, i.value = o.placement || "bottom-start", p.value = o.showArrow || !1, c.value = o.raw || !1, e.value.visible = !0, o.followTarget === "feature" && l.length > 0) {
+            const u = l[0].getGeometry();
+            if (u) {
+              const x = u.getExtent(), g = R(x), f = t.olMap.getPixelFromCoordinate(g), { top: h, left: y } = t.olMap.getViewport().getBoundingClientRect();
+              e.value.x = f[0] + y, e.value.y = f[1] + h;
+              return;
+            }
+          }
+          const { clientX: d, clientY: w } = a.originalEvent;
+          e.value.x = d, e.value.y = w;
+        }
       });
-    }), (n, o) => (y(), h(p(M), {
-      "show-arrow": c.value,
-      raw: i.value,
-      placement: s.value,
+    }), (r, a) => (A(), M(m(P), {
+      "show-arrow": p.value,
+      raw: c.value,
+      placement: i.value,
       show: e.value.visible,
       x: e.value.x,
       y: e.value.y,
@@ -38,13 +50,13 @@ const k = /* @__PURE__ */ d({
         boxShadow: "none"
       }
     }, {
-      default: b(() => [
-        _(p(g), { "dynamic-v-node": r.value }, null, 8, ["dynamic-v-node"])
+      default: B(() => [
+        F(m(N), { "dynamic-v-node": s.value }, null, 8, ["dynamic-v-node"])
       ]),
       _: 1
     }, 8, ["show-arrow", "raw", "placement", "show", "x", "y"]));
   }
 });
 export {
-  k as default
+  S as default
 };

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

@@ -4,17 +4,19 @@ import { Coordinate } from 'ol/coordinate';
 import { FeatureLike } from 'ol/Feature';
 import { Pixel } from 'ol/pixel';
 import { VNodeChild } from 'vue';
-export interface NOlPointermoveOptions {
+export interface NOlPointermoveParams {
     pixel: Pixel;
     coordinate: Coordinate;
     features: FeatureLike[];
 }
+export type NOlPointermoveOption = {
+    content: (() => VNodeChild) | VNodeChild | string;
+    raw?: boolean;
+    showArrow?: boolean;
+    placement?: PopoverPlacement;
+    followTarget?: 'mouse' | 'feature';
+} | undefined;
 export interface NOlPointermoveProps {
     olMap: OLMap;
-    createOptions: (data: NOlPointermoveOptions) => {
-        content: (() => VNodeChild) | VNodeChild | string;
-        raw?: boolean;
-        showArrow?: boolean;
-        placement?: PopoverPlacement;
-    } | undefined;
+    createOptions: (data: NOlPointermoveParams) => NOlPointermoveOption;
 }

package/lib/components/n-ol-pointermove/index.vue.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),d=require("@summeruse/common"),m=require("naive-ui"),w=e.defineComponent({__name:"index",props:{olMap:{},createOptions:{type:Function}},setup(u){const n=u,o=e.ref({visible:!1,x:0,y:0}),r=e.shallowRef(),s=e.ref("bottom-start"),i=e.ref(!1),c=e.ref(!1);return e.onMounted(()=>{var l;(l=n.olMap)==null||l.on("pointermove",t=>{const v=n.olMap.getFeaturesAtPixel(t.pixel),{clientX:p,clientY:f}=t.originalEvent;o.value.visible=!1;const a=n.createOptions({pixel:t.pixel,coordinate:t.coordinate,features:v});a&&(r.value=a.content,s.value=a.placement||"bottom-start",c.value=a.showArrow||!1,i.value=a.raw||!1,o.value.visible=!0,o.value.x=p,o.value.y=f)})}),(l,t)=>(e.openBlock(),e.createBlock(e.unref(m.NPopover),{"show-arrow":c.value,raw:i.value,placement:s.value,show:o.value.visible,x:o.value.x,y:o.value.y,trigger:"manual",class:"n-ol-pointermove","theme-overrides":{boxShadow:"none"}},{default:e.withCtx(()=>[e.createVNode(e.unref(d.RenderVNode),{"dynamic-v-node":r.value},null,8,["dynamic-v-node"])]),_:1},8,["show-arrow","raw","placement","show","x","y"]))}});exports.default=w;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),y=require("@summeruse/common"),b=require("naive-ui"),_=require("ol/extent"),M=e.defineComponent({__name:"index",props:{olMap:{},createOptions:{type:Function}},setup(f){const n=f,t=e.ref({visible:!1,x:0,y:0}),s=e.shallowRef(),i=e.ref("bottom-start"),c=e.ref(!1),u=e.ref(!1);return e.onMounted(()=>{var a;(a=n.olMap)==null||a.on("pointermove",r=>{const l=n.olMap.getFeaturesAtPixel(r.pixel);t.value.visible=!1;const o=n.createOptions({pixel:r.pixel,coordinate:r.coordinate,features:l});if(o){if(s.value=o.content,i.value=o.placement||"bottom-start",u.value=o.showArrow||!1,c.value=o.raw||!1,t.value.visible=!0,o.followTarget==="feature"&&l.length>0){const p=l[0].getGeometry();if(p){const w=p.getExtent(),x=_.getCenter(w),v=n.olMap.getPixelFromCoordinate(x),{top:g,left:h}=n.olMap.getViewport().getBoundingClientRect();t.value.x=v[0]+h,t.value.y=v[1]+g;return}}const{clientX:d,clientY:m}=r.originalEvent;t.value.x=d,t.value.y=m}})}),(a,r)=>(e.openBlock(),e.createBlock(e.unref(b.NPopover),{"show-arrow":u.value,raw:c.value,placement:i.value,show:t.value.visible,x:t.value.x,y:t.value.y,trigger:"manual",class:"n-ol-pointermove","theme-overrides":{boxShadow:"none"}},{default:e.withCtx(()=>[e.createVNode(e.unref(y.RenderVNode),{"dynamic-v-node":s.value},null,8,["dynamic-v-node"])]),_:1},8,["show-arrow","raw","placement","show","x","y"]))}});exports.default=M;

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

@@ -4,17 +4,19 @@ import { Coordinate } from 'ol/coordinate';
 import { FeatureLike } from 'ol/Feature';
 import { Pixel } from 'ol/pixel';
 import { VNodeChild } from 'vue';
-export interface NOlPointermoveOptions {
+export interface NOlPointermoveParams {
     pixel: Pixel;
     coordinate: Coordinate;
     features: FeatureLike[];
 }
+export type NOlPointermoveOption = {
+    content: (() => VNodeChild) | VNodeChild | string;
+    raw?: boolean;
+    showArrow?: boolean;
+    placement?: PopoverPlacement;
+    followTarget?: 'mouse' | 'feature';
+} | undefined;
 export interface NOlPointermoveProps {
     olMap: OLMap;
-    createOptions: (data: NOlPointermoveOptions) => {
-        content: (() => VNodeChild) | VNodeChild | string;
-        raw?: boolean;
-        showArrow?: boolean;
-        placement?: PopoverPlacement;
-    } | undefined;
+    createOptions: (data: NOlPointermoveParams) => NOlPointermoveOption;
 }

package/package.json

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