bbl-mapbox-react 0.0.14 → 0.0.16

package/dist/index.mjs

@@ -3181,9 +3181,9 @@ function RoadHighlightControl({ map: e, highlightWidth: r = 3, defaultRoadTypes:
 		b,
 		D
 	]);
-	let be = (e, t) => {
+	let ve = (e, t) => {
 		y((n) => t ? [...n, e] : n.filter((t) => t !== e));
-	}, xe = (e) => {
+	}, ye = (e) => {
 		y(e ? ROAD_TYPE_OPTIONS.map((e) => e.class) : []);
 	}, k = v.length > 0;
 	return /* @__PURE__ */ jsxs("div", {
@@ -3211,7 +3211,7 @@ function RoadHighlightControl({ map: e, highlightWidth: r = 3, defaultRoadTypes:
 					}), /* @__PURE__ */ jsx(Checkbox, {
 						checked: v.length === ROAD_TYPE_OPTIONS.length,
 						indeterminate: v.length > 0 && v.length < ROAD_TYPE_OPTIONS.length,
-						onChange: xe,
+						onChange: ye,
 						style: {
 							"--color-text-1": "#fff",
 							"--color-border-2": "rgba(255, 255, 255, 0.3)"
@@ -3228,11 +3228,11 @@ function RoadHighlightControl({ map: e, highlightWidth: r = 3, defaultRoadTypes:
 						className: "mapbox-road-highlight-control__type-list",
 						children: ROAD_TYPE_OPTIONS.map((e) => /* @__PURE__ */ jsxs("div", {
 							className: "mapbox-road-highlight-control__type-item",
-							onClick: () => be(e.class, !v.includes(e.class)),
+							onClick: () => ve(e.class, !v.includes(e.class)),
 							children: [
 								/* @__PURE__ */ jsx(Checkbox, {
 									checked: v.includes(e.class),
-									onChange: (t) => be(e.class, t),
+									onChange: (t) => ve(e.class, t),
 									onClick: (e) => e.stopPropagation(),
 									style: {
 										"--color-text-1": "#fff",
@@ -3367,7 +3367,14 @@ function clearPreviewSource(e, t) {
 		features: []
 	});
 }
+function ensureGlyphs(e) {
+	if (!e.getStyle().glyphs) {
+		let t = e.style, n = "/gis-fonts/{fontstack}/{range}.pbf";
+		t.glyphs = n, t.stylesheet && (t.stylesheet.glyphs = n);
+	}
+}
 function initAllPreviewLayers(e) {
+	ensureGlyphs(e);
 	for (let t of [
 		"rect",
 		"circle",
@@ -3498,57 +3505,61 @@ function clearAllPreviewSources(e) {
 		"polyline-vertices-source"
 	]) clearPreviewSource(e, `${PREVIEW_PREFIX}${t}`);
 }
-function MeasureControl({ map: e, defaultEntityConfig: r, className: i = "", style: s }) {
-	let [c, l] = useState(!1), [u, d] = useState(null), [f, g] = useState({
-		showArea: r?.showArea ?? !0,
-		showLength: r?.showLength ?? !0,
-		showRadius: r?.showRadius ?? !0
-	}), [_, v] = useState([]), y = useRef(/* @__PURE__ */ new Map()), b = useRef(0), x = useRef(null), S = useRef(null), C = useRef(null), T = useRef(null), E = useRef(null), D = useRef([]), O = useRef([]), k = useRef(f);
-	k.current = f;
-	let A = useRef(u);
-	A.current = u;
-	let j = useCallback(() => `measure-${++b.current}`, []), M = useRef(!1), Se = useCallback(() => {
-		!e || !e.isStyleLoaded() || (initAllPreviewLayers(e), M.current = !0);
+function MeasureControl({ map: e, entityConfig: r, onEntityConfigChange: i, className: s = "", style: c }) {
+	let [l, u] = useState(!1), [d, f] = useState(null), [g, _] = useState({
+		showArea: !0,
+		showLength: !0,
+		showRadius: !0
+	}), v = r !== void 0, y = v ? {
+		showArea: r.showArea ?? !0,
+		showLength: r.showLength ?? !0,
+		showRadius: r.showRadius ?? !0
+	} : g, [b, x] = useState([]), S = useRef(/* @__PURE__ */ new Map()), C = useRef(0), T = useRef(null), E = useRef(null), D = useRef(null), O = useRef(null), k = useRef(null), A = useRef([]), j = useRef([]), M = useRef(y);
+	M.current = y;
+	let be = useRef(d);
+	be.current = d;
+	let xe = useCallback(() => `measure-${++C.current}`, []), Se = useRef(!1), Ce = useCallback(() => {
+		!e || !e.isStyleLoaded() || (initAllPreviewLayers(e), Se.current = !0);
 	}, [e]);
 	useEffect(() => {
 		if (!e) return;
 		let t = () => {
-			initAllPreviewLayers(e), M.current = !0;
+			initAllPreviewLayers(e), Se.current = !0;
 		};
 		e.isStyleLoaded() ? t() : e.once("load", t);
 		let n = () => {
-			M.current = !1;
+			Se.current = !1;
 		};
 		return e.on("style.load", n), () => {
 			e.off("style.load", n);
 		};
 	}, [e]), useEffect(() => {
 		let e = (e) => {
-			x.current && !x.current.contains(e.target) && S.current && !S.current.contains(e.target) && l(!1);
+			T.current && !T.current.contains(e.target) && E.current && !E.current.contains(e.target) && u(!1);
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	}, []);
-	let Ce = useCallback((t) => {
+	let we = useCallback((t) => {
 		if (!e) return;
-		let n = applyEntityConfig(t, k.current), r = null;
+		let n = applyEntityConfig(t, M.current), r = null;
 		if (n.type === "circle" ? r = new CircleRenderer(e, n) : n.type === "square" ? r = new SquareRenderer(e, n) : n.type === "rectangle" ? r = new RectangleRenderer(e, n) : n.type === "polygon" ? r = new PolygonRenderer(e, n) : n.type === "polyline" && (r = new PolylineRenderer(e, n)), r) {
-			y.current.set(n.id, r);
+			S.current.set(n.id, r);
 			let e = {
 				entity: n,
 				shapeLabel: SHAPE_LABELS[n.type] || n.type,
 				area: computeEntityArea(n),
 				lengthOrRadius: computeEntityLengthOrRadius(n)
 			};
-			v((t) => [...t, e]);
+			x((t) => [...t, e]);
 		}
-	}, [e]), we = useCallback((e) => {
-		let t = y.current.get(e);
-		t && (t.destroy(), y.current.delete(e)), v((t) => t.filter((t) => t.entity.id !== e));
-	}, []), Te = useCallback(() => {
-		y.current.forEach((e) => e.destroy()), y.current.clear(), v([]);
-	}, []), Ee = useCallback((t) => {
+	}, [e]), Te = useCallback((e) => {
+		let t = S.current.get(e);
+		t && (t.destroy(), S.current.delete(e)), x((t) => t.filter((t) => t.entity.id !== e));
+	}, []), Ee = useCallback(() => {
+		S.current.forEach((e) => e.destroy()), S.current.clear(), x([]);
+	}, []), De = useCallback((t) => {
 		if (!e) return;
-		let n = y.current.get(t);
+		let n = S.current.get(t);
 		if (!n) return;
 		let r = n.getBounds();
 		e.fitBounds(r, {
@@ -3556,23 +3567,21 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: i = "", sty
 			maxZoom: 18,
 			duration: 1e3
 		});
-	}, [e]), De = useCallback((e, t) => {
-		g((n) => {
-			let r = {
-				...n,
-				[e]: t
+	}, [e]), Oe = useCallback((e, t) => {
+		let n = {
+			...M.current,
+			[e]: t
+		};
+		v ? i?.({ ...n }) : _(n), x((t) => t.map((t) => {
+			let r = { ...t.entity };
+			r[e] = void 0;
+			let i = applyEntityConfig(r, n), a = S.current.get(t.entity.id);
+			return a && a.update(i), {
+				...t,
+				entity: i
 			};
-			return v((t) => t.map((t) => {
-				let n = { ...t.entity };
-				n[e] = void 0;
-				let i = applyEntityConfig(n, r), a = y.current.get(t.entity.id);
-				return a && a.update(i), {
-					...t,
-					entity: i
-				};
-			})), r;
-		});
-	}, []), Oe = useCallback((t, n) => {
+		}));
+	}, [v, i]), ke = useCallback((t, n) => {
 		if (!e) return;
 		let [r, i] = t, [a, o] = n, s = [
 			[Math.min(r, a), Math.max(i, o)],
@@ -3591,7 +3600,7 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: i = "", sty
 		});
 		let l = e.getSource(`${PREVIEW_PREFIX}rect-preview-measure-source`);
 		if (l) {
-			let e = k.current, t = [], n = s[0], r = s[1], i = s[2];
+			let e = M.current, t = [], n = s[0], r = s[1], i = s[2];
 			if (e?.showArea) {
 				let e = distance(n, r), a = distance(r, i);
 				t.push({
@@ -3622,7 +3631,7 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: i = "", sty
 				features: t
 			});
 		}
-	}, [e]), ke = useCallback((t, n) => {
+	}, [e]), Ae = useCallback((t, n) => {
 		if (!e) return;
 		let r = calculateDistance(t, n), i = createCirclePolygon(t, r), a = e.getSource(`${PREVIEW_PREFIX}circle-preview-source`);
 		a && a.setData({
@@ -3633,7 +3642,7 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: i = "", sty
 			},
 			properties: {}
 		});
-		let o = k.current, s = [], c = [];
+		let o = M.current, s = [], c = [];
 		if (o?.showArea && s.push({
 			type: "Feature",
 			geometry: {
@@ -3669,7 +3678,7 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: i = "", sty
 			type: "FeatureCollection",
 			features: c
 		});
-	}, [e]), Ae = useCallback((t, n) => {
+	}, [e]), je = useCallback((t, n) => {
 		if (!e) return;
 		let r = calculateDistance(t, n) * 2, i = createSquareCoords(t, r), a = e.getSource(`${PREVIEW_PREFIX}square-preview-source`);
 		a && a.setData({
@@ -3682,7 +3691,7 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: i = "", sty
 		});
 		let o = e.getSource(`${PREVIEW_PREFIX}square-preview-measure-source`);
 		if (o) {
-			let e = k.current, n = [];
+			let e = M.current, n = [];
 			if (e?.showArea && n.push({
 				type: "Feature",
 				geometry: {
@@ -3706,7 +3715,7 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: i = "", sty
 				features: n
 			});
 		}
-	}, [e]), je = useCallback((t, n) => {
+	}, [e]), Me = useCallback((t, n) => {
 		if (!e) return;
 		let r = [...t, n], i = e.getSource(`${PREVIEW_PREFIX}polygon-preview-source`);
 		i && (r.length >= 3 ? i.setData({
@@ -3741,7 +3750,7 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: i = "", sty
 		});
 		let o = e.getSource(`${PREVIEW_PREFIX}polygon-preview-measure-source`);
 		if (o) {
-			let e = k.current, t = [];
+			let e = M.current, t = [];
 			if (e?.showArea && r.length >= 3) {
 				let e = polygonArea([...r, r[0]]), n = 0, i = 0;
 				for (let e of r) n += e[0], i += e[1];
@@ -3783,7 +3792,7 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: i = "", sty
 				features: t
 			});
 		}
-	}, [e]), Me = useCallback((t, n) => {
+	}, [e]), N = useCallback((t, n) => {
 		if (!e) return;
 		let r = [...t, n], i = e.getSource(`${PREVIEW_PREFIX}polyline-preview-source`);
 		i && (r.length >= 2 ? i.setData({
@@ -3811,7 +3820,7 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: i = "", sty
 		});
 		let o = e.getSource(`${PREVIEW_PREFIX}polyline-preview-measure-source`);
 		if (o) {
-			let e = k.current, t = [];
+			let e = M.current, t = [];
 			if (e?.showLength && r.length >= 2) for (let e = 0; e < r.length - 1; e++) {
 				let n = r[e], i = r[e + 1];
 				t.push({
@@ -3830,118 +3839,118 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: i = "", sty
 		}
 	}, [e]);
 	useEffect(() => {
-		if (!e || !u) return;
-		Se(), e.getCanvas().style.cursor = "crosshair";
+		if (!e || !d) return;
+		Ce(), e.getCanvas().style.cursor = "crosshair";
 		let t = (t) => {
-			let n = [t.lngLat.lng, t.lngLat.lat], r = A.current;
+			let n = [t.lngLat.lng, t.lngLat.lat], r = be.current;
 			if (r === "rectangle") {
-				let t = C.current;
-				if (!t) C.current = n;
+				let t = D.current;
+				if (!t) D.current = n;
 				else {
 					let r = {
-						id: j(),
+						id: xe(),
 						type: "rectangle",
 						bounds: [t, n]
 					};
-					Ce(r), C.current = null, clearAllPreviewSources(e), d(null);
+					we(r), D.current = null, clearAllPreviewSources(e), f(null);
 				}
 			} else if (r === "circle") {
-				let t = T.current;
-				if (!t) T.current = { center: n };
+				let t = O.current;
+				if (!t) O.current = { center: n };
 				else {
 					let r = calculateDistance(t.center, n), i = {
-						id: j(),
+						id: xe(),
 						type: "circle",
 						center: t.center,
 						radius: r
 					};
-					Ce(i), T.current = null, clearAllPreviewSources(e), d(null);
+					we(i), O.current = null, clearAllPreviewSources(e), f(null);
 				}
 			} else if (r === "square") {
-				let t = E.current;
-				if (!t) E.current = { center: n };
+				let t = k.current;
+				if (!t) k.current = { center: n };
 				else {
 					let r = calculateDistance(t.center, n) * 2, i = {
-						id: j(),
+						id: xe(),
 						type: "square",
 						center: t.center,
 						length: r
 					};
-					Ce(i), E.current = null, clearAllPreviewSources(e), d(null);
+					we(i), k.current = null, clearAllPreviewSources(e), f(null);
 				}
 			} else if (r === "polygon") {
-				let t = D.current;
+				let t = A.current;
 				if (t.length >= 3 && calculateDistance(t[0], n) < 20) {
 					let n = {
-						id: j(),
+						id: xe(),
 						type: "polygon",
 						coordinates: [...t]
 					};
-					Ce(n), D.current = [], clearAllPreviewSources(e), d(null);
+					we(n), A.current = [], clearAllPreviewSources(e), f(null);
 					return;
 				}
-				D.current = [...t, n];
-			} else r === "polyline" && (O.current = [...O.current, n]);
+				A.current = [...t, n];
+			} else r === "polyline" && (j.current = [...j.current, n]);
 		}, n = (e) => {
-			let t = [e.lngLat.lng, e.lngLat.lat], n = A.current;
-			if (n === "rectangle" && C.current) Oe(C.current, t);
-			else if (n === "circle" && T.current) ke(T.current.center, t);
-			else if (n === "square" && E.current) Ae(E.current.center, t);
+			let t = [e.lngLat.lng, e.lngLat.lat], n = be.current;
+			if (n === "rectangle" && D.current) ke(D.current, t);
+			else if (n === "circle" && O.current) Ae(O.current.center, t);
+			else if (n === "square" && k.current) je(k.current.center, t);
 			else if (n === "polygon") {
-				let e = D.current;
-				e.length > 0 && je(e, t);
-			} else if (n === "polyline") {
-				let e = O.current;
+				let e = A.current;
 				e.length > 0 && Me(e, t);
+			} else if (n === "polyline") {
+				let e = j.current;
+				e.length > 0 && N(e, t);
 			}
 		}, r = (t) => {
 			t.preventDefault();
-			let n = A.current;
+			let n = be.current;
 			if (n === "polygon") {
-				let t = D.current;
+				let t = A.current;
 				if (t.length >= 3) {
 					let n = {
-						id: j(),
+						id: xe(),
 						type: "polygon",
 						coordinates: [...t]
 					};
-					Ce(n), D.current = [], clearAllPreviewSources(e), d(null);
-				} else D.current = [], clearAllPreviewSources(e);
+					we(n), A.current = [], clearAllPreviewSources(e), f(null);
+				} else A.current = [], clearAllPreviewSources(e);
 			} else if (n === "polyline") {
-				let t = O.current;
+				let t = j.current;
 				if (t.length >= 2) {
 					let n = {
-						id: j(),
+						id: xe(),
 						type: "polyline",
 						coordinates: [...t]
 					};
-					Ce(n), O.current = [], clearAllPreviewSources(e), d(null);
-				} else O.current = [], clearAllPreviewSources(e);
+					we(n), j.current = [], clearAllPreviewSources(e), f(null);
+				} else j.current = [], clearAllPreviewSources(e);
 			}
 		}, i = (t) => {
-			t.key === "Escape" && (C.current = null, T.current = null, E.current = null, D.current = [], O.current = [], clearAllPreviewSources(e), d(null));
+			t.key === "Escape" && (D.current = null, O.current = null, k.current = null, A.current = [], j.current = [], clearAllPreviewSources(e), f(null));
 		}, a = (t) => {
 			t.preventDefault();
-			let n = A.current;
+			let n = be.current;
 			if (n === "polygon") {
-				let t = D.current;
+				let t = A.current;
 				if (t.length >= 3) {
 					let n = {
-						id: j(),
+						id: xe(),
 						type: "polygon",
 						coordinates: [...t]
 					};
-					Ce(n), D.current = [], clearAllPreviewSources(e), d(null);
+					we(n), A.current = [], clearAllPreviewSources(e), f(null);
 				}
 			} else if (n === "polyline") {
-				let t = O.current;
+				let t = j.current;
 				if (t.length >= 2) {
 					let n = {
-						id: j(),
+						id: xe(),
 						type: "polyline",
 						coordinates: [...t]
 					};
-					Ce(n), O.current = [], clearAllPreviewSources(e), d(null);
+					we(n), j.current = [], clearAllPreviewSources(e), f(null);
 				}
 			}
 		};
@@ -3950,28 +3959,28 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: i = "", sty
 		};
 	}, [
 		e,
-		u,
-		j,
+		d,
+		xe,
+		we,
 		Ce,
-		Se,
-		Oe,
 		ke,
 		Ae,
 		je,
-		Me
+		Me,
+		N
 	]), useEffect(() => () => {
-		y.current.forEach((e) => e.destroy()), y.current.clear();
+		S.current.forEach((e) => e.destroy()), S.current.clear();
 	}, []);
 	let Ne = useCallback((t) => {
-		d((e) => e === t ? null : t), C.current = null, T.current = null, E.current = null, D.current = [], O.current = [], e && clearAllPreviewSources(e);
+		f((e) => e === t ? null : t), D.current = null, O.current = null, k.current = null, A.current = [], j.current = [], e && clearAllPreviewSources(e);
 	}, [e]);
 	return e ? /* @__PURE__ */ jsxs("div", {
-		className: `mapbox-measure-control ${i}`,
-		style: s,
+		className: `mapbox-measure-control ${s}`,
+		style: c,
 		children: [/* @__PURE__ */ jsxs("button", {
-			ref: S,
-			className: `mapbox-control-btn mapbox-measure-control__btn ${c ? "mapbox-measure-control__btn--active" : ""}`,
-			onClick: () => l(!c),
+			ref: E,
+			className: `mapbox-control-btn mapbox-measure-control__btn ${l ? "mapbox-measure-control__btn--active" : ""}`,
+			onClick: () => u(!l),
 			title: "测量",
 			children: [
 				/* @__PURE__ */ jsx("img", {
@@ -3980,14 +3989,14 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: i = "", sty
 					className: "mapbox-measure-control__btn-icon"
 				}),
 				/* @__PURE__ */ jsx("span", { children: "测量" }),
-				_.length > 0 && /* @__PURE__ */ jsxs("span", { children: [
+				b.length > 0 && /* @__PURE__ */ jsxs("span", { children: [
 					"(",
-					_.length,
+					b.length,
 					")"
 				] })
 			]
-		}), c && /* @__PURE__ */ jsxs("div", {
-			ref: x,
+		}), l && /* @__PURE__ */ jsxs("div", {
+			ref: T,
 			className: "mapbox-measure-control__panel",
 			children: [
 				/* @__PURE__ */ jsx("div", {
@@ -3998,18 +4007,18 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: i = "", sty
 					className: "mapbox-measure-control__settings",
 					children: [
 						/* @__PURE__ */ jsx(Checkbox, {
-							checked: f.showArea,
-							onChange: (e) => De("showArea", e),
+							checked: y.showArea,
+							onChange: (e) => Oe("showArea", e),
 							children: "面积"
 						}),
 						/* @__PURE__ */ jsx(Checkbox, {
-							checked: f.showLength,
-							onChange: (e) => De("showLength", e),
+							checked: y.showLength,
+							onChange: (e) => Oe("showLength", e),
 							children: "长度"
 						}),
 						/* @__PURE__ */ jsx(Checkbox, {
-							checked: f.showRadius,
-							onChange: (e) => De("showRadius", e),
+							checked: y.showRadius,
+							onChange: (e) => Oe("showRadius", e),
 							children: "半径"
 						})
 					]
@@ -4021,16 +4030,16 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: i = "", sty
 				/* @__PURE__ */ jsxs("div", {
 					className: "mapbox-measure-control__tools",
 					children: [DRAW_TOOLS.map((e) => /* @__PURE__ */ jsx("button", {
-						className: `mapbox-measure-control__tool-btn ${u === e.mode ? "mapbox-measure-control__tool-btn--active" : ""}`,
+						className: `mapbox-measure-control__tool-btn ${d === e.mode ? "mapbox-measure-control__tool-btn--active" : ""}`,
 						onClick: () => Ne(e.mode),
 						title: e.label,
 						children: /* @__PURE__ */ jsx("img", {
 							src: e.icon,
 							alt: e.label
 						})
-					}, e.mode)), _.length > 0 && /* @__PURE__ */ jsx("button", {
+					}, e.mode)), b.length > 0 && /* @__PURE__ */ jsx("button", {
 						className: "mapbox-measure-control__tool-btn mapbox-measure-control__tool-btn--danger",
-						onClick: Te,
+						onClick: Ee,
 						title: "清除全部",
 						children: /* @__PURE__ */ jsx("img", {
 							src: "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20t='1769394652565'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='6483'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='128'%20height='128'%3e%3cpath%20d='M841.385637%20288.639098a36.479886%2036.479886%200%200%201%2072.74644%207.679976l6.613312%20629.544699A109.866323%20109.866323%200%200%201%20810.665733%201023.9968H222.507571a109.652991%20109.652991%200%200%201-109.012992-98.133027l-3.626656-629.544699a36.479886%2036.479886%200%200%201%2072.74644-7.679976L186.241018%20917.330467a36.479886%2036.479886%200%200%200%2036.266553%2032.639898H810.665733A36.479886%2036.479886%200%200%200%20847.99895%20917.330467z%20m-219.732646%20113.706311a36.479886%2036.479886%200%200%201%2036.693218%2036.479886v255.9992a36.693219%2036.693219%200%201%201-73.173104%200v-255.9992a36.479886%2036.479886%200%200%201%2036.479886-36.479886z%20m-219.305982%200a36.479886%2036.479886%200%200%201%2036.479886%2036.479886v255.9992a36.693219%2036.693219%200%201%201-73.173104%200v-255.9992a36.479886%2036.479886%200%200%201%2036.693218-36.479886z%20m-36.693218-255.9992h292.692418V91.519714a18.346609%2018.346609%200%200%200-18.346609-18.346609H384.0004a18.346609%2018.346609%200%200%200-18.346609%2018.346609z%20m-73.173105%200V73.173105A73.173105%2073.173105%200%200%201%20365.653791%200h292.692418a73.386437%2073.386437%200%200%201%2073.173105%2073.173105v73.173104h255.9992a36.693219%2036.693219%200%200%201%200%2073.173105H36.481486a36.693219%2036.693219%200%200%201%200-73.173105z'%20fill='%23EB6865'%20p-id='6484'%3e%3c/path%3e%3c/svg%3e",
@@ -4038,7 +4047,7 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: i = "", sty
 						})
 					})]
 				}),
-				_.length > 0 ? /* @__PURE__ */ jsx("div", {
+				b.length > 0 ? /* @__PURE__ */ jsx("div", {
 					className: "mapbox-measure-control__list",
 					children: /* @__PURE__ */ jsxs("table", {
 						className: "mapbox-measure-control__table",
@@ -4048,9 +4057,9 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: i = "", sty
 							/* @__PURE__ */ jsx("th", { children: "面积" }),
 							/* @__PURE__ */ jsx("th", { children: "长度/半径" }),
 							/* @__PURE__ */ jsx("th", {})
-						] }) }), /* @__PURE__ */ jsx("tbody", { children: _.map((e) => /* @__PURE__ */ jsxs("tr", {
+						] }) }), /* @__PURE__ */ jsx("tbody", { children: b.map((e) => /* @__PURE__ */ jsxs("tr", {
 							className: "mapbox-measure-control__table-row",
-							onClick: () => Ee(e.entity.id),
+							onClick: () => De(e.entity.id),
 							children: [
 								/* @__PURE__ */ jsx("td", { children: e.shapeLabel }),
 								/* @__PURE__ */ jsx("td", { children: String(e.entity.id) }),
@@ -4059,7 +4068,7 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: i = "", sty
 								/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("button", {
 									className: "mapbox-measure-control__delete-btn",
 									onClick: (t) => {
-										t.stopPropagation(), we(e.entity.id);
+										t.stopPropagation(), Te(e.entity.id);
 									},
 									title: "删除",
 									children: /* @__PURE__ */ jsx("img", {
@@ -4199,7 +4208,8 @@ function RasterPaintControl({ map: e, value: r, onChange: s, rasterPaintLayerIds
 						max: r,
 						step: i,
 						value: x[e],
-						onChange: (t) => w(e, t)
+						onChange: (t) => w(e, t),
+						tooltipVisible: !1
 					}),
 					/* @__PURE__ */ jsx("span", {
 						className: "mapbox-raster-paint-control__value",
@@ -4243,7 +4253,7 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 	} : {
 		width: e.width || 32,
 		height: e.height || 32
-	}, E = h || t, D = i === "rectangle", O = i === "circle", be = i === "polygon", xe = i === "square", k = i === "polyline";
+	}, E = h || t, D = i === "rectangle", O = i === "circle", ve = i === "polygon", ye = i === "square", k = i === "polyline";
 	return /* @__PURE__ */ jsxs("div", {
 		ref: _,
 		className: "mapbox-edit-control",
@@ -4265,7 +4275,7 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 					}), /* @__PURE__ */ jsx("span", { children: t ? t.name : "Marker" })]
 				}),
 				d && /* @__PURE__ */ jsxs("button", {
-					className: `mapbox-control-btn ${xe ? "mapbox-control-btn--active" : ""}`,
+					className: `mapbox-control-btn ${ye ? "mapbox-control-btn--active" : ""}`,
 					onClick: S,
 					title: "绘制正方形",
 					children: [/* @__PURE__ */ jsx("img", {
@@ -4295,7 +4305,7 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 					}), /* @__PURE__ */ jsx("span", { children: "圆形" })]
 				}),
 				u && /* @__PURE__ */ jsxs("button", {
-					className: `mapbox-control-btn ${be ? "mapbox-control-btn--active" : ""}`,
+					className: `mapbox-control-btn ${ve ? "mapbox-control-btn--active" : ""}`,
 					onClick: x,
 					title: "绘制多边形",
 					children: [/* @__PURE__ */ jsx("img", {
@@ -4540,11 +4550,11 @@ function adjustPopupForBounds(e, t) {
 	return r.x + t.width + 10 > n.width && (r.x = n.width - t.width - 10), r.x < 10 && (r.x = 10), r.y + t.height + 10 > n.height && (r.y = n.height - t.height - 10), r.y < 10 && (r.y = 10), r;
 }
 const Mapbox = forwardRef((e, c) => {
-	let { center: l = [116.4074, 39.9042], zoom: u = 12, pitch: d = 0, bearing: f = 0, style: h = "mapbox://styles/mapbox/dark-v11", maxBounds: g, mode: _ = "display", editConfig: v = {}, pickerConfig: y = {}, onPick: b, interactive: x = {}, layers: S = [], rasterPaint: C, entities: T = [], selectedIds: E = [], entityConfig: D, nameConfig: O, selectNameConfig: k, areaConfig: A, circleConfig: j, lengthConfig: M, showCoordinates: Se = !0, showScale: we = !0, showResetView: Oe = !0, showRoadHighlight: ke = !1, showMeasure: Ae = !1, showRasterPaint: Me = !1, onRasterPaintChange: Ne, popupDefaults: N, renderPopup: Pe, onMapLoad: Fe, onEntityClick: Ie, onPopupOpen: Le, onPopupClose: Re, className: ze = "", containerStyle: Be } = e, Ve = useRef(null), P = useRef(null), F = useRef(/* @__PURE__ */ new Map()), I = useRef(/* @__PURE__ */ new Map()), He = useRef(/* @__PURE__ */ new Set()), [L, Ue] = useState(null), We = useRef(null), Ge = useRef(null), Ke = useRef(null), [qe, Je] = useState(null), Ye = useRef(null), Xe = useRef(null), [Ze, Qe] = useState(null), [R, $e] = useState(_), [et, tt] = useState(null), nt = useRef(null), [rt, z] = useState(null), [it, B] = useState(null), [at, ot] = useState(null), V = useRef(!1), H = useRef(null), U = useRef(null), W = useRef(null), st = useRef(null), G = useRef(null), K = useRef([]), q = useRef(null), ct = useRef(null), J = useRef(null), lt = useRef([]), Y = useRef(null);
+	let { center: l = [116.4074, 39.9042], zoom: u = 12, pitch: d = 0, bearing: f = 0, style: h = "mapbox://styles/mapbox/dark-v11", maxBounds: g, mode: _ = "display", editConfig: v = {}, pickerConfig: y = {}, onPick: b, interactive: x = {}, layers: S = [], rasterPaint: C, entities: T = [], selectedIds: E = [], entityConfig: D, nameConfig: O, selectNameConfig: k, areaConfig: A, circleConfig: j, lengthConfig: M, showCoordinates: be = !0, showScale: Se = !0, showResetView: Ee = !0, showRoadHighlight: De = !1, showMeasure: Oe = !1, showRasterPaint: Ae = !1, onRasterPaintChange: je, popupDefaults: N, renderPopup: Pe, onMapLoad: Fe, onEntityClick: Ie, onPopupOpen: Le, onPopupClose: Re, className: ze = "", containerStyle: Be } = e, Ve = useRef(null), P = useRef(null), F = useRef(/* @__PURE__ */ new Map()), I = useRef(/* @__PURE__ */ new Map()), He = useRef(/* @__PURE__ */ new Set()), [L, Ue] = useState(null), We = useRef(null), Ge = useRef(null), Ke = useRef(null), [qe, Je] = useState(null), Ye = useRef(null), Xe = useRef(null), [Ze, Qe] = useState(null), [R, $e] = useState(_), [et, tt] = useState(null), nt = useRef(null), [rt, z] = useState(null), [it, B] = useState(null), [at, ot] = useState(null), V = useRef(!1), H = useRef(null), U = useRef(null), W = useRef(null), st = useRef(null), G = useRef(null), ct = useRef([]), K = useRef(null), lt = useRef(null), q = useRef(null), ut = useRef([]), J = useRef(null);
 	useEffect(() => {
 		$e(_);
 	}, [_]);
-	let ut = useCallback((e) => {
+	let dt = useCallback((e) => {
 		let t = F.current.get(e), n = I.current.get(e);
 		if (t && n) {
 			if (n.type === "radar" && t instanceof CanvasRadarRenderer) {
@@ -4561,7 +4571,7 @@ const Mapbox = forwardRef((e, c) => {
 				I.current.set(e, r), t.startAnimation();
 			}
 		}
-	}, []), dt = useCallback((e) => {
+	}, []), ft = useCallback((e) => {
 		let t = F.current.get(e), n = I.current.get(e);
 		if (t && n) {
 			if (n.type === "radar" && t instanceof CanvasRadarRenderer) {
@@ -4578,10 +4588,10 @@ const Mapbox = forwardRef((e, c) => {
 				I.current.set(e, r), t.stopAnimation();
 			}
 		}
-	}, []), ft = useCallback((e) => {
+	}, []), pt = useCallback((e) => {
 		let t = I.current.get(e);
-		t && (t.type === "radar" || t.type === "circle") && (t.type, t.isAnimating ? dt(e) : ut(e));
-	}, [ut, dt]), pt = useCallback((e) => {
+		t && (t.type === "radar" || t.type === "circle") && (t.type, t.isAnimating ? ft(e) : dt(e));
+	}, [dt, ft]), mt = useCallback((e) => {
 		if (e === void 0) {
 			let e = !1;
 			for (let [, t] of F.current) if (t instanceof UnitRenderer) {
@@ -4597,7 +4607,7 @@ const Mapbox = forwardRef((e, c) => {
 			let t = new Set(e.map(String));
 			for (let [e, n] of F.current) n instanceof UnitRenderer && n.setShowTrajectory(t.has(String(e)) ? "all" : 0);
 		}
-	}, []), mt = useCallback((e, t, n) => {
+	}, []), ht = useCallback((e, t, n) => {
 		let r = T.find((t) => String(t.id) === String(e));
 		if (!r?.popup || !P.current) return;
 		let i = r.popup.content ?? Pe?.(r);
@@ -4615,18 +4625,18 @@ const Mapbox = forwardRef((e, c) => {
 		N,
 		Pe,
 		Le
-	]), ht = useCallback((e) => {
+	]), gt = useCallback((e) => {
 		L?.entityId === e && (Ue(null), Re?.(e));
-	}, [L, Re]), gt = useCallback(() => {
+	}, [L, Re]), _t = useCallback(() => {
 		Ue((e) => (e && Re?.(e.entityId), null));
-	}, [Re]), _t = useCallback((e) => L?.entityId === e, [L]), vt = useCallback((e, t, n) => {
+	}, [Re]), vt = useCallback((e) => L?.entityId === e, [L]), yt = useCallback((e, t, n) => {
 		let r = P.current;
 		r && r.flyTo({
 			center: e,
 			zoom: t ?? r.getZoom(),
 			...n
 		});
-	}, []), yt = useCallback((e, t, n) => {
+	}, []), bt = useCallback((e, t, n) => {
 		let r = P.current;
 		if (!r || e.length === 0) return;
 		let i = [];
@@ -4653,7 +4663,7 @@ const Mapbox = forwardRef((e, c) => {
 			pitch: n?.pitch ?? r.getPitch()
 		};
 		t !== void 0 && (p.maxZoom = t), n?.essential !== void 0 && (p.essential = n.essential), r.fitBounds(f, p);
-	}, []), bt = useCallback((e) => {
+	}, []), xt = useCallback((e) => {
 		let t = P.current;
 		if (!t || !t.getContainer()) return;
 		let { showMarker: n = !0, markerColor: r = "#3388ff" } = y;
@@ -4671,62 +4681,68 @@ const Mapbox = forwardRef((e, c) => {
 				anchor: "bottom"
 			}).setLngLat(e).addTo(t);
 		}
-	}, [y]), xt = useCallback(() => {
+	}, [y]), St = useCallback(() => {
 		nt.current &&= (nt.current.remove(), null);
-	}, []), St = useCallback(() => `marker-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`, []), Ct = useCallback((e) => {
+	}, []), Ct = useCallback(() => `marker-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`, []), wt = useCallback((e) => {
 		let t = P.current;
-		if (Ve.current) if (Y.current &&= (Y.current.remove(), null), e && t) {
+		if (Ve.current) if (J.current &&= (J.current.remove(), null), e && t) {
 			t.getCanvas().style.cursor = "none";
 			let n = document.createElement("div");
 			n.className = "mapbox-custom-cursor";
 			let r = e.size || e.width || 32;
 			n.style.cssText = "\n				position: fixed;\n				pointer-events: none;\n				z-index: 9999;\n				transform: translate(-50%, -50%);\n				opacity: 0.8;\n			";
 			let i = document.createElement("img");
-			i.src = e.icon, i.style.width = `${r}px`, i.style.height = `${e.size || e.height || r}px`, i.style.objectFit = "contain", n.appendChild(i), document.body.appendChild(n), Y.current = n;
+			i.src = e.icon, i.style.width = `${r}px`, i.style.height = `${e.size || e.height || r}px`, i.style.objectFit = "contain", n.appendChild(i), document.body.appendChild(n), J.current = n;
 			let a = (e) => {
-				Y.current && (Y.current.style.left = `${e.clientX}px`, Y.current.style.top = `${e.clientY}px`);
+				J.current && (J.current.style.left = `${e.clientX}px`, J.current.style.top = `${e.clientY}px`);
 			};
 			document.addEventListener("mousemove", a), n.dataset.cleanup = "true", n._cleanup = () => {
 				document.removeEventListener("mousemove", a);
 			};
 		} else t && (t.getCanvas().style.cursor = "");
-	}, []), X = useCallback(() => {
-		if (Y.current) {
-			let e = Y.current._cleanup;
-			e && e(), Y.current.remove(), Y.current = null;
+	}, []), Y = useCallback(() => {
+		if (J.current) {
+			let e = J.current._cleanup;
+			e && e(), J.current.remove(), J.current = null;
 		}
 		let e = P.current;
 		e && (e.getCanvas().style.cursor = "");
-	}, []), wt = useCallback((e, t, n) => {
-		e.getSource(t) || (e.addSource(t, {
-			type: "geojson",
-			data: {
-				type: "FeatureCollection",
-				features: []
-			}
-		}), e.addLayer({
-			id: n,
-			type: "symbol",
-			source: t,
-			filter: [
-				"==",
-				"$type",
-				"Point"
-			],
-			layout: {
-				"text-field": ["get", "label"],
-				"text-size": 12,
-				"text-font": ["Open Sans Bold", "Arial Unicode MS Bold"],
-				"text-allow-overlap": !0,
-				"text-rotation-alignment": "map",
-				"text-offset": [0, -.8]
-			},
-			paint: {
-				"text-color": "#ffffff",
-				"text-halo-color": "rgba(0, 0, 0, 0.8)",
-				"text-halo-width": 1
+	}, []), X = useCallback((e, t, n) => {
+		if (!e.getSource(t)) {
+			if (!e.getStyle().glyphs) {
+				let t = e.style, n = "/gis-fonts/{fontstack}/{range}.pbf";
+				t.glyphs = n, t.stylesheet && (t.stylesheet.glyphs = n);
 			}
-		}));
+			e.addSource(t, {
+				type: "geojson",
+				data: {
+					type: "FeatureCollection",
+					features: []
+				}
+			}), e.addLayer({
+				id: n,
+				type: "symbol",
+				source: t,
+				filter: [
+					"==",
+					"$type",
+					"Point"
+				],
+				layout: {
+					"text-field": ["get", "label"],
+					"text-size": 12,
+					"text-font": ["Open Sans Bold", "Arial Unicode MS Bold"],
+					"text-allow-overlap": !0,
+					"text-rotation-alignment": "map",
+					"text-offset": [0, -.8]
+				},
+				paint: {
+					"text-color": "#ffffff",
+					"text-halo-color": "rgba(0, 0, 0, 0.8)",
+					"text-halo-width": 1
+				}
+			});
+		}
 	}, []), Tt = useCallback(() => {
 		let e = P.current;
 		e && (e.getSource("rect-preview-source") || (e.addSource("rect-preview-source", {
@@ -4752,8 +4768,8 @@ const Mapbox = forwardRef((e, c) => {
 				"line-width": 2,
 				"line-dasharray": [4, 4]
 			}
-		}), wt(e, "rect-preview-measure-source", "rect-preview-measure-label")));
-	}, [wt]), Et = useCallback((e, t) => {
+		}), X(e, "rect-preview-measure-source", "rect-preview-measure-label")));
+	}, [X]), Et = useCallback((e, t) => {
 		let n = P.current;
 		if (!n) return;
 		let r = n.getSource("rect-preview-source");
@@ -4854,7 +4870,7 @@ const Mapbox = forwardRef((e, c) => {
 				"line-width": 2,
 				"line-dasharray": [4, 4]
 			}
-		}), wt(e, "circle-preview-measure-source", "circle-preview-measure-label"), e.getSource("circle-preview-radius-source") || (e.addSource("circle-preview-radius-source", {
+		}), X(e, "circle-preview-measure-source", "circle-preview-measure-label"), e.getSource("circle-preview-radius-source") || (e.addSource("circle-preview-radius-source", {
 			type: "geojson",
 			data: {
 				type: "FeatureCollection",
@@ -4871,7 +4887,7 @@ const Mapbox = forwardRef((e, c) => {
 				"line-dasharray": [4, 4]
 			}
 		}))));
-	}, [wt]), kt = useCallback((e, t, n = 64) => {
+	}, [X]), kt = useCallback((e, t, n = 64) => {
 		let [r, i] = e, a = [], o = t / 6371e3, s = i * Math.PI / 180;
 		for (let e = 0; e <= n; e++) {
 			let t = e / n * 2 * Math.PI, c = o * Math.cos(t), l = o * Math.sin(t) / Math.cos(s), u = i + c * 180 / Math.PI, d = r + l * 180 / Math.PI;
@@ -4998,8 +5014,8 @@ const Mapbox = forwardRef((e, c) => {
 				"circle-stroke-color": "#ffffff",
 				"circle-stroke-width": 2
 			}
-		}), wt(e, "polygon-preview-measure-source", "polygon-preview-measure-label")));
-	}, [wt]), Ft = useCallback((e, t) => {
+		}), X(e, "polygon-preview-measure-source", "polygon-preview-measure-label")));
+	}, [X]), Ft = useCallback((e, t) => {
 		let n = P.current;
 		if (!n) return;
 		let r = n.getSource("polygon-preview-source"), i = n.getSource("polygon-vertices-source");
@@ -5102,7 +5118,7 @@ const Mapbox = forwardRef((e, c) => {
 			features: []
 		});
 	}, []), Lt = useCallback(() => {
-		K.current = [], It();
+		ct.current = [], It();
 	}, [It]), Rt = useCallback(() => {
 		let e = P.current;
 		e && (e.getSource("square-preview-source") || (e.addSource("square-preview-source", {
@@ -5128,8 +5144,8 @@ const Mapbox = forwardRef((e, c) => {
 				"line-width": 2,
 				"line-dasharray": [4, 4]
 			}
-		}), wt(e, "square-preview-measure-source", "square-preview-measure-label")));
-	}, [wt]), zt = useCallback((e, t) => {
+		}), X(e, "square-preview-measure-source", "square-preview-measure-label")));
+	}, [X]), zt = useCallback((e, t) => {
 		let [n, r] = e, i = t / 2 / 6371e3, a = r * Math.PI / 180, o = i * 180 / Math.PI, s = i * 180 / Math.PI / Math.cos(a);
 		return [
 			[n - s, r + o],
@@ -5152,7 +5168,7 @@ const Mapbox = forwardRef((e, c) => {
 			},
 			properties: {}
 		});
-		let o = q.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2, l = o?.fillColor ?? "#3388ff", u = o?.fillOpacity ?? .1;
+		let o = K.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2, l = o?.fillColor ?? "#3388ff", u = o?.fillOpacity ?? .1;
 		n.getLayer("square-preview-line") && (n.setPaintProperty("square-preview-line", "line-color", s), n.setPaintProperty("square-preview-line", "line-width", c)), n.getLayer("square-preview-fill") && (n.setPaintProperty("square-preview-fill", "fill-color", l), n.setPaintProperty("square-preview-fill", "fill-opacity", u));
 		let d = n.getSource("square-preview-measure-source");
 		if (d) {
@@ -5194,7 +5210,7 @@ const Mapbox = forwardRef((e, c) => {
 			features: []
 		});
 	}, []), Ht = useCallback(() => {
-		ct.current = null, Vt();
+		lt.current = null, Vt();
 	}, [Vt]), Ut = useCallback(() => {
 		let e = P.current;
 		e && (e.getSource("polyline-preview-source") || (e.addSource("polyline-preview-source", {
@@ -5228,8 +5244,8 @@ const Mapbox = forwardRef((e, c) => {
 				"circle-stroke-color": "#ffffff",
 				"circle-stroke-width": 2
 			}
-		}), wt(e, "polyline-preview-measure-source", "polyline-preview-measure-label")));
-	}, [wt]), Wt = useCallback((e, t) => {
+		}), X(e, "polyline-preview-measure-source", "polyline-preview-measure-label")));
+	}, [X]), Wt = useCallback((e, t) => {
 		let n = P.current;
 		if (!n) return;
 		let r = n.getSource("polyline-preview-source"), i = n.getSource("polyline-vertices-source");
@@ -5256,7 +5272,7 @@ const Mapbox = forwardRef((e, c) => {
 				properties: {}
 			}))
 		});
-		let o = J.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2;
+		let o = q.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2;
 		n.getLayer("polyline-preview-line") && (n.setPaintProperty("polyline-preview-line", "line-color", s), n.setPaintProperty("polyline-preview-line", "line-width", c)), n.getLayer("polyline-vertices") && n.setPaintProperty("polyline-vertices", "circle-color", s);
 		let l = n.getSource("polyline-preview-measure-source");
 		if (l) {
@@ -5296,11 +5312,11 @@ const Mapbox = forwardRef((e, c) => {
 			features: []
 		});
 	}, []), Q = useCallback(() => {
-		lt.current = [], Gt();
+		ut.current = [], Gt();
 	}, [Gt]), Kt = useCallback((e) => {
-		z(e), Ct(e), e ? (B("marker"), Z(), Nt(), Lt(), Ht(), Q()) : B(null);
+		z(e), wt(e), e ? (B("marker"), Z(), Nt(), Lt(), Ht(), Q()) : B(null);
 	}, [
-		Ct,
+		wt,
 		Z,
 		Nt,
 		Lt,
@@ -5308,103 +5324,102 @@ const Mapbox = forwardRef((e, c) => {
 		Q
 	]), qt = useCallback((e) => {
 		if (B(e), e === "rectangle") {
-			z(null), X(), Nt(), Lt(), Ht(), Q();
+			z(null), Y(), Nt(), Lt(), Ht(), Q();
 			let e = P.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "circle") {
-			z(null), X(), Z(), Lt(), Ht(), Q();
+			z(null), Y(), Z(), Lt(), Ht(), Q();
 			let e = P.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "polygon") {
-			z(null), X(), Z(), Nt(), Ht(), Q();
+			z(null), Y(), Z(), Nt(), Ht(), Q();
 			let e = P.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "square") {
-			z(null), X(), Z(), Nt(), Lt(), Q();
+			z(null), Y(), Z(), Nt(), Lt(), Q();
 			let e = P.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "polyline") {
-			z(null), X(), Z(), Nt(), Lt(), Ht();
+			z(null), Y(), Z(), Nt(), Lt(), Ht();
 			let e = P.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
-		} else e === "marker" ? (Z(), Nt(), Lt(), Ht(), Q()) : (z(null), X(), Z(), Nt(), Lt(), Ht(), Q());
+		} else e === "marker" ? (Z(), Nt(), Lt(), Ht(), Q()) : (z(null), Y(), Z(), Nt(), Lt(), Ht(), Q());
 	}, [
-		X,
+		Y,
 		Z,
 		Nt,
 		Lt,
 		Ht,
 		Q
 	]), Jt = useCallback((e) => {
-		e !== "picker" && (xt(), tt(null)), e !== "edit" && (z(null), B(null), Z(), Q(), X()), $e(e);
+		e !== "picker" && (St(), tt(null)), e !== "edit" && (z(null), B(null), Z(), Q(), Y()), $e(e);
 	}, [
-		xt,
-		X,
+		St,
+		Y,
 		Z,
 		Q
 	]), Yt = useCallback(() => R, [R]), Xt = useCallback(() => et, [et]), Zt = useCallback(() => {
-		xt(), tt(null);
-	}, [xt]);
+		St(), tt(null);
+	}, [St]);
 	useEffect(() => {
-		if (!Ze || R !== "picker") return;
+		if (!Ze) return;
 		let e = y.value;
-		if (e) {
+		if (e && isFinite(e.lng) && isFinite(e.lat)) {
 			let t = [e.lng, e.lat];
-			tt(e), bt(t);
+			tt(e), xt(t);
 		}
 	}, [
 		y.value,
-		R,
-		bt,
+		xt,
 		Ze
 	]);
 	let Qt = (e) => "mode" in e, $t = useCallback((e) => {
-		if ($e("edit"), xt(), tt(null), V.current = !0, Qt(e)) {
-			if (e.mode === "marker") e.markerStyle ? (U.current = e.markerStyle, H.current = null, W.current = null, G.current = null, q.current = null, J.current = null, z(null), B("marker"), e.markerStyle.src && e.markerStyle.width ? Ct({
+		if ($e("edit"), St(), tt(null), V.current = !0, Qt(e)) {
+			if (e.mode === "marker") e.markerStyle ? (U.current = e.markerStyle, H.current = null, W.current = null, G.current = null, K.current = null, q.current = null, z(null), B("marker"), e.markerStyle.src && e.markerStyle.width ? wt({
 				id: "custom",
 				name: e.markerStyle.name || "Marker",
 				icon: e.markerStyle.src,
 				width: e.markerStyle.width
-			}) : X()) : e.template && (U.current = null, H.current = null, W.current = null, G.current = null, q.current = null, J.current = null, z(e.template), B("marker"), Ct(e.template));
+			}) : Y()) : e.template && (U.current = null, H.current = null, W.current = null, G.current = null, K.current = null, q.current = null, z(e.template), B("marker"), wt(e.template));
 			else if (e.mode === "rectangle") {
-				H.current = e.rectangleStyle || null, U.current = null, W.current = null, G.current = null, q.current = null, J.current = null, z(null), B("rectangle"), X();
+				H.current = e.rectangleStyle || null, U.current = null, W.current = null, G.current = null, K.current = null, q.current = null, z(null), B("rectangle"), Y();
 				let t = P.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			} else if (e.mode === "circle") {
-				W.current = e.circleStyle || null, H.current = null, U.current = null, G.current = null, q.current = null, J.current = null, z(null), B("circle"), X();
+				W.current = e.circleStyle || null, H.current = null, U.current = null, G.current = null, K.current = null, q.current = null, z(null), B("circle"), Y();
 				let t = P.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			} else if (e.mode === "polygon") {
-				G.current = e.polygonStyle || null, H.current = null, U.current = null, W.current = null, q.current = null, J.current = null, z(null), B("polygon"), X();
+				G.current = e.polygonStyle || null, H.current = null, U.current = null, W.current = null, K.current = null, q.current = null, z(null), B("polygon"), Y();
 				let t = P.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			} else if (e.mode === "square") {
-				q.current = e.squareStyle || null, H.current = null, U.current = null, W.current = null, G.current = null, J.current = null, z(null), B("square"), X();
+				K.current = e.squareStyle || null, H.current = null, U.current = null, W.current = null, G.current = null, q.current = null, z(null), B("square"), Y();
 				let t = P.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			} else if (e.mode === "polyline") {
-				J.current = e.polylineStyle || null, H.current = null, U.current = null, W.current = null, G.current = null, q.current = null, z(null), B("polyline"), X();
+				q.current = e.polylineStyle || null, H.current = null, U.current = null, W.current = null, G.current = null, K.current = null, z(null), B("polyline"), Y();
 				let t = P.current;
 				t && (t.getCanvas().style.cursor = "crosshair");
 			}
-		} else z(e), B("marker"), Ct(e), H.current = null, U.current = null, W.current = null, G.current = null, q.current = null, J.current = null;
+		} else z(e), B("marker"), wt(e), H.current = null, U.current = null, W.current = null, G.current = null, K.current = null, q.current = null;
 	}, [
-		xt,
-		Ct,
-		X
+		St,
+		wt,
+		Y
 	]);
 	useImperativeHandle(c, () => ({
-		startAnimation: ut,
-		stopAnimation: dt,
-		toggleAnimation: ft,
+		startAnimation: dt,
+		stopAnimation: ft,
+		toggleAnimation: pt,
 		getMap: () => P.current,
-		openPopup: (e) => mt(e, "programmatic"),
-		closePopup: ht,
-		closeAllPopups: gt,
-		isPopupOpen: _t,
-		toggleUnitTrajectory: pt,
-		flyTo: vt,
-		flyToEntities: yt,
+		openPopup: (e) => ht(e, "programmatic"),
+		closePopup: gt,
+		closeAllPopups: _t,
+		isPopupOpen: vt,
+		toggleUnitTrajectory: mt,
+		flyTo: yt,
+		flyToEntities: bt,
 		getMode: Yt,
 		setMode: Jt,
 		getPickedLocation: Xt,
@@ -5412,16 +5427,16 @@ const Mapbox = forwardRef((e, c) => {
 		startDrawing: $t,
 		getRenderer: (e) => F.current.get(e)
 	}), [
-		ut,
 		dt,
 		ft,
-		mt,
+		pt,
 		ht,
 		gt,
 		_t,
-		pt,
 		vt,
+		mt,
 		yt,
+		bt,
 		Yt,
 		Jt,
 		Xt,
@@ -5562,7 +5577,10 @@ const Mapbox = forwardRef((e, c) => {
 					visibility: "none"
 				}), e.addLayer(a, r);
 			}
-			n.glyphs && (e.getStyle().glyphs || (e.style.glyphs = n.glyphs));
+			if (n.glyphs && !e.getStyle().glyphs) {
+				let t = e.style;
+				t.glyphs = n.glyphs, t.stylesheet && (t.stylesheet.glyphs = n.glyphs);
+			}
 		} catch (e) {
 			console.error(`Failed to load Style JSON from ${t.url}:`, e);
 		}
@@ -5627,7 +5645,7 @@ const Mapbox = forwardRef((e, c) => {
 				lng: t[0],
 				lat: t[1]
 			};
-			tt(e), bt(t), bn.current?.(e);
+			tt(e), xt(t), bn.current?.(e);
 			return;
 		}
 		if (r === "edit") {
@@ -5638,7 +5656,7 @@ const Mapbox = forwardRef((e, c) => {
 				else {
 					let n = H.current, r = applyEntityConfig({
 						...n,
-						id: n?.id ?? St(),
+						id: n?.id ?? Ct(),
 						type: "rectangle",
 						bounds: [e, t]
 					}, D);
@@ -5658,7 +5676,7 @@ const Mapbox = forwardRef((e, c) => {
 				else {
 					let n = At(e.center, t), r = W.current, i = applyEntityConfig({
 						...r,
-						id: r?.id ?? St(),
+						id: r?.id ?? Ct(),
 						type: "circle",
 						center: e.center,
 						radius: n
@@ -5674,13 +5692,13 @@ const Mapbox = forwardRef((e, c) => {
 				return;
 			}
 			if (e === "polygon") {
-				let e = K.current;
+				let e = ct.current;
 				if (e.length >= 3) {
 					let n = e[0];
 					if (At(n, t) < 20) {
 						let t = G.current, n = applyEntityConfig({
 							...t,
-							id: t?.id ?? St(),
+							id: t?.id ?? Ct(),
 							type: "polygon",
 							coordinates: [...e]
 						}, D);
@@ -5690,20 +5708,20 @@ const Mapbox = forwardRef((e, c) => {
 							let e = new PolygonRenderer(r, n, O, k, A, M);
 							F.current.set(n.id, e);
 						}
-						wn.current.onPolygonAdd?.(n), K.current = [], G.current = null, V.current && (V.current = !1, B(null), r && (r.getCanvas().style.cursor = ""));
+						wn.current.onPolygonAdd?.(n), ct.current = [], G.current = null, V.current && (V.current = !1, B(null), r && (r.getCanvas().style.cursor = ""));
 						return;
 					}
 				}
-				K.current = [...e, t];
+				ct.current = [...e, t];
 				return;
 			}
 			if (e === "square") {
-				let e = ct.current;
-				if (!e) ct.current = { center: t };
+				let e = lt.current;
+				if (!e) lt.current = { center: t };
 				else {
-					let n = At(e.center, t) * 2, r = q.current, i = applyEntityConfig({
+					let n = At(e.center, t) * 2, r = K.current, i = applyEntityConfig({
 						...r,
-						id: r?.id ?? St(),
+						id: r?.id ?? Ct(),
 						type: "square",
 						center: e.center,
 						length: n
@@ -5714,38 +5732,38 @@ const Mapbox = forwardRef((e, c) => {
 						let e = new SquareRenderer(a, i, O, k, A, M);
 						F.current.set(i.id, e);
 					}
-					wn.current.onSquareAdd?.(i), ct.current = null, q.current = null, V.current && (V.current = !1, B(null), a && (a.getCanvas().style.cursor = ""));
+					wn.current.onSquareAdd?.(i), lt.current = null, K.current = null, V.current && (V.current = !1, B(null), a && (a.getCanvas().style.cursor = ""));
 				}
 				return;
 			}
 			if (e === "polyline") {
-				lt.current = [...lt.current, t];
+				ut.current = [...ut.current, t];
 				return;
 			}
 			let n = U.current;
 			if (n && n.src && n.width) {
 				let e = {
 					...n,
-					id: n.id ?? St(),
+					id: n.id ?? Ct(),
 					type: "marker",
 					center: t,
 					src: n.src,
 					width: n.width
 				};
-				wn.current.onMarkerAdd?.(e), z(null), B(null), X(), U.current = null, V.current = !1;
+				wn.current.onMarkerAdd?.(e), z(null), B(null), Y(), U.current = null, V.current = !1;
 				return;
 			}
 			let r = xn.current;
 			if (r) {
 				let e = {
-					id: St(),
+					id: Ct(),
 					type: "marker",
 					name: r.name,
 					center: t,
 					src: r.icon,
 					width: r.size || r.width || 32
 				};
-				r.customData !== void 0 && (e.customData = r.customData), wn.current.onMarkerAdd?.(e), z(null), B(null), X(), V.current = !1;
+				r.customData !== void 0 && (e.customData = r.customData), wn.current.onMarkerAdd?.(e), z(null), B(null), Y(), V.current = !1;
 				return;
 			}
 		}
@@ -5792,11 +5810,11 @@ const Mapbox = forwardRef((e, c) => {
 		n === "rectangle" && r && Et(r, t);
 		let i = st.current;
 		n === "circle" && i && jt(i.center, t);
-		let a = K.current;
+		let a = ct.current;
 		n === "polygon" && a.length > 0 && Ft(a, t);
-		let o = ct.current;
+		let o = lt.current;
 		n === "square" && o && Bt(o.center, t);
-		let s = lt.current;
+		let s = ut.current;
 		n === "polyline" && s.length > 0 && Wt(s, t);
 		let c = gn.current, l = vn.current;
 		for (let [e, n] of F.current) if (n.isPointInEntity(t)) {
@@ -5814,13 +5832,13 @@ const Mapbox = forwardRef((e, c) => {
 		}
 		if (Ke.current &&= (clearTimeout(Ke.current), null), L?.openedBy === "hover") {
 			let e = F.current.get(L.entityId);
-			e && !e.isPointInEntity(t) && ht(L.entityId);
+			e && !e.isPointInEntity(t) && gt(L.entityId);
 		}
 	}, [
 		N,
 		Pe,
 		L,
-		ht,
+		gt,
 		Et,
 		jt,
 		Ft,
@@ -5829,7 +5847,7 @@ const Mapbox = forwardRef((e, c) => {
 	]), pn = useCallback((e) => {
 		if (e.preventDefault(), yn.current !== "edit") return;
 		if (xn.current) {
-			z(null), B(null), X();
+			z(null), B(null), Y();
 			return;
 		}
 		let t = Sn.current;
@@ -5852,11 +5870,11 @@ const Mapbox = forwardRef((e, c) => {
 			return;
 		}
 		if (t === "polygon") {
-			let e = K.current;
+			let e = ct.current;
 			if (e.length >= 3) {
 				let t = G.current, n = applyEntityConfig({
 					...t,
-					id: t?.id ?? St(),
+					id: t?.id ?? Ct(),
 					type: "polygon",
 					coordinates: [...e]
 				}, D);
@@ -5866,8 +5884,8 @@ const Mapbox = forwardRef((e, c) => {
 					let e = new PolygonRenderer(r, n, O, k, A, M);
 					F.current.set(n.id, e);
 				}
-				wn.current.onPolygonAdd?.(n), K.current = [], G.current = null, V.current && (V.current = !1, B(null), r && (r.getCanvas().style.cursor = ""));
-			} else if (e.length > 0) K.current = [], It();
+				wn.current.onPolygonAdd?.(n), ct.current = [], G.current = null, V.current && (V.current = !1, B(null), r && (r.getCanvas().style.cursor = ""));
+			} else if (e.length > 0) ct.current = [], It();
 			else {
 				B(null);
 				let e = P.current;
@@ -5876,7 +5894,7 @@ const Mapbox = forwardRef((e, c) => {
 			return;
 		}
 		if (t === "square") {
-			if (ct.current) ct.current = null, Vt();
+			if (lt.current) lt.current = null, Vt();
 			else {
 				B(null);
 				let e = P.current;
@@ -5885,11 +5903,11 @@ const Mapbox = forwardRef((e, c) => {
 			return;
 		}
 		if (t === "polyline") {
-			let e = lt.current;
+			let e = ut.current;
 			if (e.length >= 2) {
-				let t = J.current, n = applyEntityConfig({
+				let t = q.current, n = applyEntityConfig({
 					...t,
-					id: t?.id ?? St(),
+					id: t?.id ?? Ct(),
 					type: "polyline",
 					coordinates: [...e]
 				}, D);
@@ -5899,8 +5917,8 @@ const Mapbox = forwardRef((e, c) => {
 					let e = new PolylineRenderer(r, n, O, k, M);
 					F.current.set(n.id, e);
 				}
-				wn.current.onPolylineAdd?.(n), lt.current = [], J.current = null, V.current && (V.current = !1, B(null), r && (r.getCanvas().style.cursor = ""));
-			} else if (e.length > 0) lt.current = [], Gt();
+				wn.current.onPolylineAdd?.(n), ut.current = [], q.current = null, V.current && (V.current = !1, B(null), r && (r.getCanvas().style.cursor = ""));
+			} else if (e.length > 0) ut.current = [], Gt();
 			else {
 				B(null);
 				let e = P.current;
@@ -5938,7 +5956,7 @@ const Mapbox = forwardRef((e, c) => {
 		}
 	}, [
 		un,
-		X,
+		Y,
 		Dt,
 		Mt,
 		It,
@@ -6003,8 +6021,8 @@ const Mapbox = forwardRef((e, c) => {
 	gn.current = T;
 	let _n = useRef(Ie);
 	_n.current = Ie;
-	let vn = useRef(mt);
-	vn.current = mt;
+	let vn = useRef(ht);
+	vn.current = ht;
 	let yn = useRef(R);
 	yn.current = R;
 	let bn = useRef(b);
@@ -6021,7 +6039,7 @@ const Mapbox = forwardRef((e, c) => {
 	Tn.current = D, useEffect(() => {
 		let e = (e) => {
 			if (e.key === "Escape" && R === "edit") {
-				if (rt && (z(null), B(null), X()), it === "rectangle") if (at) ot(null), Dt();
+				if (rt && (z(null), B(null), Y()), it === "rectangle") if (at) ot(null), Dt();
 				else {
 					B(null);
 					let e = P.current;
@@ -6033,19 +6051,19 @@ const Mapbox = forwardRef((e, c) => {
 					let e = P.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (it === "polygon") if (K.current.length > 0) K.current = [], It();
+				if (it === "polygon") if (ct.current.length > 0) ct.current = [], It();
 				else {
 					B(null);
 					let e = P.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (it === "square") if (ct.current) ct.current = null, Vt();
+				if (it === "square") if (lt.current) lt.current = null, Vt();
 				else {
 					B(null);
 					let e = P.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (it === "polyline") if (lt.current.length > 0) lt.current = [], Gt();
+				if (it === "polyline") if (ut.current.length > 0) ut.current = [], Gt();
 				else {
 					B(null);
 					let e = P.current;
@@ -6061,7 +6079,7 @@ const Mapbox = forwardRef((e, c) => {
 		rt,
 		it,
 		at,
-		X,
+		Y,
 		Dt,
 		Mt,
 		It,
@@ -6073,7 +6091,7 @@ const Mapbox = forwardRef((e, c) => {
 		let t = L.entityId, n = L.config, r = () => {
 			let r = gn.current.find((e) => e.id === t);
 			if (!r) {
-				gt();
+				_t();
 				return;
 			}
 			let { position: i } = calculatePopupPosition(r, n, e, void 0, Ge.current);
@@ -6084,7 +6102,7 @@ const Mapbox = forwardRef((e, c) => {
 		return e.on("move", r), e.on("zoom", r), e.on("rotate", r), e.on("pitch", r), () => {
 			clearTimeout(i), e.off("move", r), e.off("zoom", r), e.off("rotate", r), e.off("pitch", r);
 		};
-	}, [L?.entityId, gt]), useEffect(() => {
+	}, [L?.entityId, _t]), useEffect(() => {
 		let e = P.current, t = Ve.current;
 		if (!e || !qe || !t) return;
 		let n = qe.lngLat, r = () => {
@@ -6134,11 +6152,15 @@ const Mapbox = forwardRef((e, c) => {
 			}
 		});
 		return P.current = _, _.on("load", () => {
+			if (!_.getStyle().glyphs) {
+				let e = _.style, t = "/gis-fonts/{fontstack}/{range}.pbf";
+				e.glyphs = t, e.stylesheet && (e.stylesheet.glyphs = t);
+			}
 			I.current.clear(), T.forEach((e) => {
 				I.current.set(e.id, e);
 			}), ln(S), en(), Tt(), Ot(), Pt(), Rt(), Ut(), Qe(_), Fe?.(_);
 		}), _.on("click", dn), _.on("mousemove", fn), _.on("contextmenu", pn), () => {
-			_.off("click", dn), _.off("mousemove", fn), _.off("contextmenu", pn), tn(), xt(), X(), Z(), Q(), _.remove(), P.current = null;
+			_.off("click", dn), _.off("mousemove", fn), _.off("contextmenu", pn), tn(), St(), Y(), Z(), Q(), _.remove(), P.current = null;
 		};
 	}, []), useEffect(() => {
 		if (P.current) {
@@ -6205,6 +6227,10 @@ const Mapbox = forwardRef((e, c) => {
 			return;
 		}
 		En.current !== h && (En.current = h, e.setStyle(t), e.once("style.load", () => {
+			if (!e.getStyle().glyphs) {
+				let t = e.style, n = "/gis-fonts/{fontstack}/{range}.pbf";
+				t.glyphs = n, t.stylesheet && (t.stylesheet.glyphs = n);
+			}
 			He.current.clear(), kn.current(On.current), An.current(), jn.current(), Mn.current(), Nn.current(), Pn.current(), Fn.current(), In.current();
 		}));
 	}, [h]), useEffect(() => {
@@ -6233,8 +6259,8 @@ const Mapbox = forwardRef((e, c) => {
 		d,
 		f
 	]);
-	let Rn = (() => Se === !1 ? null : Se === !0 ? { enabled: !0 } : Se)(), zn = (() => we === !1 ? null : we === !0 ? { enabled: !0 } : we)(), Bn = (() => Oe === !1 ? null : Oe === !0 ? { enabled: !0 } : Oe)(), $ = (() => {
-		if (ke === !1) return null;
+	let Rn = (() => be === !1 ? null : be === !0 ? { enabled: !0 } : be)(), zn = (() => Se === !1 ? null : Se === !0 ? { enabled: !0 } : Se)(), Bn = (() => Ee === !1 ? null : Ee === !0 ? { enabled: !0 } : Ee)(), $ = (() => {
+		if (De === !1) return null;
 		let e, t;
 		if (S && S.length > 0) {
 			let n = S.find((e) => e.hasRoadNetwork === !0) || S[0];
@@ -6247,16 +6273,16 @@ const Mapbox = forwardRef((e, c) => {
 			} else e = `base-layer-source-${n.id}`;
 			t = n.roadNetworkSourceLayer || "road";
 		}
-		return ke === !0 ? {
+		return De === !0 ? {
 			enabled: !0,
 			source: e,
 			sourceLayer: t
 		} : {
-			...ke,
-			source: ke.source || e,
-			sourceLayer: ke.sourceLayer || t
+			...De,
+			source: De.source || e,
+			sourceLayer: De.sourceLayer || t
 		};
-	})(), Vn = (() => Ae ? Ae === !0 ? { enabled: !0 } : Ae : null)(), Hn = (() => Me ? Me === !0 ? { enabled: !0 } : Me : null)(), Un = useMemo(() => {
+	})(), Vn = (() => Oe ? Oe === !0 ? { enabled: !0 } : Oe : null)(), Hn = (() => Ae ? Ae === !0 ? { enabled: !0 } : Ae : null)(), Un = useMemo(() => {
 		let e = [];
 		for (let t of S) if (t.applyRasterPaint) if (t.type === "style") {
 			let n = P.current;
@@ -6327,14 +6353,14 @@ const Mapbox = forwardRef((e, c) => {
 					}),
 					Vn && Vn.enabled !== !1 && /* @__PURE__ */ jsx(MeasureControl, {
 						map: Ze,
-						defaultEntityConfig: Vn.defaultEntityConfig,
+						entityConfig: D,
 						className: Vn.className,
 						style: Vn.style
 					}),
 					Hn && Hn.enabled !== !1 && /* @__PURE__ */ jsx(RasterPaintControl, {
 						map: Ze,
 						value: C,
-						onChange: Ne,
+						onChange: je,
 						rasterPaintLayerIds: Un,
 						className: Hn.className,
 						style: Hn.style
@@ -6353,7 +6379,7 @@ const Mapbox = forwardRef((e, c) => {
 			}),
 			L && We.current && /* @__PURE__ */ jsx(EntityPopup, {
 				popupState: L,
-				onClose: () => ht(L.entityId),
+				onClose: () => gt(L.entityId),
 				portalContainer: We.current,
 				popupRef: Ge
 			}),