bbl-mapbox-react 0.0.13 → 0.0.15

package/dist/index.mjs

@@ -1,11 +1,11 @@
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import mapboxgl from "mapbox-gl";
 import * as turf from "@turf/turf";
 import { centroid, polygon } from "@turf/turf";
 import { createRoot } from "react-dom/client";
 import { createPortal } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Checkbox } from "@arco-design/web-react";
+import { Checkbox, Slider } from "@arco-design/web-react";
 const DEFAULT_NAME_CONFIG = {
 	fillColor: "#ffffff",
 	fillOpacity: 1,
@@ -617,8 +617,8 @@ var CanvasImageRenderer = class extends BaseCanvasRenderer {
 		}, t.src = e;
 	}
 	createMarker() {
-		let { center: e, src: t, width: n, rotation: r = 0, anchor: i = "center", name: a, confidence: s } = this.entity, c = n / this.imageAspectRatio;
-		this.markerElement = document.createElement("div"), this.markerElement.className = "mapbox-marker-container", this.markerElement.setAttribute("data-entity-id", String(this.entity.id)), this.onBeforeImageCreate(), a && (this.placeholderElement = document.createElement("div"), this.placeholderElement.className = "mapbox-marker-placeholder", this.placeholderElement.textContent = a, this.markerElement.appendChild(this.placeholderElement)), this.imageElement = document.createElement("img"), this.imageElement.src = t, this.imageElement.style.width = `${n}px`, this.imageElement.style.height = `${c}px`, this.imageElement.style.transform = `rotate(${r}deg)`, this.imageElement.style.opacity = `${confidenceToOpacity(s)}`, this.imageElement.style.pointerEvents = "auto", this.markerElement.appendChild(this.imageElement), a && (this.labelElement = document.createElement("div"), this.labelElement.className = "mapbox-marker-label", this.labelElement.textContent = a, this.labelElement.setAttribute("data-entity-id", String(this.entity.id)), this.updateLabelStyle(), this.markerElement.appendChild(this.labelElement)), this.marker = new mapboxgl.Marker({
+		let { center: e, src: t, width: n, rotation: r = 0, anchor: i = "center", name: a, confidence: o } = this.entity, c = n / this.imageAspectRatio;
+		this.markerElement = document.createElement("div"), this.markerElement.className = "mapbox-marker-container", this.markerElement.setAttribute("data-entity-id", String(this.entity.id)), this.onBeforeImageCreate(), a && (this.placeholderElement = document.createElement("div"), this.placeholderElement.className = "mapbox-marker-placeholder", this.placeholderElement.textContent = a, this.markerElement.appendChild(this.placeholderElement)), this.imageElement = document.createElement("img"), this.imageElement.src = t, this.imageElement.style.width = `${n}px`, this.imageElement.style.height = `${c}px`, this.imageElement.style.transform = `rotate(${r}deg)`, this.imageElement.style.opacity = `${confidenceToOpacity(o)}`, this.imageElement.style.pointerEvents = "auto", this.markerElement.appendChild(this.imageElement), a && (this.labelElement = document.createElement("div"), this.labelElement.className = "mapbox-marker-label", this.labelElement.textContent = a, this.labelElement.setAttribute("data-entity-id", String(this.entity.id)), this.updateLabelStyle(), this.markerElement.appendChild(this.labelElement)), this.marker = new mapboxgl.Marker({
 			element: this.markerElement,
 			anchor: i
 		}).setLngLat(e).addTo(this.map), this.onMarkerCreated();
@@ -2781,19 +2781,19 @@ var RectangleRenderer = class e {
 		this.initialized &&= (this.map.getLayer(this.lengthLayerId) && this.map.removeLayer(this.lengthLayerId), this.map.getLayer(this.areaLayerId) && this.map.removeLayer(this.areaLayerId), this.map.getLayer(this.labelLayerId) && this.map.removeLayer(this.labelLayerId), this.map.getLayer(this.strokeLayerId) && this.map.removeLayer(this.strokeLayerId), this.map.getLayer(this.fillLayerId) && this.map.removeLayer(this.fillLayerId), this.map.getSource(this.sourceId) && this.map.removeSource(this.sourceId), !1);
 	}
 };
-const EntityPopup = ({ popupState: e, onClose: r, portalContainer: o, popupRef: s }) => {
-	let c = useRef(null), [l, u] = useState("entering"), [m, h] = useState(!1), g = useRef(e.position), _ = useRef(!1), v = s || c;
+const EntityPopup = ({ popupState: e, onClose: r, portalContainer: i, popupRef: s }) => {
+	let c = useRef(null), [l, u] = useState("entering"), [d, h] = useState(!1), g = useRef(e.position), _ = useRef(!1), v = s || c;
 	_.current || (g.current = e.position), useEffect(() => {
 		let e = setTimeout(() => {
 			h(!0);
 		}, 60);
 		return () => clearTimeout(e);
 	}, []), useEffect(() => {
-		if (l === "entering" && m) {
+		if (l === "entering" && d) {
 			let e = setTimeout(() => u("entered"), 50);
 			return () => clearTimeout(e);
 		}
-	}, [l, m]);
+	}, [l, d]);
 	let y = useCallback(() => {
 		e.config.animation === "none" ? r() : (_.current = !0, u("exiting"), setTimeout(() => r(), 200));
 	}, [e.config.animation, r]);
@@ -2818,7 +2818,7 @@ const EntityPopup = ({ popupState: e, onClose: r, portalContainer: o, popupRef:
 		y,
 		v
 	]);
-	let ge = () => {
+	let b = () => {
 		switch (e.actualPosition) {
 			case "top": return "center bottom";
 			case "bottom": return "center top";
@@ -2827,18 +2827,18 @@ const EntityPopup = ({ popupState: e, onClose: r, portalContainer: o, popupRef:
 			case "center":
 			default: return "center center";
 		}
-	}, b = g.current, _e = /* @__PURE__ */ jsxs("div", {
+	}, x = g.current, S = /* @__PURE__ */ jsxs("div", {
 		ref: v,
-		className: `entity-popup ${m ? `entity-popup--${l} animation-${e.config.animation}` : ""} ${e.config.className || ""}`,
+		className: `entity-popup ${d ? `entity-popup--${l} animation-${e.config.animation}` : ""} ${e.config.className || ""}`,
 		style: {
 			position: "fixed",
-			left: `${b.x}px`,
-			top: `${b.y}px`,
+			left: `${x.x}px`,
+			top: `${x.y}px`,
 			maxWidth: e.config.maxWidth,
 			zIndex: e.config.zIndex,
 			pointerEvents: "all",
-			opacity: m ? void 0 : 0,
-			transformOrigin: ge(),
+			opacity: d ? void 0 : 0,
+			transformOrigin: b(),
 			...e.config.style
 		},
 		role: "dialog",
@@ -2853,10 +2853,10 @@ const EntityPopup = ({ popupState: e, onClose: r, portalContainer: o, popupRef:
 			children: e.config.content
 		})]
 	});
-	return createPortal(_e, o);
+	return createPortal(S, i);
 };
 var location_default = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20t='1768373933818'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20p-id='30344'%20width='200'%20height='200'%3e%3cpath%20d='M400.440142%201024h-0.073136a48.781895%2048.781895%200%200%201-45.490763-31.448598L3.383306%2066.061072a48.781895%2048.781895%200%200%201%2062.897196-62.897197l926.563466%20351.419801a48.928168%2048.928168%200%200%201%200.219409%2091.127799L597.761811%20597.688654l-151.904042%20395.082157a48.781895%2048.781895%200%200%201-45.490763%2031.229189zM133.053921%20132.907627l267.678766%20705.691916%20113.87318-296.201913a48.855032%2048.855032%200%200%201%2028.011193-27.938057l296.201913-113.87318-705.765052-267.678766z'%20p-id='30345'%20fill='%23ffffff'%20/%3e%3cscript%20xmlns=''%20/%3e%3c/svg%3e";
-function CoordinateDisplay({ map: e, precision: r = 6, className: i = "", style: o }) {
+function CoordinateDisplay({ map: e, precision: r = 6, className: i = "", style: a }) {
 	let [s, c] = useState(null), l = useCallback((e) => {
 		c({
 			lng: Number(e.lngLat.lng.toFixed(r)),
@@ -2869,7 +2869,7 @@ function CoordinateDisplay({ map: e, precision: r = 6, className: i = "", style:
 		};
 	}, [e, l]), s ? /* @__PURE__ */ jsxs("div", {
 		className: `mapbox-coordinate-display ${i}`,
-		style: o,
+		style: a,
 		children: [/* @__PURE__ */ jsx("img", {
 			src: location_default,
 			alt: "location",
@@ -2887,7 +2887,7 @@ function CoordinateDisplay({ map: e, precision: r = 6, className: i = "", style:
 	}) : null;
 }
 var scaler_default = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20t='1768374054549'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20p-id='31504'%20width='200'%20height='200'%3e%3cpath%20d='M53.80096%20687.40096l282.79808%20282.79808%20633.6-633.6-282.79808-282.79808-90.39872%2090.39872-28.29824%2028.20096-42.7008%2042.7008-23.5008%2023.5008-63.20128%2063.19616-12.29824%2012.29824-373.20192%20373.30432z%20m282.79808%20212.10112l-212.10112-212.1984%2054.99904-54.99904%20106.10176%20106.10176%2028.29824-28.29824-106.10176-106.10176%2042.39872-42.39872%2070.70208%2070.70208%2028.29824-28.29824-70.69184-70.71232%2042.39872-42.39872%2070.70208%2070.70208%2028.29824-28.29824-70.70208-70.70208%2042.39872-42.39872%20106.10176%20106.10176%2028.29824-28.29824-106.09664-106.10688%2042.39872-42.39872%2070.70208%2070.70208%2028.29824-28.29824-70.70208-70.7072%2042.39872-42.39872%2070.70208%2070.70208%2028.29824-28.29824-70.70208-70.70208%2042.7008-42.7008%20106.10176%20106.10176%2028.29824-28.29824-105.99936-106.10176%2054.99904-54.99904%20212.10112%20212.10112L336.59904%20899.50208z'%20fill='%23ffffff'%20p-id='31505'%20/%3e%3cscript%20xmlns=''%20/%3e%3c/svg%3e";
-function ScaleControl({ map: e, maxWidth: r = 100, unit: i = "metric", className: o = "", style: s }) {
+function ScaleControl({ map: e, maxWidth: r = 100, unit: i = "metric", className: a = "", style: s }) {
 	let [c, l] = useState({
 		width: 100,
 		label: "100 m"
@@ -2945,7 +2945,7 @@ function ScaleControl({ map: e, maxWidth: r = 100, unit: i = "metric", className
 			e.off("move", u), e.off("zoom", u);
 		};
 	}, [e, u]), /* @__PURE__ */ jsxs("div", {
-		className: `mapbox-scale-control ${o}`,
+		className: `mapbox-scale-control ${a}`,
 		style: s,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "mapbox-scale-control__bar-wrapper",
@@ -3017,8 +3017,8 @@ function detectVectorSource(e) {
 	};
 	return null;
 }
-function RoadHighlightControl({ map: e, highlightWidth: r = 3, defaultRoadTypes: s = [], defaultMinWidth: c = 0, source: l, sourceLayer: u, className: d = "", style: h }) {
-	let [g, _] = useState(!1), [v, y] = useState(s), [ge, b] = useState(!1), _e = useRef(null), x = useRef(null), S = useRef(null), C = useCallback((e, t, n) => {
+function RoadHighlightControl({ map: e, highlightWidth: r = 3, defaultRoadTypes: i = [], defaultMinWidth: c = 0, source: l, sourceLayer: u, className: d = "", style: f }) {
+	let [g, _] = useState(!1), [v, y] = useState(i), [b, x] = useState(!1), S = useRef(null), C = useRef(null), w = useRef(null), T = useCallback((e, t, n) => {
 		if (!e.isStyleLoaded()) return !1;
 		let i = !0;
 		return ROAD_TYPE_OPTIONS.forEach((a) => {
@@ -3054,7 +3054,7 @@ function RoadHighlightControl({ map: e, highlightWidth: r = 3, defaultRoadTypes:
 				let r = detectVectorSource(e);
 				r && (console.log("Auto-detected vector source:", r), t ||= r.source, n ||= r.sourceLayer);
 			}
-			t && n ? C(e, t, n) && b(!0) : console.warn("No vector source found for road highlighting");
+			t && n ? T(e, t, n) && x(!0) : console.warn("No vector source found for road highlighting");
 		};
 		e.isStyleLoaded() ? t() : e.once("load", t);
 		let n = () => {
@@ -3067,9 +3067,9 @@ function RoadHighlightControl({ map: e, highlightWidth: r = 3, defaultRoadTypes:
 		e,
 		l,
 		u,
-		C
+		T
 	]), useEffect(() => {
-		!e || !ge || ROAD_TYPE_OPTIONS.forEach((t) => {
+		!e || !b || ROAD_TYPE_OPTIONS.forEach((t) => {
 			let n = `${LAYER_ID_PREFIX}${t.class}`;
 			if (e.getLayer(n)) try {
 				let r = v.includes(t.class);
@@ -3080,12 +3080,12 @@ function RoadHighlightControl({ map: e, highlightWidth: r = 3, defaultRoadTypes:
 		});
 	}, [
 		e,
-		ge,
+		b,
 		v
 	]), useEffect(() => {
 		if (!g) return;
 		let e = (e) => {
-			_e.current && !_e.current.contains(e.target) && x.current && !x.current.contains(e.target) && _(!1);
+			S.current && !S.current.contains(e.target) && C.current && !C.current.contains(e.target) && _(!1);
 		}, t = setTimeout(() => {
 			document.addEventListener("mousedown", e);
 		}, 0);
@@ -3098,20 +3098,20 @@ function RoadHighlightControl({ map: e, highlightWidth: r = 3, defaultRoadTypes:
 			if (e.getLayer(n)) try {
 				e.removeLayer(n);
 			} catch {}
-		}), S.current &&= (S.current.remove(), null);
+		}), w.current &&= (w.current.remove(), null);
 	}, [e]);
-	let ve = useCallback((e) => ROAD_TYPE_OPTIONS.find((t) => t.class === e)?.label || e, []), ye = useCallback((t) => {
+	let E = useCallback((e) => ROAD_TYPE_OPTIONS.find((t) => t.class === e)?.label || e, []), D = useCallback((t) => {
 		if (!e || v.length === 0) {
-			S.current && S.current.remove(), e?.getCanvas().style.cursor && (e.getCanvas().style.cursor = "");
+			w.current && w.current.remove(), e?.getCanvas().style.cursor && (e.getCanvas().style.cursor = "");
 			return;
 		}
 		let n = v.map((e) => `${LAYER_ID_PREFIX}${e}`), r = [[t.point.x - 10, t.point.y - 10], [t.point.x + 10, t.point.y + 10]], i = e.queryRenderedFeatures(r, { layers: n.filter((t) => e.getLayer(t)) });
 		if (i.length > 0) {
-			let n = i[0].properties || {}, r = t.lngLat, a = n.name || n.name_en || n.name_local || "", s = n.class || "", c = n.type || "", l = n.structure || "", u = n.oneway, d = n.layer, f = n.iso_3166_1 || "", p = n.iso_3166_2 || "", m = (e) => !(e == null || e === "" || typeof e == "string" && e.toLowerCase() === "none"), h = [];
-			m(s) && h.push(`
+			let n = i[0].properties || {}, r = t.lngLat, a = n.name || n.name_en || n.name_local || "", o = n.class || "", c = n.type || "", l = n.structure || "", u = n.oneway, d = n.layer, f = n.iso_3166_1 || "", p = n.iso_3166_2 || "", m = (e) => !(e == null || e === "" || typeof e == "string" && e.toLowerCase() === "none"), h = [];
+			m(o) && h.push(`
 						<div class="road-highlight-popup__row">
 							<span>道路类型:</span>
-							<span class="road-highlight-popup__value">${ve(s)}</span>
+							<span class="road-highlight-popup__value">${E(o)}</span>
 						</div>
 					`), h.push(`
 					<div class="road-highlight-popup__row">
@@ -3160,38 +3160,38 @@ function RoadHighlightControl({ map: e, highlightWidth: r = 3, defaultRoadTypes:
 						<div class="road-highlight-popup__info">${h.join("")}</div>
 					</div>
 				`;
-			S.current ||= new mapboxgl.Popup({
+			w.current ||= new mapboxgl.Popup({
 				closeButton: !1,
 				closeOnClick: !1,
 				offset: 15,
 				className: "road-highlight-popup"
-			}), S.current.setLngLat(r).setHTML(g).addTo(e), e.getCanvas().style.cursor = "pointer";
-		} else S.current && S.current.remove(), e.getCanvas().style.cursor = "";
+			}), w.current.setLngLat(r).setHTML(g).addTo(e), e.getCanvas().style.cursor = "pointer";
+		} else w.current && w.current.remove(), e.getCanvas().style.cursor = "";
 	}, [
 		e,
 		v,
-		ve
+		E
 	]);
 	useEffect(() => {
-		if (!(!e || !ge)) return e.on("mousemove", ye), () => {
-			e.off("mousemove", ye), S.current && S.current.remove(), e.getCanvas().style.cursor = "";
+		if (!(!e || !b)) return e.on("mousemove", D), () => {
+			e.off("mousemove", D), w.current && w.current.remove(), e.getCanvas().style.cursor = "";
 		};
 	}, [
 		e,
-		ge,
-		ye
+		b,
+		D
 	]);
-	let T = (e, t) => {
+	let ve = (e, t) => {
 		y((n) => t ? [...n, e] : n.filter((t) => t !== e));
-	}, be = (e) => {
+	}, ye = (e) => {
 		y(e ? ROAD_TYPE_OPTIONS.map((e) => e.class) : []);
-	}, xe = v.length > 0;
+	}, k = v.length > 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: `mapbox-road-highlight-control ${d}`,
-		style: h,
+		style: f,
 		children: [/* @__PURE__ */ jsxs("button", {
-			ref: x,
-			className: `mapbox-control-btn mapbox-road-highlight-control__btn ${xe ? "mapbox-road-highlight-control__btn--active" : ""}`,
+			ref: C,
+			className: `mapbox-control-btn mapbox-road-highlight-control__btn ${k ? "mapbox-road-highlight-control__btn--active" : ""}`,
 			onClick: () => _(!g),
 			title: `路网高亮${v.length > 0 ? ` (已选 ${v.length})` : ""}`,
 			children: [/* @__PURE__ */ jsx("img", {
@@ -3200,7 +3200,7 @@ function RoadHighlightControl({ map: e, highlightWidth: r = 3, defaultRoadTypes:
 				className: "mapbox-road-highlight-control__btn-icon"
 			}), /* @__PURE__ */ jsxs("span", { children: ["路网", v.length > 0 ? ` (${v.length})` : ""] })]
 		}), g && /* @__PURE__ */ jsxs("div", {
-			ref: _e,
+			ref: S,
 			className: "mapbox-road-highlight-control__panel",
 			children: [
 				/* @__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: be,
+						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: () => T(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) => T(e.class, t),
+									onChange: (t) => ve(e.class, t),
 									onClick: (e) => e.stopPropagation(),
 									style: {
 										"--color-text-1": "#fff",
@@ -3257,7 +3257,7 @@ function RoadHighlightControl({ map: e, highlightWidth: r = 3, defaultRoadTypes:
 					className: "mapbox-road-highlight-control__tip",
 					children: "💡 选中道路类型后立即显示高亮"
 				}),
-				!ge && /* @__PURE__ */ jsx("div", {
+				!b && /* @__PURE__ */ jsx("div", {
 					className: "mapbox-road-highlight-control__warning",
 					children: "⚠️ 正在初始化图层..."
 				})
@@ -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,16 +3505,20 @@ function clearAllPreviewSources(e) {
 		"polyline-vertices-source"
 	]) clearPreviewSource(e, `${PREVIEW_PREFIX}${t}`);
 }
-function MeasureControl({ map: e, defaultEntityConfig: r, className: o = "", style: s }) {
-	let [c, l] = useState(!1), [u, d] = useState(null), [h, g] = useState({
-		showArea: r?.showArea ?? !0,
-		showLength: r?.showLength ?? !0,
-		showRadius: r?.showRadius ?? !0
-	}), [_, v] = useState([]), y = useRef(/* @__PURE__ */ new Map()), ge = useRef(0), b = useRef(null), x = useRef(null), S = useRef(null), C = useRef(null), w = useRef(null), T = useRef([]), E = useRef([]), D = useRef(h);
-	D.current = h;
-	let O = useRef(u);
-	O.current = u;
-	let k = useCallback(() => `measure-${++ge.current}`, []), Se = useRef(!1), Ce = useCallback(() => {
+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(() => {
@@ -3524,31 +3535,31 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: o = "", sty
 		};
 	}, [e]), useEffect(() => {
 		let e = (e) => {
-			b.current && !b.current.contains(e.target) && x.current && !x.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 we = useCallback((t) => {
 		if (!e) return;
-		let n = applyEntityConfig(t, D.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]), Te = useCallback((e) => {
-		let t = y.current.get(e);
-		t && (t.destroy(), y.current.delete(e)), v((t) => t.filter((t) => t.entity.id !== 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(() => {
-		y.current.forEach((e) => e.destroy()), y.current.clear(), v([]);
+		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, {
@@ -3557,22 +3568,20 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: o = "", sty
 			duration: 1e3
 		});
 	}, [e]), Oe = useCallback((e, t) => {
-		g((n) => {
-			let r = {
-				...n,
-				[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;
-		});
-	}, []), ke = 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: o = "", sty
 		});
 		let l = e.getSource(`${PREVIEW_PREFIX}rect-preview-measure-source`);
 		if (l) {
-			let e = D.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({
@@ -3633,7 +3642,7 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: o = "", sty
 			},
 			properties: {}
 		});
-		let o = D.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: o = "", sty
 			type: "FeatureCollection",
 			features: c
 		});
-	}, [e]), A = 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: o = "", sty
 		});
 		let o = e.getSource(`${PREVIEW_PREFIX}square-preview-measure-source`);
 		if (o) {
-			let e = D.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: o = "", sty
 				features: n
 			});
 		}
-	}, [e]), j = 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: o = "", sty
 		});
 		let o = e.getSource(`${PREVIEW_PREFIX}polygon-preview-measure-source`);
 		if (o) {
-			let e = D.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: o = "", sty
 				features: t
 			});
 		}
-	}, [e]), je = 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: o = "", sty
 		});
 		let o = e.getSource(`${PREVIEW_PREFIX}polyline-preview-measure-source`);
 		if (o) {
-			let e = D.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: o = "", sty
 		}
 	}, [e]);
 	useEffect(() => {
-		if (!e || !u) return;
+		if (!e || !d) return;
 		Ce(), e.getCanvas().style.cursor = "crosshair";
 		let t = (t) => {
-			let n = [t.lngLat.lng, t.lngLat.lat], r = O.current;
+			let n = [t.lngLat.lng, t.lngLat.lat], r = be.current;
 			if (r === "rectangle") {
-				let t = S.current;
-				if (!t) S.current = n;
+				let t = D.current;
+				if (!t) D.current = n;
 				else {
 					let r = {
-						id: k(),
+						id: xe(),
 						type: "rectangle",
 						bounds: [t, n]
 					};
-					we(r), S.current = null, clearAllPreviewSources(e), d(null);
+					we(r), D.current = null, clearAllPreviewSources(e), f(null);
 				}
 			} else if (r === "circle") {
-				let t = C.current;
-				if (!t) C.current = { center: n };
+				let t = O.current;
+				if (!t) O.current = { center: n };
 				else {
 					let r = calculateDistance(t.center, n), i = {
-						id: k(),
+						id: xe(),
 						type: "circle",
 						center: t.center,
 						radius: r
 					};
-					we(i), C.current = null, clearAllPreviewSources(e), d(null);
+					we(i), O.current = null, clearAllPreviewSources(e), f(null);
 				}
 			} else if (r === "square") {
-				let t = w.current;
-				if (!t) w.current = { center: n };
+				let t = k.current;
+				if (!t) k.current = { center: n };
 				else {
 					let r = calculateDistance(t.center, n) * 2, i = {
-						id: k(),
+						id: xe(),
 						type: "square",
 						center: t.center,
 						length: r
 					};
-					we(i), w.current = null, clearAllPreviewSources(e), d(null);
+					we(i), k.current = null, clearAllPreviewSources(e), f(null);
 				}
 			} else if (r === "polygon") {
-				let t = T.current;
+				let t = A.current;
 				if (t.length >= 3 && calculateDistance(t[0], n) < 20) {
 					let n = {
-						id: k(),
+						id: xe(),
 						type: "polygon",
 						coordinates: [...t]
 					};
-					we(n), T.current = [], clearAllPreviewSources(e), d(null);
+					we(n), A.current = [], clearAllPreviewSources(e), f(null);
 					return;
 				}
-				T.current = [...t, n];
-			} else r === "polyline" && (E.current = [...E.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 = O.current;
-			if (n === "rectangle" && S.current) ke(S.current, t);
-			else if (n === "circle" && C.current) Ae(C.current.center, t);
-			else if (n === "square" && w.current) A(w.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 = T.current;
-				e.length > 0 && j(e, t);
+				let e = A.current;
+				e.length > 0 && Me(e, t);
 			} else if (n === "polyline") {
-				let e = E.current;
-				e.length > 0 && je(e, t);
+				let e = j.current;
+				e.length > 0 && N(e, t);
 			}
 		}, r = (t) => {
 			t.preventDefault();
-			let n = O.current;
+			let n = be.current;
 			if (n === "polygon") {
-				let t = T.current;
+				let t = A.current;
 				if (t.length >= 3) {
 					let n = {
-						id: k(),
+						id: xe(),
 						type: "polygon",
 						coordinates: [...t]
 					};
-					we(n), T.current = [], clearAllPreviewSources(e), d(null);
-				} else T.current = [], clearAllPreviewSources(e);
+					we(n), A.current = [], clearAllPreviewSources(e), f(null);
+				} else A.current = [], clearAllPreviewSources(e);
 			} else if (n === "polyline") {
-				let t = E.current;
+				let t = j.current;
 				if (t.length >= 2) {
 					let n = {
-						id: k(),
+						id: xe(),
 						type: "polyline",
 						coordinates: [...t]
 					};
-					we(n), E.current = [], clearAllPreviewSources(e), d(null);
-				} else E.current = [], clearAllPreviewSources(e);
+					we(n), j.current = [], clearAllPreviewSources(e), f(null);
+				} else j.current = [], clearAllPreviewSources(e);
 			}
 		}, i = (t) => {
-			t.key === "Escape" && (S.current = null, C.current = null, w.current = null, T.current = [], E.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 = O.current;
+			let n = be.current;
 			if (n === "polygon") {
-				let t = T.current;
+				let t = A.current;
 				if (t.length >= 3) {
 					let n = {
-						id: k(),
+						id: xe(),
 						type: "polygon",
 						coordinates: [...t]
 					};
-					we(n), T.current = [], clearAllPreviewSources(e), d(null);
+					we(n), A.current = [], clearAllPreviewSources(e), f(null);
 				}
 			} else if (n === "polyline") {
-				let t = E.current;
+				let t = j.current;
 				if (t.length >= 2) {
 					let n = {
-						id: k(),
+						id: xe(),
 						type: "polyline",
 						coordinates: [...t]
 					};
-					we(n), E.current = [], clearAllPreviewSources(e), d(null);
+					we(n), j.current = [], clearAllPreviewSources(e), f(null);
 				}
 			}
 		};
@@ -3950,28 +3959,28 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: o = "", sty
 		};
 	}, [
 		e,
-		u,
-		k,
+		d,
+		xe,
 		we,
 		Ce,
 		ke,
 		Ae,
-		A,
-		j,
-		je
+		je,
+		Me,
+		N
 	]), useEffect(() => () => {
-		y.current.forEach((e) => e.destroy()), y.current.clear();
+		S.current.forEach((e) => e.destroy()), S.current.clear();
 	}, []);
-	let Me = useCallback((t) => {
-		d((e) => e === t ? null : t), S.current = null, C.current = null, w.current = null, T.current = [], E.current = [], e && clearAllPreviewSources(e);
+	let Ne = useCallback((t) => {
+		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 ${o}`,
-		style: s,
+		className: `mapbox-measure-control ${s}`,
+		style: c,
 		children: [/* @__PURE__ */ jsxs("button", {
-			ref: x,
-			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: o = "", 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: b,
+		}), l && /* @__PURE__ */ jsxs("div", {
+			ref: T,
 			className: "mapbox-measure-control__panel",
 			children: [
 				/* @__PURE__ */ jsx("div", {
@@ -3998,17 +4007,17 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: o = "", sty
 					className: "mapbox-measure-control__settings",
 					children: [
 						/* @__PURE__ */ jsx(Checkbox, {
-							checked: h.showArea,
+							checked: y.showArea,
 							onChange: (e) => Oe("showArea", e),
 							children: "面积"
 						}),
 						/* @__PURE__ */ jsx(Checkbox, {
-							checked: h.showLength,
+							checked: y.showLength,
 							onChange: (e) => Oe("showLength", e),
 							children: "长度"
 						}),
 						/* @__PURE__ */ jsx(Checkbox, {
-							checked: h.showRadius,
+							checked: y.showRadius,
 							onChange: (e) => Oe("showRadius", e),
 							children: "半径"
 						})
@@ -4021,14 +4030,14 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: o = "", 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" : ""}`,
-						onClick: () => Me(e.mode),
+						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: Ee,
 						title: "清除全部",
@@ -4038,7 +4047,7 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: o = "", 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,7 +4057,7 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: o = "", 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: () => De(e.entity.id),
 							children: [
@@ -4078,8 +4087,145 @@ function MeasureControl({ map: e, defaultEntityConfig: r, className: o = "", sty
 		})]
 	}) : null;
 }
+var raster_paint_default = "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='1773803353422'%20class='icon'%20viewBox='0%200%201028%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='6757'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='128.5'%20height='128'%3e%3cpath%20d='M835.073959%20357.94044V345.56192a345.170251%20345.170251%200%201%200-686.690426%2049.672777A345.090902%20345.090902%200%200%200%20523.706588%20974.009826a345.090902%20345.090902%200%201%200%20311.049973-616.069386zM490.141757%2048.001359a297.877959%20297.877959%200%200%201%20297.560561%20297.560561c0%207.934948%200%2016.345994-1.031543%2025.074437A297.639911%20297.639911%200%200%201%20490.141757%20643.122482h-15.869897a289.943011%20289.943011%200%200%201-104.106522-24.757039A297.481212%20297.481212%200%200%201%20490.141757%2048.001359zM345.170251%20976.39031a297.560561%20297.560561%200%200%201-185.281043-530.371944c0%201.031543%200.714145%202.142436%201.031544%203.253328s1.50764%204.522921%202.301135%206.824056c1.269592%203.888125%202.697882%207.934948%204.126173%2011.743724%200.952194%202.301135%201.825038%204.60227%202.697882%206.903405%201.58699%203.808775%203.253329%207.934948%204.919668%2011.505675%200.952194%202.142436%201.904388%204.284872%202.935931%206.347958%201.983737%204.284872%204.126173%208.490395%206.268609%2012.695918l2.380485%204.60227c3.01528%205.633813%206.268609%2011.108928%209.601287%2016.504692%200.793495%201.428291%201.745689%202.777232%202.618533%204.126173%202.539183%204.046824%205.157716%207.934948%207.934948%2011.981772l4.205523%205.792512c2.380484%203.253329%204.760969%206.506658%207.220803%209.680637l4.840318%206.030561c2.459834%203.01528%204.999017%205.951211%207.538201%208.887142l5.157717%205.792512c2.777232%203.01528%205.633813%205.951211%208.569744%208.887142l4.840318%204.999018c4.205523%204.046824%208.411045%207.934948%2012.775267%2011.823073l3.09463%202.618533c4.205523%203.650076%208.490395%207.220803%2012.854616%2010.63283l5.713163%204.205523c3.332678%202.459834%206.586007%204.919668%209.998035%207.220803l6.506657%204.364222q4.999017%203.332678%209.998035%206.427308c2.221786%201.348941%204.443571%202.697882%206.744706%203.967474%203.570727%202.142436%207.300152%204.126173%2010.950229%206.10991l6.18926%203.253329%202.301135%201.269592v12.378519c0%207.379502%200%2014.759004%200.793494%2021.979807%200%202.459834%200.396747%204.840318%200.634796%207.220803%200%204.840318%200.793495%209.759986%201.428291%2014.600305%200%202.777232%200.872844%205.554464%201.269592%208.411045%200.714145%204.364222%201.428291%208.728443%202.221785%2013.013315%200.555446%202.935931%201.190242%205.871862%201.825038%208.728443%200.952194%204.205523%201.904388%207.934948%203.015281%2012.457869s1.50764%205.871862%202.380484%208.728443%202.380484%207.934948%203.729426%2012.140471c0.952194%202.856581%201.825038%205.633813%202.856581%208.490395%201.428291%204.046824%203.01528%207.934948%204.60227%2012.061121%201.110893%202.618533%202.142436%205.316415%203.253329%207.934948%201.825038%204.284872%203.729426%208.411045%205.713163%2012.537219%201.110893%202.301135%202.142436%204.681619%203.332678%206.903405%202.618533%205.316415%205.475114%2010.474132%208.411045%2015.869896%200.555446%201.110893%201.110893%202.221786%201.745689%203.332679%203.570727%206.10991%207.379502%2012.061121%2011.346976%2018.012332%201.269592%201.904388%202.697882%203.808775%204.046824%205.713163%202.777232%203.967474%205.475114%207.934948%208.411045%2011.664374%201.745689%202.301135%203.570727%204.443571%205.395765%206.744706s5.316415%206.586007%207.934948%209.839336%204.046824%204.60227%206.10991%206.824056%205.633813%206.030561%208.490395%209.045841l6.744706%206.586007c2.935931%202.856581%205.871862%205.633813%208.966492%207.934948s4.681619%204.205523%207.062104%206.268609%206.427308%205.316415%209.759986%207.934948%204.760969%203.888125%207.300152%205.713163l2.380485%201.904388A295.894222%20295.894222%200%200%201%20345.170251%20976.39031z%20m335.965711-11.981772a296.608368%20296.608368%200%200%201-146.479145-38.563848c-5.792512-3.332678-11.426326-6.744706-16.90144-10.315433-1.825038-1.190242-3.491377-2.539183-5.237066-3.729426-3.650076-2.459834-7.300152-4.999017-10.79153-7.934948-2.063087-1.50764-3.967474-3.173979-5.871862-4.760969-3.173979-2.459834-6.268609-4.919668-9.283889-7.934949s-3.967474-3.650076-5.951211-5.475114-5.633813-5.078367-7.934949-7.934948-3.808775-4.046824-5.792512-6.10991-5.078367-5.157716-7.458851-7.934949l-5.554464-6.506657c-1.825038-2.142436-4.60227-5.475114-6.824056-7.934949s-3.412028-4.681619-5.157716-7.062104-4.205523-5.633813-6.10991-8.490394-3.253329-4.999017-4.840319-7.458852-3.729426-5.792512-5.475114-8.807792-2.935931-5.157716-4.364222-7.934949-3.332678-6.030561-4.919668-9.045841-2.539183-5.395765-3.808775-7.934948-2.935931-6.18926-4.284872-9.363239-2.301135-5.554464-3.412028-8.411045-2.459834-6.268609-3.570726-9.521938-1.983737-5.792512-2.856582-8.649094-2.063087-6.506658-3.01528-9.759986-1.58699-5.951211-2.301135-8.887142-1.666339-6.586007-2.380485-9.918686S388.812467%20722.471965%20388.812467%20719.536034s-1.190242-6.665357-1.666339-9.998035-0.793495-6.18926-1.110893-9.28389-0.793495-6.824056-1.031543-10.236083%200-6.268609-0.555447-9.363239v-6.665357h0.396748l2.142436%200.634796c4.364222%201.428291%208.807793%202.697882%2013.251363%203.967474l4.840319%201.269592%2011.505675%202.697883%204.52292%201.031543c5.237066%201.031543%2010.474132%201.983737%2015.869897%202.856581h1.348941c4.840318%200.793495%209.759986%201.348941%2014.600305%201.904388l4.919668%200.476097q5.951211%200.634796%2011.902422%200.952194H490.855902a344.456106%20344.456106%200%200%200%20183.138607-52.529358c5.395765-3.412028%2010.71218-7.062104%2015.869896-10.71218%201.745689-1.190242%203.332678-2.539183%205.078367-3.729426%203.412028-2.539183%206.903405-5.157716%2010.236084-7.934948l5.713162-4.760969c3.01528-2.459834%206.030561-4.999017%208.966492-7.934949l5.633813-5.237066c2.856581-2.618533%205.554464-5.237066%207.934949-7.934948l5.475114-5.633813c2.618533-2.697882%205.237066-5.475114%207.934948-8.331696l5.078367-5.713163%207.458851-9.045841%204.522921-5.633813%207.934948-10.315433%203.570727-4.999017c3.173979-4.60227%206.268609-9.363239%209.20454-14.203558l1.031543-1.586989c3.332678-5.475114%206.506658-11.029578%209.601288-16.663392%200.634796-1.190242%201.190242-2.380484%201.745688-3.570727%202.301135-4.443571%204.60227-8.887142%206.665357-13.410062%200.872844-1.825038%201.666339-3.729426%202.539183-5.554464%201.745689-3.967474%203.491377-7.934948%205.078367-11.902422%200.793495-2.063087%201.58699-4.205523%202.459834-6.347959%201.428291-3.808775%202.856581-7.934948%204.126173-11.505675%200.793495-2.221786%201.50764-4.522921%202.221786-6.744706%201.190242-3.808775%202.380484-7.934948%203.491377-11.585025%200.634796-2.301135%201.269592-4.60227%201.825038-6.903405%201.031543-3.967474%201.904388-7.934948%202.777232-11.902422%200.555446-2.301135%201.031543-4.522921%201.50764-6.824056%200-1.031543%200.476097-2.142436%200.634796-3.173979a297.560561%20297.560561%200%200%201-148.304183%20555.446381z'%20fill='%23ffffff'%20p-id='6758'%3e%3c/path%3e%3c/svg%3e", DEFAULT_CONFIG = {
+	brightness: 1,
+	saturation: 0,
+	contrast: 0,
+	hueRotate: 0
+}, SLIDER_CONFIG = [
+	{
+		key: "brightness",
+		label: "亮度",
+		min: 0,
+		max: 1,
+		step: .01
+	},
+	{
+		key: "saturation",
+		label: "饱和度",
+		min: -1,
+		max: 1,
+		step: .01
+	},
+	{
+		key: "contrast",
+		label: "对比度",
+		min: -1,
+		max: 1,
+		step: .01
+	},
+	{
+		key: "hueRotate",
+		label: "色相",
+		min: 0,
+		max: 360,
+		step: 1
+	}
+];
+function RasterPaintControl({ map: e, value: r, onChange: s, rasterPaintLayerIds: c = [], className: l, style: u }) {
+	let [d, f] = useState(!1), [h, _] = useState({ ...DEFAULT_CONFIG }), v = useRef(null), y = useRef(null), b = r !== void 0;
+	useEffect(() => {
+		let e = (e) => {
+			v.current && !v.current.contains(e.target) && y.current && !y.current.contains(e.target) && f(!1);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, []);
+	let x = useMemo(() => b ? {
+		brightness: r.brightness ?? DEFAULT_CONFIG.brightness,
+		saturation: r.saturation ?? DEFAULT_CONFIG.saturation,
+		contrast: r.contrast ?? DEFAULT_CONFIG.contrast,
+		hueRotate: r.hueRotate ?? DEFAULT_CONFIG.hueRotate
+	} : h, [
+		b,
+		r,
+		h
+	]), S = useRef(b);
+	useEffect(() => {
+		b && !S.current && _({ ...x }), S.current = b;
+	}, [b, x]);
+	let C = useCallback((t) => {
+		if (!(!e || c.length === 0)) for (let n of c) e.getLayer(n) && (e.setPaintProperty(n, "raster-brightness-min", 0), e.setPaintProperty(n, "raster-brightness-max", t.brightness), e.setPaintProperty(n, "raster-saturation", t.saturation), e.setPaintProperty(n, "raster-contrast", t.contrast), e.setPaintProperty(n, "raster-hue-rotate", t.hueRotate));
+	}, [e, c]), w = useCallback((e, t) => {
+		if (b) s?.({
+			...x,
+			[e]: t
+		});
+		else {
+			let n = {
+				...h,
+				[e]: t
+			};
+			_(n), C(n);
+		}
+	}, [
+		b,
+		s,
+		x,
+		h,
+		C
+	]), T = useCallback(() => {
+		b ? s?.({ ...DEFAULT_CONFIG }) : (_({ ...DEFAULT_CONFIG }), C({ ...DEFAULT_CONFIG }));
+	}, [
+		b,
+		s,
+		C
+	]);
+	useEffect(() => {
+		!b && c.length > 0 && C(h);
+	}, [
+		c,
+		b,
+		C,
+		h
+	]);
+	let E = (e, t) => e === "hueRotate" ? `${Math.round(t)}°` : t.toFixed(2);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `mapbox-raster-paint-control${l ? ` ${l}` : ""}`,
+		style: u,
+		children: [/* @__PURE__ */ jsxs("button", {
+			ref: y,
+			className: `mapbox-control-btn mapbox-raster-paint-control__btn${d ? " mapbox-raster-paint-control__btn--active" : ""}`,
+			onClick: () => f(!d),
+			title: "栅格渲染调节",
+			children: [/* @__PURE__ */ jsx("img", {
+				className: "mapbox-control-btn__icon mapbox-raster-paint-control__btn-icon",
+				src: raster_paint_default,
+				alt: "raster paint"
+			}), /* @__PURE__ */ jsx("span", { children: "渲染" })]
+		}), d && /* @__PURE__ */ jsxs("div", {
+			ref: v,
+			className: "mapbox-raster-paint-control__panel",
+			children: [SLIDER_CONFIG.map(({ key: e, label: t, min: n, max: r, step: i }) => /* @__PURE__ */ jsxs("div", {
+				className: "mapbox-raster-paint-control__slider-row",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "mapbox-raster-paint-control__label",
+						children: t
+					}),
+					/* @__PURE__ */ jsx(Slider, {
+						className: "mapbox-raster-paint-control__slider",
+						min: n,
+						max: r,
+						step: i,
+						value: x[e],
+						onChange: (t) => w(e, t),
+						tooltipVisible: !1
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "mapbox-raster-paint-control__value",
+						children: E(e, x[e])
+					})
+				]
+			}, e)), /* @__PURE__ */ jsx("button", {
+				className: "mapbox-raster-paint-control__reset",
+				onClick: T,
+				children: "重置"
+			})]
+		})]
+	});
+}
 var marker_default = "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='1769397418113'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='10253'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='128'%20height='128'%3e%3cpath%20d='M755.4048%20217.2928A348.3648%20348.3648%200%200%200%20512%20119.3472a348.3136%20348.3136%200%200%200-243.3536%2097.8944%20328.4992%20328.4992%200%200%200-100.864%20236.3392c0%2049.408%2011.7248%2095.744%2032%20137.728a378.0096%20378.0096%200%200%200%2091.136%20118.4256l203.5712%20179.456%2017.5104%2015.4624%2017.5104-15.4624%20203.4176-179.3536a378.6752%20378.6752%200%200%200%2091.2384-118.4768c20.2752-41.984%2032.0512-88.32%2032.0512-137.7792a328.448%20328.448%200%200%200-100.8128-236.288z%20m24.1152%20353.3824a329.216%20329.216%200%200%201-79.872%20103.0656l-188.0064%20164.6592-187.1872-164.7616a329.0624%20329.0624%200%200%201-79.7696-103.0144%20267.0592%20267.0592%200%200%201-27.136-117.0944c0-78.7968%2032.9728-150.1184%2086.272-201.728a298.3936%20298.3936%200%200%201%20208.2816-83.5584c81.3056%200%20154.9824%2031.9488%20208.2304%2083.6096a279.9104%20279.9104%200%200%201%2086.272%20201.728%20266.496%20266.496%200%200%201-27.0848%20117.0944z%20m-164.1472-212.1728l0.0512-0.0512a146.9952%20146.9952%200%200%200-104.2432-43.2128c-40.6528%200-77.568%2016.5376-104.2432%2043.2128l0.0512%200.0512a147.3536%20147.3536%200%200%200-0.0512%20208.6912%20147.0464%20147.0464%200%200%200%20208.4864%200%20147.5072%20147.5072%200%200%200-0.0512-208.6912z%20m-34.1504%20174.2336a97.536%2097.536%200%200%201-69.2736%2028.7232%2097.6384%2097.6384%200%200%201-69.3248-28.7232%2097.792%2097.792%200%200%201-0.1536-138.4448h0.1024a97.9456%2097.9456%200%200%201%20138.5984%200h0.1536c17.664%2017.6128%2028.5696%2042.1376%2028.5696%2069.2224a97.1776%2097.1776%200%200%201-28.672%2069.2224z'%20fill='%23ffffff'%20p-id='10254'%3e%3c/path%3e%3c/svg%3e";
-const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect: r, drawMode: o, onDrawModeChange: s, showRectangleTool: c = !1, showCircleTool: l = !1, showPolygonTool: u = !1, showSquareTool: d = !1, showPolylineTool: m = !1 }) => {
+const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect: r, drawMode: i, onDrawModeChange: s, showRectangleTool: c = !1, showCircleTool: l = !1, showPolygonTool: u = !1, showSquareTool: d = !1, showPolylineTool: f = !1 }) => {
 	let [h, g] = useState(!1), _ = useRef(null);
 	useEffect(() => {
 		let e = (e) => {
@@ -4090,24 +4236,24 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 	let v = (e) => {
 		t?.id === e.id ? (r(null), s(null)) : (r(e), s("marker")), g(!1);
 	}, y = () => {
-		o === "rectangle" ? s(null) : (r(null), s("rectangle"));
-	}, ge = () => {
-		o === "circle" ? s(null) : (r(null), s("circle"));
+		i === "rectangle" ? s(null) : (r(null), s("rectangle"));
 	}, b = () => {
-		o === "polygon" ? s(null) : (r(null), s("polygon"));
-	}, _e = () => {
-		o === "square" ? s(null) : (r(null), s("square"));
+		i === "circle" ? s(null) : (r(null), s("circle"));
 	}, x = () => {
-		o === "polyline" ? s(null) : (r(null), s("polyline"));
+		i === "polygon" ? s(null) : (r(null), s("polygon"));
 	}, S = () => {
-		(o === "rectangle" || o === "circle" || o === "polygon" || o === "square" || o === "polyline") && s(null), g(!h);
-	}, C = (e) => e.size ? {
+		i === "square" ? s(null) : (r(null), s("square"));
+	}, C = () => {
+		i === "polyline" ? s(null) : (r(null), s("polyline"));
+	}, w = () => {
+		(i === "rectangle" || i === "circle" || i === "polygon" || i === "square" || i === "polyline") && s(null), g(!h);
+	}, T = (e) => e.size ? {
 		width: e.size,
 		height: e.size
 	} : {
 		width: e.width || 32,
 		height: e.height || 32
-	}, w = h || t, ve = o === "rectangle", ye = o === "circle", T = o === "polygon", be = o === "square", xe = o === "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",
@@ -4115,8 +4261,8 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 			className: "mapbox-edit-control__btn-group",
 			children: [
 				/* @__PURE__ */ jsxs("button", {
-					className: `mapbox-control-btn ${w ? "mapbox-control-btn--active" : ""}`,
-					onClick: S,
+					className: `mapbox-control-btn ${E ? "mapbox-control-btn--active" : ""}`,
+					onClick: w,
 					title: "Marker",
 					children: [t ? /* @__PURE__ */ jsx("img", {
 						src: t.icon,
@@ -4129,8 +4275,8 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 					}), /* @__PURE__ */ jsx("span", { children: t ? t.name : "Marker" })]
 				}),
 				d && /* @__PURE__ */ jsxs("button", {
-					className: `mapbox-control-btn ${be ? "mapbox-control-btn--active" : ""}`,
-					onClick: _e,
+					className: `mapbox-control-btn ${ye ? "mapbox-control-btn--active" : ""}`,
+					onClick: S,
 					title: "绘制正方形",
 					children: [/* @__PURE__ */ jsx("img", {
 						src: "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3csvg%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='128'%3e%3crect%20x='192'%20y='192'%20width='640'%20height='640'%20rx='32'%20ry='32'%20fill='none'%20stroke='%23ffffff'%20stroke-width='64'/%3e%3c/svg%3e",
@@ -4139,7 +4285,7 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 					}), /* @__PURE__ */ jsx("span", { children: "正方形" })]
 				}),
 				c && /* @__PURE__ */ jsxs("button", {
-					className: `mapbox-control-btn ${ve ? "mapbox-control-btn--active" : ""}`,
+					className: `mapbox-control-btn ${D ? "mapbox-control-btn--active" : ""}`,
 					onClick: y,
 					title: "绘制矩形",
 					children: [/* @__PURE__ */ jsx("img", {
@@ -4149,8 +4295,8 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 					}), /* @__PURE__ */ jsx("span", { children: "矩形" })]
 				}),
 				l && /* @__PURE__ */ jsxs("button", {
-					className: `mapbox-control-btn ${ye ? "mapbox-control-btn--active" : ""}`,
-					onClick: ge,
+					className: `mapbox-control-btn ${O ? "mapbox-control-btn--active" : ""}`,
+					onClick: b,
 					title: "绘制圆形",
 					children: [/* @__PURE__ */ jsx("img", {
 						src: "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3csvg%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='128'%3e%3ccircle%20cx='512'%20cy='512'%20r='384'%20fill='none'%20stroke='%23ffffff'%20stroke-width='64'/%3e%3c/svg%3e",
@@ -4159,8 +4305,8 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 					}), /* @__PURE__ */ jsx("span", { children: "圆形" })]
 				}),
 				u && /* @__PURE__ */ jsxs("button", {
-					className: `mapbox-control-btn ${T ? "mapbox-control-btn--active" : ""}`,
-					onClick: b,
+					className: `mapbox-control-btn ${ve ? "mapbox-control-btn--active" : ""}`,
+					onClick: x,
 					title: "绘制多边形",
 					children: [/* @__PURE__ */ jsx("img", {
 						src: "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3csvg%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='128'%3e%3cpolygon%20points='512,128%20864,384%20736,800%20288,800%20160,384'%20fill='none'%20stroke='%23ffffff'%20stroke-width='64'%20stroke-linejoin='round'/%3e%3c/svg%3e",
@@ -4168,9 +4314,9 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 						className: "mapbox-edit-control__btn-icon mapbox-edit-control__btn-icon--lg"
 					}), /* @__PURE__ */ jsx("span", { children: "多边形" })]
 				}),
-				m && /* @__PURE__ */ jsxs("button", {
-					className: `mapbox-control-btn ${xe ? "mapbox-control-btn--active" : ""}`,
-					onClick: x,
+				f && /* @__PURE__ */ jsxs("button", {
+					className: `mapbox-control-btn ${k ? "mapbox-control-btn--active" : ""}`,
+					onClick: C,
 					title: "绘制折线",
 					children: [/* @__PURE__ */ jsx("img", {
 						src: "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3csvg%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='128'%3e%3cpolyline%20points='160,768%20384,256%20640,576%20864,192'%20fill='none'%20stroke='%23ffffff'%20stroke-width='64'%20stroke-linejoin='round'%20stroke-linecap='round'/%3e%3c/svg%3e",
@@ -4187,7 +4333,7 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 			}), /* @__PURE__ */ jsx("div", {
 				className: "mapbox-edit-control__template-list",
 				children: e.map((e) => {
-					let n = C(e), r = t?.id === e.id;
+					let n = T(e), r = t?.id === e.id;
 					return /* @__PURE__ */ jsxs("div", {
 						className: `mapbox-edit-control__template-item ${r ? "mapbox-edit-control__template-item--selected" : ""}`,
 						onClick: () => v(e),
@@ -4209,7 +4355,7 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 			})]
 		})]
 	});
-}, ContextMenu = ({ menuState: e, onClose: r, portalContainer: a, menuRef: o }) => {
+}, ContextMenu = ({ menuState: e, onClose: r, portalContainer: i, menuRef: o }) => {
 	let s = useRef(null);
 	useEffect(() => (o && (o.current = s.current), () => {
 		o && (o.current = null);
@@ -4232,7 +4378,7 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 		let e = s.current.getBoundingClientRect();
 		u.x + e.width > window.innerWidth && (u.x = window.innerWidth - e.width - 10), u.y + e.height > window.innerHeight && (u.y = window.innerHeight - e.height - 10);
 	}
-	let m = /* @__PURE__ */ jsx("div", {
+	let d = /* @__PURE__ */ jsx("div", {
 		ref: s,
 		className: "context-menu",
 		style: {
@@ -4255,7 +4401,7 @@ const EditControl = ({ markerTemplates: e, selectedTemplate: t, onTemplateSelect
 			})]
 		}, e.key))
 	});
-	return createPortal(m, a);
+	return createPortal(d, i);
 };
 function mergePopupConfig(e, t, n) {
 	return {
@@ -4403,52 +4549,52 @@ function adjustPopupForBounds(e, t) {
 	}, r = { ...e };
 	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, s) => {
-	let { center: c = [116.4074, 39.9042], zoom: l = 12, pitch: u = 0, bearing: d = 0, style: m = "mapbox://styles/mapbox/dark-v11", maxBounds: h, mode: g = "display", editConfig: _ = {}, pickerConfig: v = {}, onPick: y, interactive: ge = {}, layers: b = [], entities: x = [], selectedIds: S = [], entityConfig: C, nameConfig: w, selectNameConfig: T, areaConfig: E, circleConfig: D, lengthConfig: O, showCoordinates: k = !0, showScale: Ce = !0, showResetView: De = !0, showRoadHighlight: Oe = !1, showMeasure: ke = !1, popupDefaults: A, renderPopup: j, onMapLoad: Me, onEntityClick: Ne, onPopupOpen: Pe, onPopupClose: Fe, className: Ie = "", containerStyle: Le } = e, Re = useRef(null), M = useRef(null), N = useRef(/* @__PURE__ */ new Map()), P = useRef(/* @__PURE__ */ new Map()), ze = useRef(/* @__PURE__ */ new Set()), [F, Be] = useState(null), Ve = useRef(null), He = useRef(null), Ue = useRef(null), [We, Ge] = useState(null), Ke = useRef(null), qe = useRef(null), [Je, Ye] = useState(null), [I, Xe] = useState(g), [Ze, Qe] = useState(null), $e = useRef(null), [et, L] = useState(null), [tt, R] = useState(null), [nt, rt] = useState(null), z = useRef(!1), B = useRef(null), V = useRef(null), H = useRef(null), it = useRef(null), U = useRef(null), W = useRef([]), G = useRef(null), at = useRef(null), K = useRef(null), ot = useRef([]), q = useRef(null);
+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: 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(() => {
-		Xe(g);
-	}, [g]);
-	let st = useCallback((e) => {
-		let t = N.current.get(e), n = P.current.get(e);
+		$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) {
 				let r = {
 					...n,
 					isAnimating: !0
 				};
-				P.current.set(e, r), t.startAnimation();
+				I.current.set(e, r), t.startAnimation();
 			} else if (n.type === "circle" && t instanceof CanvasCircleRenderer) {
 				let r = {
 					...n,
 					isAnimating: !0
 				};
-				P.current.set(e, r), t.startAnimation();
+				I.current.set(e, r), t.startAnimation();
 			}
 		}
-	}, []), ct = useCallback((e) => {
-		let t = N.current.get(e), n = P.current.get(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) {
 				let r = {
 					...n,
 					isAnimating: !1
 				};
-				P.current.set(e, r), t.stopAnimation();
+				I.current.set(e, r), t.stopAnimation();
 			} else if (n.type === "circle" && t instanceof CanvasCircleRenderer) {
 				let r = {
 					...n,
 					isAnimating: !1
 				};
-				P.current.set(e, r), t.stopAnimation();
+				I.current.set(e, r), t.stopAnimation();
 			}
 		}
-	}, []), lt = useCallback((e) => {
-		let t = P.current.get(e);
-		t && (t.type === "radar" || t.type === "circle") && (t.type, t.isAnimating ? ct(e) : st(e));
-	}, [st, ct]), ut = useCallback((e) => {
+	}, []), pt = useCallback((e) => {
+		let t = I.current.get(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 N.current) if (t instanceof UnitRenderer) {
+			for (let [, t] of F.current) if (t instanceof UnitRenderer) {
 				let n = t.getShowTrajectory();
 				if (n === "all" || typeof n == "number" && n > 0) {
 					e = !0;
@@ -4456,46 +4602,46 @@ const Mapbox = forwardRef((e, s) => {
 				}
 			}
 			let t = e ? 0 : "all";
-			for (let [, e] of N.current) e instanceof UnitRenderer && e.setShowTrajectory(t);
+			for (let [, e] of F.current) e instanceof UnitRenderer && e.setShowTrajectory(t);
 		} else {
 			let t = new Set(e.map(String));
-			for (let [e, n] of N.current) n instanceof UnitRenderer && n.setShowTrajectory(t.has(String(e)) ? "all" : 0);
+			for (let [e, n] of F.current) n instanceof UnitRenderer && n.setShowTrajectory(t.has(String(e)) ? "all" : 0);
 		}
-	}, []), dt = useCallback((e, t, n) => {
-		let r = x.find((t) => String(t.id) === String(e));
-		if (!r?.popup || !M.current) return;
-		let i = r.popup.content ?? j?.(r);
+	}, []), 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);
 		if (!i) return;
-		let a = mergePopupConfig(r.popup, A, i), { position: o, actualPosition: s } = calculatePopupPosition(r, a, M.current, n);
-		Be({
+		let a = mergePopupConfig(r.popup, N, i), { position: o, actualPosition: s } = calculatePopupPosition(r, a, P.current, n);
+		Ue({
 			entityId: e,
 			position: o,
 			config: a,
 			openedBy: t,
 			actualPosition: s
-		}), Pe?.(e);
+		}), Le?.(e);
 	}, [
-		x,
-		A,
-		j,
-		Pe
-	]), ft = useCallback((e) => {
-		F?.entityId === e && (Be(null), Fe?.(e));
-	}, [F, Fe]), pt = useCallback(() => {
-		Be((e) => (e && Fe?.(e.entityId), null));
-	}, [Fe]), mt = useCallback((e) => F?.entityId === e, [F]), ht = useCallback((e, t, n) => {
-		let r = M.current;
+		T,
+		N,
+		Pe,
+		Le
+	]), gt = useCallback((e) => {
+		L?.entityId === e && (Ue(null), Re?.(e));
+	}, [L, Re]), _t = useCallback(() => {
+		Ue((e) => (e && Re?.(e.entityId), null));
+	}, [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
 		});
-	}, []), gt = useCallback((e, t, n) => {
-		let r = M.current;
+	}, []), bt = useCallback((e, t, n) => {
+		let r = P.current;
 		if (!r || e.length === 0) return;
 		let i = [];
 		for (let t of e) {
-			let e = N.current.get(t);
+			let e = F.current.get(t);
 			e && i.push(e.getBounds());
 		}
 		if (i.length === 0) return;
@@ -4517,82 +4663,88 @@ const Mapbox = forwardRef((e, s) => {
 			pitch: n?.pitch ?? r.getPitch()
 		};
 		t !== void 0 && (p.maxZoom = t), n?.essential !== void 0 && (p.essential = n.essential), r.fitBounds(f, p);
-	}, []), _t = useCallback((e) => {
-		let t = M.current;
+	}, []), xt = useCallback((e) => {
+		let t = P.current;
 		if (!t || !t.getContainer()) return;
-		let { showMarker: n = !0, markerColor: r = "#3388ff" } = v;
+		let { showMarker: n = !0, markerColor: r = "#3388ff" } = y;
 		if (!n) {
-			$e.current &&= ($e.current.remove(), null);
+			nt.current &&= (nt.current.remove(), null);
 			return;
 		}
-		if ($e.current) $e.current.setLngLat(e);
+		if (nt.current) nt.current.setLngLat(e);
 		else {
 			let n = document.createElement("div");
 			n.className = "mapbox-picker-marker";
 			let i = document.createElement("div");
-			i.className = "marker-inner", i.style.background = r, n.appendChild(i), $e.current = new mapboxgl.Marker({
+			i.className = "marker-inner", i.style.background = r, n.appendChild(i), nt.current = new mapboxgl.Marker({
 				element: n,
 				anchor: "bottom"
 			}).setLngLat(e).addTo(t);
 		}
-	}, [v]), vt = useCallback(() => {
-		$e.current &&= ($e.current.remove(), null);
-	}, []), yt = useCallback(() => `marker-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`, []), bt = useCallback((e) => {
-		let t = M.current;
-		if (Re.current) if (q.current &&= (q.current.remove(), null), e && t) {
+	}, [y]), St = useCallback(() => {
+		nt.current &&= (nt.current.remove(), null);
+	}, []), Ct = useCallback(() => `marker-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`, []), wt = useCallback((e) => {
+		let t = P.current;
+		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), q.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) => {
-				q.current && (q.current.style.left = `${e.clientX}px`, q.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 = "");
-	}, []), J = useCallback(() => {
-		if (q.current) {
-			let e = q.current._cleanup;
-			e && e(), q.current.remove(), q.current = null;
+	}, []), Y = useCallback(() => {
+		if (J.current) {
+			let e = J.current._cleanup;
+			e && e(), J.current.remove(), J.current = null;
 		}
-		let e = M.current;
+		let e = P.current;
 		e && (e.getCanvas().style.cursor = "");
-	}, []), Y = 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);
 			}
-		}));
-	}, []), xt = useCallback(() => {
-		let e = M.current;
+			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", {
 			type: "geojson",
 			data: {
@@ -4616,9 +4768,9 @@ const Mapbox = forwardRef((e, s) => {
 				"line-width": 2,
 				"line-dasharray": [4, 4]
 			}
-		}), Y(e, "rect-preview-measure-source", "rect-preview-measure-label")));
-	}, [Y]), St = useCallback((e, t) => {
-		let n = M.current;
+		}), 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");
 		if (!r) return;
@@ -4637,11 +4789,11 @@ const Mapbox = forwardRef((e, s) => {
 			},
 			properties: {}
 		});
-		let l = B.current, u = l?.strokeColor ?? "#3388ff", d = l?.strokeWidth ?? 2, f = l?.fillColor ?? "#3388ff", p = l?.fillOpacity ?? .1;
+		let l = H.current, u = l?.strokeColor ?? "#3388ff", d = l?.strokeWidth ?? 2, f = l?.fillColor ?? "#3388ff", p = l?.fillOpacity ?? .1;
 		n.getLayer("rect-preview-line") && (n.setPaintProperty("rect-preview-line", "line-color", u), n.setPaintProperty("rect-preview-line", "line-width", d)), n.getLayer("rect-preview-fill") && (n.setPaintProperty("rect-preview-fill", "fill-color", f), n.setPaintProperty("rect-preview-fill", "fill-opacity", p));
 		let m = n.getSource("rect-preview-measure-source");
 		if (m) {
-			let e = yn.current, t = [], n = c[0], r = c[1], i = c[2];
+			let e = Tn.current, t = [], n = c[0], r = c[1], i = c[2];
 			if (e?.showArea) {
 				let e = [(n[0] + i[0]) / 2, (n[1] + i[1]) / 2], a = distance(n, r), o = distance(r, i);
 				t.push({
@@ -4678,8 +4830,8 @@ const Mapbox = forwardRef((e, s) => {
 				features: t
 			});
 		}
-	}, []), Ct = useCallback(() => {
-		let e = M.current;
+	}, []), Dt = useCallback(() => {
+		let e = P.current;
 		if (!e) return;
 		let t = e.getSource("rect-preview-source");
 		t && t.setData({
@@ -4691,10 +4843,10 @@ const Mapbox = forwardRef((e, s) => {
 			type: "FeatureCollection",
 			features: []
 		});
-	}, []), X = useCallback(() => {
-		rt(null), Ct();
-	}, [Ct]), wt = useCallback(() => {
-		let e = M.current;
+	}, []), Z = useCallback(() => {
+		ot(null), Dt();
+	}, [Dt]), Ot = useCallback(() => {
+		let e = P.current;
 		e && (e.getSource("circle-preview-source") || (e.addSource("circle-preview-source", {
 			type: "geojson",
 			data: {
@@ -4718,7 +4870,7 @@ const Mapbox = forwardRef((e, s) => {
 				"line-width": 2,
 				"line-dasharray": [4, 4]
 			}
-		}), Y(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",
@@ -4735,22 +4887,22 @@ const Mapbox = forwardRef((e, s) => {
 				"line-dasharray": [4, 4]
 			}
 		}))));
-	}, [Y]), Tt = 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;
 			a.push([d, u]);
 		}
 		return a;
-	}, []), Et = useCallback((e, t) => {
+	}, []), At = useCallback((e, t) => {
 		let [n, r] = e, [i, a] = t, o = (a - r) * Math.PI / 180, s = (i - n) * Math.PI / 180, c = Math.sin(o / 2) * Math.sin(o / 2) + Math.cos(r * Math.PI / 180) * Math.cos(a * Math.PI / 180) * Math.sin(s / 2) * Math.sin(s / 2);
 		return 6371e3 * (2 * Math.atan2(Math.sqrt(c), Math.sqrt(1 - c)));
-	}, []), Dt = useCallback((e, t) => {
-		let n = M.current;
+	}, []), jt = useCallback((e, t) => {
+		let n = P.current;
 		if (!n) return;
 		let r = n.getSource("circle-preview-source");
 		if (!r) return;
-		let i = Et(e, t), a = Tt(e, i);
+		let i = At(e, t), a = kt(e, i);
 		r.setData({
 			type: "Feature",
 			geometry: {
@@ -4759,9 +4911,9 @@ const Mapbox = forwardRef((e, s) => {
 			},
 			properties: {}
 		});
-		let o = H.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2, l = o?.fillColor ?? "#3388ff", u = o?.fillOpacity ?? .1;
+		let o = W.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2, l = o?.fillColor ?? "#3388ff", u = o?.fillOpacity ?? .1;
 		n.getLayer("circle-preview-line") && (n.setPaintProperty("circle-preview-line", "line-color", s), n.setPaintProperty("circle-preview-line", "line-width", c)), n.getLayer("circle-preview-fill") && (n.setPaintProperty("circle-preview-fill", "fill-color", l), n.setPaintProperty("circle-preview-fill", "fill-opacity", u));
-		let d = yn.current, f = [], p = [];
+		let d = Tn.current, f = [], p = [];
 		if (d?.showArea) {
 			let t = Math.PI * i * i;
 			f.push({
@@ -4774,7 +4926,7 @@ const Mapbox = forwardRef((e, s) => {
 			});
 		}
 		if (d?.showRadius) {
-			let t = H.current?.radiusAngle ?? 90, n = destinationPoint(e, i, t), r = [(e[0] + n[0]) / 2, (e[1] + n[1]) / 2];
+			let t = W.current?.radiusAngle ?? 90, n = destinationPoint(e, i, t), r = [(e[0] + n[0]) / 2, (e[1] + n[1]) / 2];
 			p.push({
 				type: "Feature",
 				geometry: {
@@ -4801,8 +4953,8 @@ const Mapbox = forwardRef((e, s) => {
 			type: "FeatureCollection",
 			features: p
 		});
-	}, [Et, Tt]), Ot = useCallback(() => {
-		let e = M.current;
+	}, [At, kt]), Mt = useCallback(() => {
+		let e = P.current;
 		if (!e) return;
 		let t = e.getSource("circle-preview-source");
 		t && t.setData({
@@ -4819,10 +4971,10 @@ const Mapbox = forwardRef((e, s) => {
 			type: "FeatureCollection",
 			features: []
 		});
-	}, []), kt = useCallback(() => {
-		it.current = null, Ot();
-	}, [Ot]), At = useCallback(() => {
-		let e = M.current;
+	}, []), Nt = useCallback(() => {
+		st.current = null, Mt();
+	}, [Mt]), Pt = useCallback(() => {
+		let e = P.current;
 		e && (e.getSource("polygon-preview-source") || (e.addSource("polygon-preview-source", {
 			type: "geojson",
 			data: {
@@ -4862,9 +5014,9 @@ const Mapbox = forwardRef((e, s) => {
 				"circle-stroke-color": "#ffffff",
 				"circle-stroke-width": 2
 			}
-		}), Y(e, "polygon-preview-measure-source", "polygon-preview-measure-label")));
-	}, [Y]), jt = useCallback((e, t) => {
-		let n = M.current;
+		}), 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");
 		if (!r || !i) return;
@@ -4901,11 +5053,11 @@ const Mapbox = forwardRef((e, s) => {
 				properties: {}
 			}))
 		});
-		let o = U.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2, l = o?.fillColor ?? "#3388ff", u = o?.fillOpacity ?? .1;
+		let o = G.current, s = o?.strokeColor ?? "#3388ff", c = o?.strokeWidth ?? 2, l = o?.fillColor ?? "#3388ff", u = o?.fillOpacity ?? .1;
 		n.getLayer("polygon-preview-line") && (n.setPaintProperty("polygon-preview-line", "line-color", s), n.setPaintProperty("polygon-preview-line", "line-width", c)), n.getLayer("polygon-preview-fill") && (n.setPaintProperty("polygon-preview-fill", "fill-color", l), n.setPaintProperty("polygon-preview-fill", "fill-opacity", u)), n.getLayer("polygon-vertices") && n.setPaintProperty("polygon-vertices", "circle-color", s);
 		let d = n.getSource("polygon-preview-measure-source");
 		if (d) {
-			let e = yn.current, t = [];
+			let e = Tn.current, t = [];
 			if (e?.showArea && a.length >= 3) {
 				let e = [...a, a[0]], n = polygonArea(e), r = 0, i = 0;
 				for (let e of a) r += e[0], i += e[1];
@@ -4947,8 +5099,8 @@ const Mapbox = forwardRef((e, s) => {
 				features: t
 			});
 		}
-	}, []), Mt = useCallback(() => {
-		let e = M.current;
+	}, []), It = useCallback(() => {
+		let e = P.current;
 		if (!e) return;
 		let t = e.getSource("polygon-preview-source");
 		t && t.setData({
@@ -4965,10 +5117,10 @@ const Mapbox = forwardRef((e, s) => {
 			type: "FeatureCollection",
 			features: []
 		});
-	}, []), Nt = useCallback(() => {
-		W.current = [], Mt();
-	}, [Mt]), Pt = useCallback(() => {
-		let e = M.current;
+	}, []), Lt = useCallback(() => {
+		ct.current = [], It();
+	}, [It]), Rt = useCallback(() => {
+		let e = P.current;
 		e && (e.getSource("square-preview-source") || (e.addSource("square-preview-source", {
 			type: "geojson",
 			data: {
@@ -4992,8 +5144,8 @@ const Mapbox = forwardRef((e, s) => {
 				"line-width": 2,
 				"line-dasharray": [4, 4]
 			}
-		}), Y(e, "square-preview-measure-source", "square-preview-measure-label")));
-	}, [Y]), Ft = 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],
@@ -5002,12 +5154,12 @@ const Mapbox = forwardRef((e, s) => {
 			[n - s, r - o],
 			[n - s, r + o]
 		];
-	}, []), It = useCallback((e, t) => {
-		let n = M.current;
+	}, []), Bt = useCallback((e, t) => {
+		let n = P.current;
 		if (!n) return;
 		let r = n.getSource("square-preview-source");
 		if (!r) return;
-		let i = Et(e, t) * 2, a = Ft(e, i);
+		let i = At(e, t) * 2, a = zt(e, i);
 		r.setData({
 			type: "Feature",
 			geometry: {
@@ -5016,11 +5168,11 @@ const Mapbox = forwardRef((e, s) => {
 			},
 			properties: {}
 		});
-		let o = G.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) {
-			let t = yn.current, n = [];
+			let t = Tn.current, n = [];
 			if (t?.showArea && n.push({
 				type: "Feature",
 				geometry: {
@@ -5044,8 +5196,8 @@ const Mapbox = forwardRef((e, s) => {
 				features: n
 			});
 		}
-	}, [Et, Ft]), Lt = useCallback(() => {
-		let e = M.current;
+	}, [At, zt]), Vt = useCallback(() => {
+		let e = P.current;
 		if (!e) return;
 		let t = e.getSource("square-preview-source");
 		t && t.setData({
@@ -5057,10 +5209,10 @@ const Mapbox = forwardRef((e, s) => {
 			type: "FeatureCollection",
 			features: []
 		});
-	}, []), Rt = useCallback(() => {
-		at.current = null, Lt();
-	}, [Lt]), zt = useCallback(() => {
-		let e = M.current;
+	}, []), Ht = useCallback(() => {
+		lt.current = null, Vt();
+	}, [Vt]), Ut = useCallback(() => {
+		let e = P.current;
 		e && (e.getSource("polyline-preview-source") || (e.addSource("polyline-preview-source", {
 			type: "geojson",
 			data: {
@@ -5092,9 +5244,9 @@ const Mapbox = forwardRef((e, s) => {
 				"circle-stroke-color": "#ffffff",
 				"circle-stroke-width": 2
 			}
-		}), Y(e, "polyline-preview-measure-source", "polyline-preview-measure-label")));
-	}, [Y]), Bt = useCallback((e, t) => {
-		let n = M.current;
+		}), 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");
 		if (!r || !i) return;
@@ -5120,11 +5272,11 @@ const Mapbox = forwardRef((e, s) => {
 				properties: {}
 			}))
 		});
-		let o = K.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) {
-			let e = yn.current, t = [];
+			let e = Tn.current, t = [];
 			if (e?.showLength && a.length >= 2) for (let e = 0; e < a.length - 1; e++) {
 				let n = a[e], r = a[e + 1], i = [(n[0] + r[0]) / 2, (n[1] + r[1]) / 2];
 				t.push({
@@ -5141,8 +5293,8 @@ const Mapbox = forwardRef((e, s) => {
 				features: t
 			});
 		}
-	}, []), Vt = useCallback(() => {
-		let e = M.current;
+	}, []), Gt = useCallback(() => {
+		let e = P.current;
 		if (!e) return;
 		let t = e.getSource("polyline-preview-source");
 		t && t.setData({
@@ -5159,147 +5311,147 @@ const Mapbox = forwardRef((e, s) => {
 			type: "FeatureCollection",
 			features: []
 		});
-	}, []), Z = useCallback(() => {
-		ot.current = [], Vt();
-	}, [Vt]), Ht = useCallback((e) => {
-		L(e), bt(e), e ? (R("marker"), X(), kt(), Nt(), Rt(), Z()) : R(null);
+	}, []), Q = useCallback(() => {
+		ut.current = [], Gt();
+	}, [Gt]), Kt = useCallback((e) => {
+		z(e), wt(e), e ? (B("marker"), Z(), Nt(), Lt(), Ht(), Q()) : B(null);
 	}, [
-		bt,
-		X,
-		kt,
+		wt,
+		Z,
 		Nt,
-		Rt,
-		Z
-	]), Ut = useCallback((e) => {
-		if (R(e), e === "rectangle") {
-			L(null), J(), kt(), Nt(), Rt(), Z();
-			let e = M.current;
+		Lt,
+		Ht,
+		Q
+	]), qt = useCallback((e) => {
+		if (B(e), e === "rectangle") {
+			z(null), Y(), Nt(), Lt(), Ht(), Q();
+			let e = P.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "circle") {
-			L(null), J(), X(), Nt(), Rt(), Z();
-			let e = M.current;
+			z(null), Y(), Z(), Lt(), Ht(), Q();
+			let e = P.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "polygon") {
-			L(null), J(), X(), kt(), Rt(), Z();
-			let e = M.current;
+			z(null), Y(), Z(), Nt(), Ht(), Q();
+			let e = P.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "square") {
-			L(null), J(), X(), kt(), Nt(), Z();
-			let e = M.current;
+			z(null), Y(), Z(), Nt(), Lt(), Q();
+			let e = P.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
 		} else if (e === "polyline") {
-			L(null), J(), X(), kt(), Nt(), Rt();
-			let e = M.current;
+			z(null), Y(), Z(), Nt(), Lt(), Ht();
+			let e = P.current;
 			e && (e.getCanvas().style.cursor = "crosshair");
-		} else e === "marker" ? (X(), kt(), Nt(), Rt(), Z()) : (L(null), J(), X(), kt(), Nt(), Rt(), Z());
+		} else e === "marker" ? (Z(), Nt(), Lt(), Ht(), Q()) : (z(null), Y(), Z(), Nt(), Lt(), Ht(), Q());
 	}, [
-		J,
-		X,
-		kt,
+		Y,
+		Z,
 		Nt,
-		Rt,
-		Z
-	]), Wt = useCallback((e) => {
-		e !== "picker" && (vt(), Qe(null)), e !== "edit" && (L(null), R(null), X(), Z(), J()), Xe(e);
+		Lt,
+		Ht,
+		Q
+	]), Jt = useCallback((e) => {
+		e !== "picker" && (St(), tt(null)), e !== "edit" && (z(null), B(null), Z(), Q(), Y()), $e(e);
 	}, [
-		vt,
-		J,
-		X,
-		Z
-	]), Gt = useCallback(() => I, [I]), Kt = useCallback(() => Ze, [Ze]), qt = useCallback(() => {
-		vt(), Qe(null);
-	}, [vt]);
+		St,
+		Y,
+		Z,
+		Q
+	]), Yt = useCallback(() => R, [R]), Xt = useCallback(() => et, [et]), Zt = useCallback(() => {
+		St(), tt(null);
+	}, [St]);
 	useEffect(() => {
-		if (!Je || I !== "picker") return;
-		let e = v.value;
+		if (!Ze || R !== "picker") return;
+		let e = y.value;
 		if (e) {
 			let t = [e.lng, e.lat];
-			Qe(e), _t(t);
+			tt(e), xt(t);
 		}
 	}, [
-		v.value,
-		I,
-		_t,
-		Je
+		y.value,
+		R,
+		xt,
+		Ze
 	]);
-	let Jt = (e) => "mode" in e, Yt = useCallback((e) => {
-		if (Xe("edit"), vt(), Qe(null), z.current = !0, Jt(e)) {
-			if (e.mode === "marker") e.markerStyle ? (V.current = e.markerStyle, B.current = null, H.current = null, U.current = null, G.current = null, K.current = null, L(null), R("marker"), e.markerStyle.src && e.markerStyle.width ? bt({
+	let Qt = (e) => "mode" in e, $t = useCallback((e) => {
+		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
-			}) : J()) : e.template && (V.current = null, B.current = null, H.current = null, U.current = null, G.current = null, K.current = null, L(e.template), R("marker"), bt(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") {
-				B.current = e.rectangleStyle || null, V.current = null, H.current = null, U.current = null, G.current = null, K.current = null, L(null), R("rectangle"), J();
-				let t = M.current;
+				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") {
-				H.current = e.circleStyle || null, B.current = null, V.current = null, U.current = null, G.current = null, K.current = null, L(null), R("circle"), J();
-				let t = M.current;
+				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") {
-				U.current = e.polygonStyle || null, B.current = null, V.current = null, H.current = null, G.current = null, K.current = null, L(null), R("polygon"), J();
-				let t = M.current;
+				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") {
-				G.current = e.squareStyle || null, B.current = null, V.current = null, H.current = null, U.current = null, K.current = null, L(null), R("square"), J();
-				let t = M.current;
+				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") {
-				K.current = e.polylineStyle || null, B.current = null, V.current = null, H.current = null, U.current = null, G.current = null, L(null), R("polyline"), J();
-				let t = M.current;
+				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 L(e), R("marker"), bt(e), B.current = null, V.current = null, H.current = null, U.current = null, G.current = null, K.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;
 	}, [
-		vt,
-		bt,
-		J
+		St,
+		wt,
+		Y
 	]);
-	useImperativeHandle(s, () => ({
-		startAnimation: st,
-		stopAnimation: ct,
-		toggleAnimation: lt,
-		getMap: () => M.current,
-		openPopup: (e) => dt(e, "programmatic"),
-		closePopup: ft,
-		closeAllPopups: pt,
-		isPopupOpen: mt,
-		toggleUnitTrajectory: ut,
-		flyTo: ht,
-		flyToEntities: gt,
-		getMode: Gt,
-		setMode: Wt,
-		getPickedLocation: Kt,
-		clearPickedLocation: qt,
-		startDrawing: Yt,
-		getRenderer: (e) => N.current.get(e)
+	useImperativeHandle(c, () => ({
+		startAnimation: dt,
+		stopAnimation: ft,
+		toggleAnimation: pt,
+		getMap: () => P.current,
+		openPopup: (e) => ht(e, "programmatic"),
+		closePopup: gt,
+		closeAllPopups: _t,
+		isPopupOpen: vt,
+		toggleUnitTrajectory: mt,
+		flyTo: yt,
+		flyToEntities: bt,
+		getMode: Yt,
+		setMode: Jt,
+		getPickedLocation: Xt,
+		clearPickedLocation: Zt,
+		startDrawing: $t,
+		getRenderer: (e) => F.current.get(e)
 	}), [
-		st,
-		ct,
-		lt,
 		dt,
 		ft,
 		pt,
-		mt,
-		ut,
 		ht,
 		gt,
-		Gt,
-		Wt,
-		Kt,
-		qt,
-		Yt
+		_t,
+		vt,
+		mt,
+		yt,
+		bt,
+		Yt,
+		Jt,
+		Xt,
+		Zt,
+		$t
 	]);
-	let Xt = useCallback(() => {
-		let e = M.current;
+	let en = useCallback(() => {
+		let e = P.current;
 		if (!e) return;
-		let t = new Set(x.map((e) => e.id)), n = new Set(N.current.keys());
-		for (let e of n) t.has(e) || (N.current.get(e)?.destroy(), N.current.delete(e));
-		let r = new Set(S.map(String));
-		for (let t of x) {
-			let n = applyEntityConfig(t, C), i = N.current.get(n.id);
+		let t = new Set(T.map((e) => e.id)), n = new Set(F.current.keys());
+		for (let e of n) t.has(e) || (F.current.get(e)?.destroy(), F.current.delete(e));
+		let r = new Set(E.map(String));
+		for (let t of T) {
+			let n = applyEntityConfig(t, D), i = F.current.get(n.id);
 			if (i) if (n.type === "radar" && i instanceof CanvasRadarRenderer) i.update(n);
 			else if (n.type === "image" && i instanceof CanvasImageRenderer) i.update(n);
 			else if (n.type === "marker" && i instanceof MarkerRenderer) i.update(n);
@@ -5308,34 +5460,34 @@ const Mapbox = forwardRef((e, s) => {
 			else if (n.type === "circle") if (n.fillType === "radial-gradient") if (i instanceof CanvasCircleRenderer) i.update(n);
 			else {
 				i.destroy();
-				let t = new CanvasCircleRenderer(e, n, w, T, E, D);
-				N.current.set(n.id, t), t.setSelected(r.has(String(n.id)));
+				let t = new CanvasCircleRenderer(e, n, O, k, A, j);
+				F.current.set(n.id, t), t.setSelected(r.has(String(n.id)));
 			}
 			else if (i instanceof CircleRenderer) i.update(n);
 			else {
 				i.destroy();
-				let t = new CircleRenderer(e, n, w, T, E, D);
-				N.current.set(n.id, t), t.setSelected(r.has(String(n.id)));
+				let t = new CircleRenderer(e, n, O, k, A, j);
+				F.current.set(n.id, t), t.setSelected(r.has(String(n.id)));
 			}
 			else (n.type === "square" && i instanceof SquareRenderer || n.type === "rectangle" && i instanceof RectangleRenderer || n.type === "polyline" && i instanceof PolylineRenderer) && i.update(n);
 			else {
 				let t = null;
-				n.type === "radar" ? t = new CanvasRadarRenderer(e, n, w, T) : n.type === "image" ? t = new CanvasImageRenderer(e, n, w, T) : n.type === "marker" ? t = new MarkerRenderer(e, n, w, T) : n.type === "unit" ? t = new UnitRenderer(e, n, w, T) : n.type === "polygon" ? t = new PolygonRenderer(e, n, w, T, E, O) : n.type === "circle" ? t = n.fillType === "radial-gradient" ? new CanvasCircleRenderer(e, n, w, T, E, D) : new CircleRenderer(e, n, w, T, E, D) : n.type === "square" ? t = new SquareRenderer(e, n, w, T, E, O) : n.type === "rectangle" ? t = new RectangleRenderer(e, n, w, T, E, O) : n.type === "polyline" && (t = new PolylineRenderer(e, n, w, T, O)), t && (N.current.set(n.id, t), t.setSelected(r.has(String(n.id))));
+				n.type === "radar" ? t = new CanvasRadarRenderer(e, n, O, k) : n.type === "image" ? t = new CanvasImageRenderer(e, n, O, k) : n.type === "marker" ? t = new MarkerRenderer(e, n, O, k) : n.type === "unit" ? t = new UnitRenderer(e, n, O, k) : n.type === "polygon" ? t = new PolygonRenderer(e, n, O, k, A, M) : n.type === "circle" ? t = n.fillType === "radial-gradient" ? new CanvasCircleRenderer(e, n, O, k, A, j) : new CircleRenderer(e, n, O, k, A, j) : n.type === "square" ? t = new SquareRenderer(e, n, O, k, A, M) : n.type === "rectangle" ? t = new RectangleRenderer(e, n, O, k, A, M) : n.type === "polyline" && (t = new PolylineRenderer(e, n, O, k, M)), t && (F.current.set(n.id, t), t.setSelected(r.has(String(n.id))));
 			}
 		}
 	}, [
-		x,
-		S,
-		C,
-		w,
 		T,
 		E,
 		D,
-		O
-	]), Zt = useCallback(() => {
-		for (let e of N.current.values()) e.destroy();
-		N.current.clear();
-	}, []), Qt = useCallback((e) => {
+		O,
+		k,
+		A,
+		j,
+		M
+	]), tn = useCallback(() => {
+		for (let e of F.current.values()) e.destroy();
+		F.current.clear();
+	}, []), nn = useCallback((e) => {
 		let t = e.getStyle();
 		if (!t?.layers) return;
 		let n = [
@@ -5350,31 +5502,32 @@ const Mapbox = forwardRef((e, s) => {
 			"marker-"
 		];
 		for (let e of t.layers) if (n.some((t) => e.id.startsWith(t))) return e.id;
-	}, []), $t = useCallback((e, t) => {
-		let n = `base-layer-source-${t.id}`, r = `base-layer-${t.id}`;
-		e.addSource(n, {
+	}, []), rn = useCallback((e) => {
+		let t = C, n = { "raster-opacity": e.opacity ?? 1 }, r = e.brightness ?? t?.brightness, i = e.saturation ?? t?.saturation, a = e.contrast ?? t?.contrast, o = e.hueRotate ?? t?.hueRotate;
+		return r !== void 0 && (n["raster-brightness-min"] = 0, n["raster-brightness-max"] = r), i !== void 0 && (n["raster-saturation"] = i), a !== void 0 && (n["raster-contrast"] = a), o !== void 0 && (n["raster-hue-rotate"] = o), n;
+	}, [C]), an = useCallback((e, t) => {
+		let n = `base-layer-source-${t.id}`, r = `base-layer-${t.id}`, i = {
 			type: "raster",
 			tiles: [t.url],
 			tileSize: t.tileSize ?? 256,
 			minzoom: t.minzoom ?? 0,
 			maxzoom: t.maxzoom ?? 22,
-			scheme: t.scheme ?? "xyz",
-			bounds: t.bounds,
-			attribution: t.attribution
-		});
-		let i = Qt(e);
+			scheme: t.scheme ?? "xyz"
+		};
+		t.bounds && (i.bounds = t.bounds), t.attribution && (i.attribution = t.attribution), e.addSource(n, i);
+		let a = nn(e);
 		e.addLayer({
 			id: r,
 			type: "raster",
 			source: n,
-			paint: { "raster-opacity": t.opacity ?? 1 },
+			paint: rn(t),
 			layout: { visibility: t.visible === !1 ? "none" : "visible" }
-		}, i);
-	}, [Qt]), en = useCallback(async (e, t) => {
+		}, a);
+	}, [nn, rn]), on = useCallback(async (e, t) => {
 		try {
 			let n = await (await fetch(t.url)).json(), r = `base-layer-source-${t.id}`, i = `base-layer-${t.id}`;
-			if (!ze.current.has(t.id)) return;
-			let a = n.format === "pbf" || n.vector_layers, o = Qt(e);
+			if (!He.current.has(t.id)) return;
+			let a = n.format === "pbf" || n.vector_layers, o = nn(e);
 			a ? (e.addSource(r, {
 				type: "vector",
 				tiles: n.tiles,
@@ -5394,21 +5547,21 @@ const Mapbox = forwardRef((e, s) => {
 				id: i,
 				type: "raster",
 				source: r,
-				paint: { "raster-opacity": t.opacity ?? 1 },
+				paint: rn(t),
 				layout: { visibility: t.visible === !1 ? "none" : "visible" }
 			}, o));
 		} catch (e) {
 			console.error(`Failed to load TileJSON from ${t.url}:`, e);
 		}
-	}, [Qt]), tn = useCallback(async (e, t) => {
+	}, [nn, rn]), sn = useCallback(async (e, t) => {
 		try {
 			let n = await (await fetch(t.url)).json();
-			if (!ze.current.has(t.id)) return;
+			if (!He.current.has(t.id)) return;
 			if (n.sources) for (let [r, i] of Object.entries(n.sources)) {
 				let n = `base-layer-source-${t.id}-${r}`;
 				e.getSource(n) || e.addSource(n, i);
 			}
-			let r = Qt(e);
+			let r = nn(e);
 			if (n.layers) for (let i of n.layers) {
 				let n = `base-layer-${t.id}-${i.id}`;
 				if (e.getLayer(n)) continue;
@@ -5417,57 +5570,65 @@ const Mapbox = forwardRef((e, s) => {
 					id: n,
 					source: i.source ? `base-layer-source-${t.id}-${i.source}` : void 0
 				};
-				i.type === "raster" && t.opacity !== void 0 && (a.paint = {
+				i.type === "raster" && (a.paint = {
 					...a.paint,
-					"raster-opacity": t.opacity
+					...rn(t)
 				}), t.visible === !1 && (a.layout = {
 					...a.layout,
 					visibility: "none"
 				}), e.addLayer(a, r);
 			}
-			n.glyphs && console.warn("Style JSON 包含 glyphs 配置，但无法动态添加。建议通过 Mapbox 组件的 style prop 设置。");
+			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);
 		}
-	}, [Qt]), nn = useCallback((e, t) => {
+	}, [nn, rn]), cn = useCallback((e, t) => {
 		let n = e.getStyle();
 		if (!n) return;
 		let r = `base-layer-${t}`, i = n.layers?.filter((e) => e.id.startsWith(r)) ?? [];
 		for (let t of i) e.getLayer(t.id) && e.removeLayer(t.id);
 		let a = `base-layer-source-${t}`, o = n.sources ?? {};
 		for (let t of Object.keys(o)) t.startsWith(a) && e.getSource(t) && e.removeSource(t);
-	}, []), rn = useCallback((e) => {
-		let t = M.current;
+	}, []), ln = useCallback((e) => {
+		let t = P.current;
 		if (!t) return;
-		let n = new Set(e.map((e) => e.id)), r = ze.current;
-		for (let e of r) n.has(e) || (nn(t, e), r.delete(e));
+		let n = new Set(e.map((e) => e.id)), r = He.current;
+		for (let e of r) n.has(e) || (cn(t, e), r.delete(e));
 		for (let n of e) if (r.has(n.id)) {
 			let e = `base-layer-${n.id}`;
-			t.getLayer(e) && (n.opacity !== void 0 && t.setPaintProperty(e, "raster-opacity", n.opacity), t.setLayoutProperty(e, "visibility", n.visible === !1 ? "none" : "visible"));
+			if (t.getLayer(e)) {
+				let r = rn(n);
+				for (let [n, i] of Object.entries(r)) t.setPaintProperty(e, n, i);
+				t.setLayoutProperty(e, "visibility", n.visible === !1 ? "none" : "visible");
+			}
 		} else switch (r.add(n.id), n.type) {
 			case "raster":
-				$t(t, n);
+				an(t, n);
 				break;
 			case "tilejson":
-				en(t, n);
+				on(t, n);
 				break;
 			case "style":
-				tn(t, n);
+				sn(t, n);
 				break;
 			default: {
 				let e = n;
-				e.url && $t(t, {
+				e.url && an(t, {
 					...e,
 					type: "raster"
 				});
 			}
 		}
 	}, [
-		$t,
-		en,
-		tn,
-		nn
-	]), an = useCallback((e) => {
+		an,
+		on,
+		sn,
+		cn,
+		rn
+	]), un = useCallback((e) => {
 		let t = e;
 		for (; t;) {
 			let e = t.getAttribute?.("data-entity-id");
@@ -5475,293 +5636,293 @@ const Mapbox = forwardRef((e, s) => {
 			t = t.parentElement;
 		}
 		return null;
-	}, []), on = useCallback((e) => {
+	}, []), dn = useCallback((e) => {
 		let t = [e.lngLat.lng, e.lngLat.lat], n = {
 			x: e.point.x,
 			y: e.point.y
-		}, r = mn.current;
+		}, r = yn.current;
 		if (r === "picker") {
 			let e = {
 				lng: t[0],
 				lat: t[1]
 			};
-			Qe(e), _t(t), hn.current?.(e);
+			tt(e), xt(t), bn.current?.(e);
 			return;
 		}
 		if (r === "edit") {
-			let e = _n.current;
+			let e = Sn.current;
 			if (e === "rectangle") {
-				let e = vn.current;
-				if (!e) rt(t);
+				let e = Cn.current;
+				if (!e) ot(t);
 				else {
-					let n = B.current, r = applyEntityConfig({
+					let n = H.current, r = applyEntityConfig({
 						...n,
-						id: n?.id ?? yt(),
+						id: n?.id ?? Ct(),
 						type: "rectangle",
 						bounds: [e, t]
-					}, C);
-					Ct();
-					let i = M.current;
-					if (i && !N.current.has(r.id)) {
-						let e = new RectangleRenderer(i, r, w, T, E, O);
-						N.current.set(r.id, e);
+					}, D);
+					Dt();
+					let i = P.current;
+					if (i && !F.current.has(r.id)) {
+						let e = new RectangleRenderer(i, r, O, k, A, M);
+						F.current.set(r.id, e);
 					}
-					Q.current.onRectangleAdd?.(r), rt(null), B.current = null, z.current && (z.current = !1, R(null), i && (i.getCanvas().style.cursor = ""));
+					wn.current.onRectangleAdd?.(r), ot(null), H.current = null, V.current && (V.current = !1, B(null), i && (i.getCanvas().style.cursor = ""));
 				}
 				return;
 			}
 			if (e === "circle") {
-				let e = it.current;
-				if (!e) it.current = { center: t };
+				let e = st.current;
+				if (!e) st.current = { center: t };
 				else {
-					let n = Et(e.center, t), r = H.current, i = applyEntityConfig({
+					let n = At(e.center, t), r = W.current, i = applyEntityConfig({
 						...r,
-						id: r?.id ?? yt(),
+						id: r?.id ?? Ct(),
 						type: "circle",
 						center: e.center,
 						radius: n
-					}, C);
-					Ot();
-					let a = M.current;
-					if (a && !N.current.has(i.id)) {
-						let e = new CircleRenderer(a, i, w, T, E, D);
-						N.current.set(i.id, e);
+					}, D);
+					Mt();
+					let a = P.current;
+					if (a && !F.current.has(i.id)) {
+						let e = new CircleRenderer(a, i, O, k, A, j);
+						F.current.set(i.id, e);
 					}
-					Q.current.onCircleAdd?.(i), it.current = null, H.current = null, z.current && (z.current = !1, R(null), a && (a.getCanvas().style.cursor = ""));
+					wn.current.onCircleAdd?.(i), st.current = null, W.current = null, V.current && (V.current = !1, B(null), a && (a.getCanvas().style.cursor = ""));
 				}
 				return;
 			}
 			if (e === "polygon") {
-				let e = W.current;
+				let e = ct.current;
 				if (e.length >= 3) {
 					let n = e[0];
-					if (Et(n, t) < 20) {
-						let t = U.current, n = applyEntityConfig({
+					if (At(n, t) < 20) {
+						let t = G.current, n = applyEntityConfig({
 							...t,
-							id: t?.id ?? yt(),
+							id: t?.id ?? Ct(),
 							type: "polygon",
 							coordinates: [...e]
-						}, C);
-						Mt();
-						let r = M.current;
-						if (r && !N.current.has(n.id)) {
-							let e = new PolygonRenderer(r, n, w, T, E, O);
-							N.current.set(n.id, e);
+						}, D);
+						It();
+						let r = P.current;
+						if (r && !F.current.has(n.id)) {
+							let e = new PolygonRenderer(r, n, O, k, A, M);
+							F.current.set(n.id, e);
 						}
-						Q.current.onPolygonAdd?.(n), W.current = [], U.current = null, z.current && (z.current = !1, R(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;
 					}
 				}
-				W.current = [...e, t];
+				ct.current = [...e, t];
 				return;
 			}
 			if (e === "square") {
-				let e = at.current;
-				if (!e) at.current = { center: t };
+				let e = lt.current;
+				if (!e) lt.current = { center: t };
 				else {
-					let n = Et(e.center, t) * 2, r = G.current, i = applyEntityConfig({
+					let n = At(e.center, t) * 2, r = K.current, i = applyEntityConfig({
 						...r,
-						id: r?.id ?? yt(),
+						id: r?.id ?? Ct(),
 						type: "square",
 						center: e.center,
 						length: n
-					}, C);
-					Lt();
-					let a = M.current;
-					if (a && !N.current.has(i.id)) {
-						let e = new SquareRenderer(a, i, w, T, E, O);
-						N.current.set(i.id, e);
+					}, D);
+					Vt();
+					let a = P.current;
+					if (a && !F.current.has(i.id)) {
+						let e = new SquareRenderer(a, i, O, k, A, M);
+						F.current.set(i.id, e);
 					}
-					Q.current.onSquareAdd?.(i), at.current = null, G.current = null, z.current && (z.current = !1, R(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") {
-				ot.current = [...ot.current, t];
+				ut.current = [...ut.current, t];
 				return;
 			}
-			let n = V.current;
+			let n = U.current;
 			if (n && n.src && n.width) {
 				let e = {
 					...n,
-					id: n.id ?? yt(),
+					id: n.id ?? Ct(),
 					type: "marker",
 					center: t,
 					src: n.src,
 					width: n.width
 				};
-				Q.current.onMarkerAdd?.(e), L(null), R(null), J(), V.current = null, z.current = !1;
+				wn.current.onMarkerAdd?.(e), z(null), B(null), Y(), U.current = null, V.current = !1;
 				return;
 			}
-			let r = gn.current;
+			let r = xn.current;
 			if (r) {
 				let e = {
-					id: yt(),
+					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), Q.current.onMarkerAdd?.(e), L(null), R(null), J(), z.current = !1;
+				r.customData !== void 0 && (e.customData = r.customData), wn.current.onMarkerAdd?.(e), z(null), B(null), Y(), V.current = !1;
 				return;
 			}
 		}
-		let i = dn.current, a = fn.current, o = pn.current, s = an(e.originalEvent.target);
+		let i = gn.current, a = _n.current, o = vn.current, s = un(e.originalEvent.target);
 		if (s) {
 			let e = i.find((e) => String(e.id) === s);
 			if (e) {
 				if (a?.(e), e.popup) {
-					let t = e.popup.content ?? j?.(e);
-					t && mergePopupConfig(e.popup, A, t).trigger === "click" && o(s, "click", n);
+					let t = e.popup.content ?? Pe?.(e);
+					t && mergePopupConfig(e.popup, N, t).trigger === "click" && o(s, "click", n);
 				}
 				return;
 			}
 		}
-		for (let [t, r] of N.current) {
+		for (let [t, r] of F.current) {
 			let s = r.getLabelLayerId();
-			if (s && M.current?.getLayer(s) && M.current.queryRenderedFeatures(e.point, { layers: [s] }).length > 0) {
+			if (s && P.current?.getLayer(s) && P.current.queryRenderedFeatures(e.point, { layers: [s] }).length > 0) {
 				let e = i.find((e) => e.id === t);
 				if (e) {
 					if (a?.(e), e.popup) {
-						let r = e.popup.content ?? j?.(e);
-						r && mergePopupConfig(e.popup, A, r).trigger === "click" && o(t, "click", n);
+						let r = e.popup.content ?? Pe?.(e);
+						r && mergePopupConfig(e.popup, N, r).trigger === "click" && o(t, "click", n);
 					}
 					return;
 				}
 			}
 		}
-		for (let [e, r] of N.current) if (r.isPointInEntity(t)) {
+		for (let [e, r] of F.current) if (r.isPointInEntity(t)) {
 			let t = i.find((t) => t.id === e);
 			if (t) {
 				if (a?.(t), t.popup) {
-					let r = t.popup.content ?? j?.(t);
-					r && mergePopupConfig(t.popup, A, r).trigger === "click" && o(e, "click", n);
+					let r = t.popup.content ?? Pe?.(t);
+					r && mergePopupConfig(t.popup, N, r).trigger === "click" && o(e, "click", n);
 				}
 				return;
 			}
 		}
 	}, [
-		A,
-		j,
-		an
-	]), sn = useCallback((e) => {
-		let t = [e.lngLat.lng, e.lngLat.lat], n = _n.current, r = vn.current;
-		n === "rectangle" && r && St(r, t);
-		let i = it.current;
-		n === "circle" && i && Dt(i.center, t);
-		let a = W.current;
-		n === "polygon" && a.length > 0 && jt(a, t);
-		let o = at.current;
-		n === "square" && o && It(o.center, t);
-		let s = ot.current;
-		n === "polyline" && s.length > 0 && Bt(s, t);
-		let c = dn.current, l = pn.current;
-		for (let [e, n] of N.current) if (n.isPointInEntity(t)) {
+		N,
+		Pe,
+		un
+	]), fn = useCallback((e) => {
+		let t = [e.lngLat.lng, e.lngLat.lat], n = Sn.current, r = Cn.current;
+		n === "rectangle" && r && Et(r, t);
+		let i = st.current;
+		n === "circle" && i && jt(i.center, t);
+		let a = ct.current;
+		n === "polygon" && a.length > 0 && Ft(a, t);
+		let o = lt.current;
+		n === "square" && o && Bt(o.center, t);
+		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)) {
 			let t = c.find((t) => t.id === e);
 			if (!t?.popup) continue;
-			let n = t.popup.content ?? j?.(t);
+			let n = t.popup.content ?? Pe?.(t);
 			if (!n) continue;
-			let r = mergePopupConfig(t.popup, A, n);
+			let r = mergePopupConfig(t.popup, N, n);
 			if (r.trigger === "hover") {
-				Ue.current && clearTimeout(Ue.current), Ue.current = window.setTimeout(() => {
+				Ke.current && clearTimeout(Ke.current), Ke.current = window.setTimeout(() => {
 					l(e, "hover");
 				}, r.hoverDelay);
 				return;
 			}
 		}
-		if (Ue.current &&= (clearTimeout(Ue.current), null), F?.openedBy === "hover") {
-			let e = N.current.get(F.entityId);
-			e && !e.isPointInEntity(t) && ft(F.entityId);
+		if (Ke.current &&= (clearTimeout(Ke.current), null), L?.openedBy === "hover") {
+			let e = F.current.get(L.entityId);
+			e && !e.isPointInEntity(t) && gt(L.entityId);
 		}
 	}, [
-		A,
-		j,
-		F,
-		ft,
-		St,
-		Dt,
+		N,
+		Pe,
+		L,
+		gt,
+		Et,
 		jt,
-		It,
-		Bt
-	]), cn = useCallback((e) => {
-		if (e.preventDefault(), mn.current !== "edit") return;
-		if (gn.current) {
-			L(null), R(null), J();
+		Ft,
+		Bt,
+		Wt
+	]), pn = useCallback((e) => {
+		if (e.preventDefault(), yn.current !== "edit") return;
+		if (xn.current) {
+			z(null), B(null), Y();
 			return;
 		}
-		let t = _n.current;
+		let t = Sn.current;
 		if (t === "rectangle") {
-			if (vn.current) rt(null), Ct();
+			if (Cn.current) ot(null), Dt();
 			else {
-				R(null);
-				let e = M.current;
+				B(null);
+				let e = P.current;
 				e && (e.getCanvas().style.cursor = "");
 			}
 			return;
 		}
 		if (t === "circle") {
-			if (it.current) it.current = null, Ot();
+			if (st.current) st.current = null, Mt();
 			else {
-				R(null);
-				let e = M.current;
+				B(null);
+				let e = P.current;
 				e && (e.getCanvas().style.cursor = "");
 			}
 			return;
 		}
 		if (t === "polygon") {
-			let e = W.current;
+			let e = ct.current;
 			if (e.length >= 3) {
-				let t = U.current, n = applyEntityConfig({
+				let t = G.current, n = applyEntityConfig({
 					...t,
-					id: t?.id ?? yt(),
+					id: t?.id ?? Ct(),
 					type: "polygon",
 					coordinates: [...e]
-				}, C);
-				Mt();
-				let r = M.current;
-				if (r && !N.current.has(n.id)) {
-					let e = new PolygonRenderer(r, n, w, T, E, O);
-					N.current.set(n.id, e);
+				}, D);
+				It();
+				let r = P.current;
+				if (r && !F.current.has(n.id)) {
+					let e = new PolygonRenderer(r, n, O, k, A, M);
+					F.current.set(n.id, e);
 				}
-				Q.current.onPolygonAdd?.(n), W.current = [], U.current = null, z.current && (z.current = !1, R(null), r && (r.getCanvas().style.cursor = ""));
-			} else if (e.length > 0) W.current = [], Mt();
+				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 {
-				R(null);
-				let e = M.current;
+				B(null);
+				let e = P.current;
 				e && (e.getCanvas().style.cursor = "");
 			}
 			return;
 		}
 		if (t === "square") {
-			if (at.current) at.current = null, Lt();
+			if (lt.current) lt.current = null, Vt();
 			else {
-				R(null);
-				let e = M.current;
+				B(null);
+				let e = P.current;
 				e && (e.getCanvas().style.cursor = "");
 			}
 			return;
 		}
 		if (t === "polyline") {
-			let e = ot.current;
+			let e = ut.current;
 			if (e.length >= 2) {
-				let t = K.current, n = applyEntityConfig({
+				let t = q.current, n = applyEntityConfig({
 					...t,
-					id: t?.id ?? yt(),
+					id: t?.id ?? Ct(),
 					type: "polyline",
 					coordinates: [...e]
-				}, C);
-				Vt();
-				let r = M.current;
-				if (r && !N.current.has(n.id)) {
-					let e = new PolylineRenderer(r, n, w, T, O);
-					N.current.set(n.id, e);
+				}, D);
+				Gt();
+				let r = P.current;
+				if (r && !F.current.has(n.id)) {
+					let e = new PolylineRenderer(r, n, O, k, M);
+					F.current.set(n.id, e);
 				}
-				Q.current.onPolylineAdd?.(n), ot.current = [], K.current = null, z.current && (z.current = !1, R(null), r && (r.getCanvas().style.cursor = ""));
-			} else if (e.length > 0) ot.current = [], Vt();
+				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 {
-				R(null);
-				let e = M.current;
+				B(null);
+				let e = P.current;
 				e && (e.getCanvas().style.cursor = "");
 			}
 			return;
@@ -5769,45 +5930,45 @@ const Mapbox = forwardRef((e, s) => {
 		let n = [e.lngLat.lng, e.lngLat.lat], r = {
 			x: e.point.x,
 			y: e.point.y
-		}, i = dn.current, a = an(e.originalEvent.target);
+		}, i = gn.current, a = un(e.originalEvent.target);
 		if (a) {
 			let e = i.find((e) => String(e.id) === a);
 			if (e) {
-				ln(e, r, n);
+				mn(e, r, n);
 				return;
 			}
 		}
-		for (let [t, a] of N.current) {
+		for (let [t, a] of F.current) {
 			let o = a.getLabelLayerId();
-			if (o && M.current?.getLayer(o) && M.current.queryRenderedFeatures(e.point, { layers: [o] }).length > 0) {
+			if (o && P.current?.getLayer(o) && P.current.queryRenderedFeatures(e.point, { layers: [o] }).length > 0) {
 				let e = i.find((e) => e.id === t);
 				if (e) {
-					ln(e, r, n);
+					mn(e, r, n);
 					return;
 				}
 			}
 		}
-		for (let [e, t] of N.current) if (t.isPointInEntity(n)) {
+		for (let [e, t] of F.current) if (t.isPointInEntity(n)) {
 			let t = i.find((t) => t.id === e);
 			if (t) {
-				ln(t, r, n);
+				mn(t, r, n);
 				return;
 			}
 		}
 	}, [
-		an,
-		J,
-		Ct,
-		Ot,
+		un,
+		Y,
+		Dt,
 		Mt,
-		Lt,
-		Vt
-	]), ln = useCallback((e, t, n) => {
-		let r = Re.current?.getBoundingClientRect(), i = r ? {
+		It,
+		Vt,
+		Gt
+	]), mn = useCallback((e, t, n) => {
+		let r = Ve.current?.getBoundingClientRect(), i = r ? {
 			x: t.x + r.left,
 			y: t.y + r.top
 		} : t;
-		Ge({
+		Je({
 			position: i,
 			lngLat: n,
 			items: [{
@@ -5823,12 +5984,12 @@ const Mapbox = forwardRef((e, s) => {
 				}),
 				danger: !0,
 				onClick: () => {
-					Q.current.onEntityDelete?.(e);
+					wn.current.onEntityDelete?.(e);
 				}
 			}]
 		});
-	}, []), un = useCallback(() => {
-		Ge(null);
+	}, []), hn = useCallback(() => {
+		Je(null);
 	}, []);
 	useEffect(() => {
 		let e = document.createElement("div");
@@ -5839,11 +6000,11 @@ const Mapbox = forwardRef((e, s) => {
 			width: 100%;
 			pointer-events: none;
 			height: 100%;
-			z-index: ${A?.zIndex ?? 1e3};
-		`, document.body.appendChild(e), Ve.current = e, () => {
+			z-index: ${N?.zIndex ?? 1e3};
+		`, document.body.appendChild(e), We.current = e, () => {
 			document.body.contains(e) && document.body.removeChild(e);
 		};
-	}, [A?.zIndex]), useEffect(() => {
+	}, [N?.zIndex]), useEffect(() => {
 		let e = document.createElement("div");
 		return e.id = `mapbox-context-menu-container-${Date.now()}`, e.style.cssText = `
 			position: fixed;
@@ -5852,61 +6013,61 @@ const Mapbox = forwardRef((e, s) => {
 			width: 100%;
 			pointer-events: none;
 			height: 100%;
-			z-index: ${(A?.zIndex ?? 1e3) + 100};
-		`, document.body.appendChild(e), Ke.current = e, () => {
+			z-index: ${(N?.zIndex ?? 1e3) + 100};
+		`, document.body.appendChild(e), Ye.current = e, () => {
 			document.body.contains(e) && document.body.removeChild(e);
 		};
-	}, [A?.zIndex]);
-	let dn = useRef(x);
-	dn.current = x;
-	let fn = useRef(Ne);
-	fn.current = Ne;
-	let pn = useRef(dt);
-	pn.current = dt;
-	let mn = useRef(I);
-	mn.current = I;
-	let hn = useRef(y);
-	hn.current = y;
-	let gn = useRef(et);
-	gn.current = et;
-	let _n = useRef(tt);
-	_n.current = tt;
-	let vn = useRef(nt);
-	vn.current = nt;
-	let Q = useRef(_);
-	Q.current = _;
-	let yn = useRef(C);
-	yn.current = C, useEffect(() => {
+	}, [N?.zIndex]);
+	let gn = useRef(T);
+	gn.current = T;
+	let _n = useRef(Ie);
+	_n.current = Ie;
+	let vn = useRef(ht);
+	vn.current = ht;
+	let yn = useRef(R);
+	yn.current = R;
+	let bn = useRef(b);
+	bn.current = b;
+	let xn = useRef(rt);
+	xn.current = rt;
+	let Sn = useRef(it);
+	Sn.current = it;
+	let Cn = useRef(at);
+	Cn.current = at;
+	let wn = useRef(v);
+	wn.current = v;
+	let Tn = useRef(D);
+	Tn.current = D, useEffect(() => {
 		let e = (e) => {
-			if (e.key === "Escape" && I === "edit") {
-				if (et && (L(null), R(null), J()), tt === "rectangle") if (nt) rt(null), Ct();
+			if (e.key === "Escape" && R === "edit") {
+				if (rt && (z(null), B(null), Y()), it === "rectangle") if (at) ot(null), Dt();
 				else {
-					R(null);
-					let e = M.current;
+					B(null);
+					let e = P.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (tt === "circle") if (it.current) it.current = null, Ot();
+				if (it === "circle") if (st.current) st.current = null, Mt();
 				else {
-					R(null);
-					let e = M.current;
+					B(null);
+					let e = P.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (tt === "polygon") if (W.current.length > 0) W.current = [], Mt();
+				if (it === "polygon") if (ct.current.length > 0) ct.current = [], It();
 				else {
-					R(null);
-					let e = M.current;
+					B(null);
+					let e = P.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (tt === "square") if (at.current) at.current = null, Lt();
+				if (it === "square") if (lt.current) lt.current = null, Vt();
 				else {
-					R(null);
-					let e = M.current;
+					B(null);
+					let e = P.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
-				if (tt === "polyline") if (ot.current.length > 0) ot.current = [], Vt();
+				if (it === "polyline") if (ut.current.length > 0) ut.current = [], Gt();
 				else {
-					R(null);
-					let e = M.current;
+					B(null);
+					let e = P.current;
 					e && (e.getCanvas().style.cursor = "");
 				}
 			}
@@ -5915,71 +6076,71 @@ const Mapbox = forwardRef((e, s) => {
 			document.removeEventListener("keydown", e);
 		};
 	}, [
-		I,
-		et,
-		tt,
-		nt,
-		J,
-		Ct,
-		Ot,
+		R,
+		rt,
+		it,
+		at,
+		Y,
+		Dt,
 		Mt,
-		Lt,
-		Vt
+		It,
+		Vt,
+		Gt
 	]), useEffect(() => {
-		let e = M.current;
-		if (!e || !F) return;
-		let t = F.entityId, n = F.config, r = () => {
-			let r = dn.current.find((e) => e.id === t);
+		let e = P.current;
+		if (!e || !L) return;
+		let t = L.entityId, n = L.config, r = () => {
+			let r = gn.current.find((e) => e.id === t);
 			if (!r) {
-				pt();
+				_t();
 				return;
 			}
-			let { position: i } = calculatePopupPosition(r, n, e, void 0, He.current);
-			He.current && (He.current.style.left = `${i.x}px`, He.current.style.top = `${i.y}px`);
+			let { position: i } = calculatePopupPosition(r, n, e, void 0, Ge.current);
+			Ge.current && (Ge.current.style.left = `${i.x}px`, Ge.current.style.top = `${i.y}px`);
 		}, i = setTimeout(() => {
 			r();
 		}, 50);
 		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);
 		};
-	}, [F?.entityId, pt]), useEffect(() => {
-		let e = M.current, t = Re.current;
-		if (!e || !We || !t) return;
-		let n = We.lngLat, r = () => {
+	}, [L?.entityId, _t]), useEffect(() => {
+		let e = P.current, t = Ve.current;
+		if (!e || !qe || !t) return;
+		let n = qe.lngLat, r = () => {
 			let r = e.project(n), i = t.clientWidth, a = t.clientHeight;
 			if (r.x < 0 || r.x > i || r.y < 0 || r.y > a) {
-				un();
+				hn();
 				return;
 			}
 			let o = t.getBoundingClientRect(), s = r.x + o.left, c = r.y + o.top;
-			qe.current && (qe.current.style.left = `${s}px`, qe.current.style.top = `${c}px`);
+			Xe.current && (Xe.current.style.left = `${s}px`, Xe.current.style.top = `${c}px`);
 		};
 		return e.on("move", r), e.on("zoom", r), e.on("rotate", r), e.on("pitch", r), () => {
 			e.off("move", r), e.off("zoom", r), e.off("rotate", r), e.off("pitch", r);
 		};
-	}, [We?.lngLat, un]), useEffect(() => {
-		if (!Re.current) return;
+	}, [qe?.lngLat, hn]), useEffect(() => {
+		if (!Ve.current) return;
 		let e = {
 			version: 8,
 			sources: {},
 			layers: []
-		}, { dragPan: t = !0, scrollZoom: n = !0, doubleClickZoom: r = !0, touchZoomRotate: i = !0, keyboard: a = !0, dragRotate: s = !0, pitchWithRotate: f = !0, touchPitch: p = !0, boxZoom: g = !0 } = ge, _ = new mapboxgl.Map({
-			container: Re.current,
-			style: m || e,
-			center: c,
-			zoom: l,
-			pitch: u,
-			bearing: d,
-			maxBounds: h,
+		}, { dragPan: t = !0, scrollZoom: n = !0, doubleClickZoom: r = !0, touchZoomRotate: i = !0, keyboard: a = !0, dragRotate: o = !0, pitchWithRotate: c = !0, touchPitch: p = !0, boxZoom: m = !0 } = x, _ = new mapboxgl.Map({
+			container: Ve.current,
+			style: h || e,
+			center: l,
+			zoom: u,
+			pitch: d,
+			bearing: f,
+			maxBounds: g,
 			dragPan: t,
 			scrollZoom: n,
 			doubleClickZoom: r,
 			touchZoomRotate: i,
 			keyboard: a,
-			dragRotate: s,
-			pitchWithRotate: f,
+			dragRotate: o,
+			pitchWithRotate: c,
 			touchPitch: p,
-			boxZoom: g,
+			boxZoom: m,
 			transformRequest: (e, t) => {
 				if (t === "Glyphs") {
 					let t = e.match(/\/fonts\/([^/]+)\/(\d+-\d+)\.pbf/);
@@ -5991,156 +6152,181 @@ const Mapbox = forwardRef((e, s) => {
 				return { url: e };
 			}
 		});
-		return M.current = _, _.on("load", () => {
-			P.current.clear(), x.forEach((e) => {
-				P.current.set(e.id, e);
-			}), rn(b), Xt(), xt(), wt(), At(), Pt(), zt(), Ye(_), Me?.(_);
-		}), _.on("click", on), _.on("mousemove", sn), _.on("contextmenu", cn), () => {
-			_.off("click", on), _.off("mousemove", sn), _.off("contextmenu", cn), Zt(), vt(), J(), X(), Z(), _.remove(), M.current = null;
+		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(), St(), Y(), Z(), Q(), _.remove(), P.current = null;
 		};
 	}, []), useEffect(() => {
-		if (M.current) {
-			if (!M.current.isStyleLoaded()) {
-				M.current.once("load", () => {
-					P.current.clear(), x.forEach((e) => {
-						P.current.set(e.id, e);
-					}), Xt();
+		if (P.current) {
+			if (!P.current.isStyleLoaded()) {
+				P.current.once("load", () => {
+					I.current.clear(), T.forEach((e) => {
+						I.current.set(e.id, e);
+					}), en();
 				});
 				return;
 			}
-			P.current.clear(), x.forEach((e) => {
-				P.current.set(e.id, e);
-			}), Xt();
+			I.current.clear(), T.forEach((e) => {
+				I.current.set(e.id, e);
+			}), en();
 		}
-	}, [x, Xt]), useEffect(() => {
-		!M.current || !M.current.isStyleLoaded() || (Zt(), Xt());
+	}, [T, en]), useEffect(() => {
+		!P.current || !P.current.isStyleLoaded() || (tn(), en());
 	}, [
-		w,
-		T,
-		E,
-		D,
 		O,
-		Zt,
-		Xt
+		k,
+		A,
+		j,
+		M,
+		tn,
+		en
 	]), useEffect(() => {
-		if (M.current) {
-			if (!M.current.isStyleLoaded()) {
-				M.current.once("load", () => {
-					rn(b);
+		if (P.current) {
+			if (!P.current.isStyleLoaded()) {
+				P.current.once("load", () => {
+					ln(S);
 				});
 				return;
 			}
-			rn(b);
+			ln(S);
 		}
-	}, [b, rn]);
-	let bn = useRef(void 0), xn = useRef(!0), Sn = useRef(b);
-	Sn.current = b;
-	let Cn = useRef(rn);
-	Cn.current = rn;
-	let wn = useRef(Zt);
-	wn.current = Zt;
-	let Tn = useRef(Xt);
-	Tn.current = Xt;
-	let En = useRef(xt);
-	En.current = xt;
-	let Dn = useRef(wt);
-	Dn.current = wt;
-	let On = useRef(At);
-	On.current = At;
-	let kn = useRef(Pt);
-	kn.current = Pt;
-	let An = useRef(zt);
-	An.current = zt, useEffect(() => {
-		let e = M.current;
+	}, [S, ln]);
+	let En = useRef(void 0), Dn = useRef(!0), On = useRef(S);
+	On.current = S;
+	let kn = useRef(ln);
+	kn.current = ln;
+	let An = useRef(tn);
+	An.current = tn;
+	let jn = useRef(en);
+	jn.current = en;
+	let Mn = useRef(Tt);
+	Mn.current = Tt;
+	let Nn = useRef(Ot);
+	Nn.current = Ot;
+	let Pn = useRef(Pt);
+	Pn.current = Pt;
+	let Fn = useRef(Rt);
+	Fn.current = Rt;
+	let In = useRef(Ut);
+	In.current = Ut, useEffect(() => {
+		let e = P.current;
 		if (!e) return;
-		let t = m || {
+		let t = h || {
 			version: 8,
 			sources: {},
 			layers: []
 		};
-		if (xn.current) {
-			xn.current = !1, bn.current = m;
+		if (Dn.current) {
+			Dn.current = !1, En.current = h;
 			return;
 		}
-		bn.current !== m && (bn.current = m, e.setStyle(t), e.once("style.load", () => {
-			ze.current.clear(), Cn.current(Sn.current), wn.current(), Tn.current(), En.current(), Dn.current(), On.current(), kn.current(), An.current();
+		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();
 		}));
-	}, [m]), useEffect(() => {
-		let e = new Set(S.map(String));
-		for (let [t, n] of N.current) n.setSelected(e.has(String(t)));
-	}, [S]);
-	let jn = useRef({});
+	}, [h]), useEffect(() => {
+		let e = new Set(E.map(String));
+		for (let [t, n] of F.current) n.setSelected(e.has(String(t)));
+	}, [E]);
+	let Ln = useRef({});
 	useEffect(() => {
-		let e = M.current;
+		let e = P.current;
 		if (!e) return;
-		let t = jn.current, n = c && (t.center?.[0] !== c[0] || t.center?.[1] !== c[1]), r = t.zoom !== l, i = t.pitch !== u, a = t.bearing !== d;
-		!n && !r && !i && !a || (jn.current = {
-			center: c,
-			zoom: l,
-			pitch: u,
-			bearing: d
+		let t = Ln.current, n = l && (t.center?.[0] !== l[0] || t.center?.[1] !== l[1]), r = t.zoom !== u, i = t.pitch !== d, a = t.bearing !== f;
+		!n && !r && !i && !a || (Ln.current = {
+			center: l,
+			zoom: u,
+			pitch: d,
+			bearing: f
 		}, e.jumpTo({
-			center: c,
-			zoom: l,
-			pitch: u,
-			bearing: d
+			center: l,
+			zoom: u,
+			pitch: d,
+			bearing: f
 		}));
 	}, [
-		c,
 		l,
 		u,
-		d
+		d,
+		f
 	]);
-	let Mn = (() => k === !1 ? null : k === !0 ? { enabled: !0 } : k)(), Nn = (() => Ce === !1 ? null : Ce === !0 ? { enabled: !0 } : Ce)(), Pn = (() => De === !1 ? null : De === !0 ? { enabled: !0 } : De)(), $ = (() => {
-		if (Oe === !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 (b && b.length > 0) {
-			let n = b.find((e) => e.hasRoadNetwork === !0) || b[0];
-			e = n.id, t = n.roadNetworkSourceLayer || "road";
+		if (S && S.length > 0) {
+			let n = S.find((e) => e.hasRoadNetwork === !0) || S[0];
+			if (n.type === "style") {
+				let t = P.current?.getStyle();
+				if (t?.sources) {
+					let r = `base-layer-source-${n.id}-`, i = Object.keys(t.sources).find((e) => e.startsWith(r));
+					i && (e = i);
+				}
+			} else e = `base-layer-source-${n.id}`;
+			t = n.roadNetworkSourceLayer || "road";
 		}
-		return Oe === !0 ? {
+		return De === !0 ? {
 			enabled: !0,
 			source: e,
 			sourceLayer: t
 		} : {
-			...Oe,
-			source: Oe.source || e,
-			sourceLayer: Oe.sourceLayer || t
+			...De,
+			source: De.source || e,
+			sourceLayer: De.sourceLayer || t
 		};
-	})(), Fn = (() => ke ? ke === !0 ? { enabled: !0 } : ke : null)();
+	})(), 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;
+			if (n) {
+				let r = `base-layer-${t.id}-`, i = n.getStyle();
+				if (i?.layers) for (let t of i.layers) t.id.startsWith(r) && t.type === "raster" && e.push(t.id);
+			}
+		} else e.push(`base-layer-${t.id}`);
+		return e;
+	}, [S, Ze]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: `comp-mapbox ${I === "picker" ? "comp-mapbox--picker-mode" : ""} ${Ie}`,
-		style: Le,
+		className: `comp-mapbox ${R === "picker" ? "comp-mapbox--picker-mode" : ""} ${ze}`,
+		style: Be,
 		children: [
 			/* @__PURE__ */ jsx("div", {
-				ref: Re,
+				ref: Ve,
 				className: "comp-mapbox__map"
 			}),
-			I === "picker" && v.showCrosshair === !0 && /* @__PURE__ */ jsxs("div", {
+			R === "picker" && y.showCrosshair === !0 && /* @__PURE__ */ jsxs("div", {
 				className: "comp-mapbox__crosshair",
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "comp-mapbox__crosshair-h",
-					style: v.crosshairColor ? { backgroundColor: v.crosshairColor } : void 0
+					style: y.crosshairColor ? { backgroundColor: y.crosshairColor } : void 0
 				}), /* @__PURE__ */ jsx("div", {
 					className: "comp-mapbox__crosshair-v",
-					style: v.crosshairColor ? { backgroundColor: v.crosshairColor } : void 0
+					style: y.crosshairColor ? { backgroundColor: y.crosshairColor } : void 0
 				})]
 			}),
-			I === "edit" && _.showEditTools !== !1 && (_.markerTemplates && _.markerTemplates.length > 0 || _.showRectangleTool || _.showCircleTool || _.showPolygonTool || _.showSquareTool || _.showPolylineTool) || $ && $.enabled !== !1 ? /* @__PURE__ */ jsxs("div", {
+			R === "edit" && v.showEditTools !== !1 && (v.markerTemplates && v.markerTemplates.length > 0 || v.showRectangleTool || v.showCircleTool || v.showPolygonTool || v.showSquareTool || v.showPolylineTool) || $ && $.enabled !== !1 ? /* @__PURE__ */ jsxs("div", {
 				className: "comp-mapbox__edit-controls",
-				children: [I === "edit" && _.showEditTools !== !1 && (_.markerTemplates && _.markerTemplates.length > 0 || _.showRectangleTool || _.showCircleTool || _.showPolygonTool || _.showSquareTool || _.showPolylineTool) && /* @__PURE__ */ jsx(EditControl, {
-					markerTemplates: _.markerTemplates || [],
-					selectedTemplate: et,
-					onTemplateSelect: Ht,
-					drawMode: tt,
-					onDrawModeChange: Ut,
-					showRectangleTool: _.showRectangleTool,
-					showCircleTool: _.showCircleTool,
-					showPolygonTool: _.showPolygonTool,
-					showSquareTool: _.showSquareTool,
-					showPolylineTool: _.showPolylineTool
+				children: [R === "edit" && v.showEditTools !== !1 && (v.markerTemplates && v.markerTemplates.length > 0 || v.showRectangleTool || v.showCircleTool || v.showPolygonTool || v.showSquareTool || v.showPolylineTool) && /* @__PURE__ */ jsx(EditControl, {
+					markerTemplates: v.markerTemplates || [],
+					selectedTemplate: rt,
+					onTemplateSelect: Kt,
+					drawMode: it,
+					onDrawModeChange: qt,
+					showRectangleTool: v.showRectangleTool,
+					showCircleTool: v.showCircleTool,
+					showPolygonTool: v.showPolygonTool,
+					showSquareTool: v.showSquareTool,
+					showPolylineTool: v.showPolylineTool
 				}), $ && $.enabled !== !1 && /* @__PURE__ */ jsx(RoadHighlightControl, {
-					map: Je,
+					map: Ze,
 					highlightWidth: $.highlightWidth,
 					defaultRoadTypes: $.defaultRoadTypes,
 					defaultMinWidth: $.defaultMinWidth,
@@ -6150,51 +6336,59 @@ const Mapbox = forwardRef((e, s) => {
 					style: $.style
 				})]
 			}) : null,
-			(Mn?.enabled !== !1 || Nn?.enabled !== !1 || Pn?.enabled !== !1 || Fn && Fn.enabled !== !1) && /* @__PURE__ */ jsxs("div", {
+			(Rn?.enabled !== !1 || zn?.enabled !== !1 || Bn?.enabled !== !1 || Vn && Vn.enabled !== !1 || Hn && Hn.enabled !== !1) && /* @__PURE__ */ jsxs("div", {
 				className: "comp-mapbox__controls",
 				children: [
-					Mn && Mn.enabled !== !1 && /* @__PURE__ */ jsx(CoordinateDisplay, {
-						map: Je,
-						precision: Mn.precision,
-						className: Mn.className,
-						style: Mn.style
+					Rn && Rn.enabled !== !1 && /* @__PURE__ */ jsx(CoordinateDisplay, {
+						map: Ze,
+						precision: Rn.precision,
+						className: Rn.className,
+						style: Rn.style
+					}),
+					zn && zn.enabled !== !1 && /* @__PURE__ */ jsx(ScaleControl, {
+						map: Ze,
+						maxWidth: zn.maxWidth,
+						unit: zn.unit,
+						className: zn.className,
+						style: zn.style
 					}),
-					Nn && Nn.enabled !== !1 && /* @__PURE__ */ jsx(ScaleControl, {
-						map: Je,
-						maxWidth: Nn.maxWidth,
-						unit: Nn.unit,
-						className: Nn.className,
-						style: Nn.style
+					Vn && Vn.enabled !== !1 && /* @__PURE__ */ jsx(MeasureControl, {
+						map: Ze,
+						entityConfig: D,
+						className: Vn.className,
+						style: Vn.style
 					}),
-					Fn && Fn.enabled !== !1 && /* @__PURE__ */ jsx(MeasureControl, {
-						map: Je,
-						defaultEntityConfig: Fn.defaultEntityConfig,
-						className: Fn.className,
-						style: Fn.style
+					Hn && Hn.enabled !== !1 && /* @__PURE__ */ jsx(RasterPaintControl, {
+						map: Ze,
+						value: C,
+						onChange: je,
+						rasterPaintLayerIds: Un,
+						className: Hn.className,
+						style: Hn.style
 					}),
-					Pn && Pn.enabled !== !1 && /* @__PURE__ */ jsx(ResetViewControl, {
-						map: Je,
-						initialCenter: c,
-						initialZoom: l,
-						initialPitch: u,
-						initialBearing: d,
-						duration: Pn.duration,
-						className: Pn.className,
-						style: Pn.style
+					Bn && Bn.enabled !== !1 && /* @__PURE__ */ jsx(ResetViewControl, {
+						map: Ze,
+						initialCenter: l,
+						initialZoom: u,
+						initialPitch: d,
+						initialBearing: f,
+						duration: Bn.duration,
+						className: Bn.className,
+						style: Bn.style
 					})
 				]
 			}),
-			F && Ve.current && /* @__PURE__ */ jsx(EntityPopup, {
-				popupState: F,
-				onClose: () => ft(F.entityId),
-				portalContainer: Ve.current,
-				popupRef: He
+			L && We.current && /* @__PURE__ */ jsx(EntityPopup, {
+				popupState: L,
+				onClose: () => gt(L.entityId),
+				portalContainer: We.current,
+				popupRef: Ge
 			}),
-			We && Ke.current && /* @__PURE__ */ jsx(ContextMenu, {
-				menuState: We,
-				onClose: un,
-				portalContainer: Ke.current,
-				menuRef: qe
+			qe && Ye.current && /* @__PURE__ */ jsx(ContextMenu, {
+				menuState: qe,
+				onClose: hn,
+				portalContainer: Ye.current,
+				menuRef: Xe
 			})
 		]
 	});