uni-leaflet 1.1.0 → 1.2.0

package/index.ts

@@ -4,6 +4,10 @@ import UniLeafletMap from './UniLeafletMap.vue';
 export * from './types';
 export * from './utils/crs';
 export * from './utils/tile';
+export * from './utils/bounds';
+export * from './utils/geojson';
+export * from './utils/curve';
+export { clusterMarkers } from './utils/cluster';
 export * from './engine/factory';
 export { UniLeafletMap };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uni-leaflet",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Cross-platform Leaflet and Native Canvas 2D Map Component for Uni-App (Vue 3, H5, WeChat Mini-Program, App)",
   "main": "index.ts",
   "scripts": {

package/types.ts

@@ -46,6 +46,8 @@ export interface MarkerLabelOptions {
 }
 
 export interface MarkerIconOptions {
+  /** Icon rendering type template */
+  type?: 'default' | 'image' | 'emoji' | 'svg' | 'html' | 'avatar';
   /** Image URL for PNG/JPG/WebP/SVG or data URI (e.g. '/static/icons/pin-blue.png', 'data:image/png;base64,...') */
   url?: string;
   /** Raw SVG string markup (e.g. '<svg viewBox="0 0 24 24">...</svg>') */
@@ -60,6 +62,20 @@ export interface MarkerIconOptions {
   size?: [number, number];
   /** Icon anchor point in px: [anchorX, anchorY], default [width/2, height] */
   anchor?: [number, number];
+
+  // --- Avatar Bubble Options ---
+  /** 头像气泡右上角角标文本或 Emoji (例如 '❤️', 'VIP', '👑') */
+  badgeText?: string;
+  /** 头像气泡角标背景色，默认线性渐变红 */
+  badgeColor?: string;
+  /** 是否带有心跳脉冲光晕微动效，默认 false */
+  pulse?: boolean;
+  /** 脉冲光晕颜色，默认与 borderColor 一致 */
+  pulseColor?: string;
+  /** 头像气泡外圆环边框颜色，默认 '#3b82f6' */
+  borderColor?: string;
+  /** 头像气泡外圆环边框宽度，默认 3 */
+  borderWidth?: number;
 }
 
 export interface MarkerOptions {
@@ -77,8 +93,17 @@ export interface PolylineOptions {
   color?: string;
   width?: number;
   dashArray?: number[];
+  dashOffset?: number;
   opacity?: number;
   label?: string | MarkerLabelOptions;
+  /** 是否开启贝塞尔平滑弧线（旅行航线/航迹线），基于两点或多点生成弧线，默认 false */
+  curved?: boolean;
+  /** 弧线曲率系数，默认 0.25（正数向左/上一侧拱起，负数向右/下一侧拱起，0 为直线） */
+  curvature?: number;
+  /** 是否开启流光/流动虚线动效，默认 false */
+  flowing?: boolean;
+  /** 流光流动速度，默认 1（数值越大流动越快，负数反向流动） */
+  flowSpeed?: number;
   data?: any;
 }
 
@@ -105,16 +130,31 @@ export interface CircleOptions {
   data?: any;
 }
 
+export interface GeoJsonStyleOptions {
+  color?: string;
+  weight?: number;
+  opacity?: number;
+  fillColor?: string;
+  fillOpacity?: number;
+  dashArray?: number[];
+}
+
+export type GeoJsonStyle =
+  | GeoJsonStyleOptions
+  | ((feature: any) => GeoJsonStyleOptions);
+
 export interface MapOverlays {
   markers?: MarkerOptions[];
   polylines?: PolylineOptions[];
   polygons?: PolygonOptions[];
   circles?: CircleOptions[];
+  geojson?: any;
+  geojsonStyle?: GeoJsonStyle;
 }
 
 export interface OverlayClickEvent {
-  type: 'marker' | 'polyline' | 'polygon' | 'circle';
-  data: MarkerOptions | PolylineOptions | PolygonOptions | CircleOptions;
+  type: 'marker' | 'polyline' | 'polygon' | 'circle' | 'geojson';
+  data: MarkerOptions | PolylineOptions | PolygonOptions | CircleOptions | any;
 }
 
 export interface MapOptions {
@@ -126,6 +166,8 @@ export interface MapOptions {
   subdomains?: string[];
   layers?: Array<string | TileLayerConfig>;
   overlays?: MapOverlays;
+  geojson?: any;
+  geojsonStyle?: GeoJsonStyle;
   showControls?: boolean;
 }
 
@@ -134,6 +176,51 @@ export interface MapChangeEvent {
   zoom: number;
 }
 
+export type LatLngBoundsExpression =
+  | LatLngTuple[]
+  | [LatLngTuple, LatLngTuple]
+  | MapBounds
+  | { southWest: LatLngTuple; northEast: LatLngTuple }
+  | 'markers'
+  | 'polylines'
+  | 'polygons'
+  | 'circles'
+  | 'geojson'
+  | 'all'
+  | 'points'
+  | 'lines'
+  | any;
+
+export interface FitBoundsOptions {
+  padding?: [number, number]; // [paddingX, paddingY] in px
+  paddingTopLeft?: [number, number];
+  paddingBottomRight?: [number, number];
+  maxZoom?: number;
+  animate?: boolean;
+  duration?: number;
+  [key: string]: any;
+}
+
+export interface ClusterGroup {
+  id: string;
+  count: number;
+  center: LatLngTuple;
+  bounds: [LatLngTuple, LatLngTuple];
+  markers: MarkerOptions[];
+  representativeMarker: MarkerOptions;
+}
+
+export type ClusterResult =
+  | { isCluster: false; marker: MarkerOptions }
+  | { isCluster: true; cluster: ClusterGroup };
+
+export interface ClusterOptions {
+  enable?: boolean;
+  clusterRadius?: number; // default 60px
+  clusterMaxZoom?: number; // default 17
+  tileSize?: number;
+}
+
 /**
  * Unified Map Engine Interface (Strategy / Adapter Pattern)
  */
@@ -143,6 +230,10 @@ export interface IMapEngine {
   zoomIn(): void;
   zoomOut(): void;
   panTo(center: LatLngTuple, duration?: number): void;
+  fitBounds(
+    bounds: LatLngBoundsExpression | LatLngTuple[] | MapBounds,
+    options?: FitBoundsOptions
+  ): void;
   setTileUrl(url: string, subdomains?: string[]): void;
   setLayers(layers: Array<string | TileLayerConfig>): void;
   setOverlays(overlays: MapOverlays): void;
@@ -150,7 +241,9 @@ export interface IMapEngine {
   setPolylines(polylines: PolylineOptions[]): void;
   setPolygons(polygons: PolygonOptions[]): void;
   setCircles(circles: CircleOptions[]): void;
+  setGeoJSON?(data: any, style?: GeoJsonStyle): void;
   clearOverlays(): void;
+  setClusterOptions?(options: ClusterOptions): void;
   getCenter(): LatLngTuple;
   getZoom(): number;
   resize(width?: number, height?: number): void;

package/utils/bounds.ts

@@ -0,0 +1,264 @@
+import type { LatLngTuple, MapBounds, Point } from '../types';
+import { clamp, latLngToWorldPixel, worldPixelToLatLng } from './crs';
+import { extractGeoJsonLatLngs } from './geojson';
+import { generateCurvedPolyline } from './curve';
+
+/**
+ * Universal helper to extract an array of [lat, lng] coordinates
+ * from various bounds representations:
+ * - LatLngTuple[] (e.g. [[39.9, 116.4], [39.92, 116.45]])
+ * - Single LatLngTuple ([39.9, 116.4])
+ * - MapBounds object ({ minLat, maxLat, minLng, maxLng })
+ * - Object with southWest & northEast ({ southWest: [lat, lng], northEast: [lat, lng] })
+ * - Object with _southWest & _northEast (Leaflet bounds internal)
+ * - Objects with lat & lng ({ lat: 39.9, lng: 116.4 })
+ * - Objects with latLng property ({ latLng: [39.9, 116.4] })
+ * - Leaflet LatLngBounds instance (getSouthWest(), getNorthEast())
+ * - GeoJSON objects (FeatureCollection, Feature, Geometry)
+ */
+export function extractLatLngs(bounds: any): LatLngTuple[] {
+  if (!bounds) return [];
+
+  // GeoJSON object (FeatureCollection, Feature, or Geometry)
+  if (
+    bounds.type &&
+    (bounds.features || bounds.geometry || bounds.coordinates || bounds.geometries)
+  ) {
+    return extractGeoJsonLatLngs(bounds);
+  }
+
+  // Single LatLngTuple: [lat, lng]
+  if (
+    Array.isArray(bounds) &&
+    bounds.length === 2 &&
+    typeof bounds[0] === 'number' &&
+    typeof bounds[1] === 'number'
+  ) {
+    return [[bounds[0], bounds[1]]];
+  }
+
+  // Array of points or coordinates or polylines/polygons
+  if (Array.isArray(bounds)) {
+    const list: LatLngTuple[] = [];
+    for (const item of bounds) {
+      if (!item) continue;
+      if (
+        Array.isArray(item) &&
+        item.length >= 2 &&
+        typeof item[0] === 'number' &&
+        typeof item[1] === 'number'
+      ) {
+        list.push([item[0], item[1]]);
+      } else if (typeof item.lat === 'number' && typeof item.lng === 'number') {
+        list.push([item.lat, item.lng]);
+      } else if (
+        Array.isArray(item.latLng) &&
+        item.latLng.length >= 2 &&
+        typeof item.latLng[0] === 'number' &&
+        typeof item.latLng[1] === 'number'
+      ) {
+        list.push([item.latLng[0], item.latLng[1]]);
+      } else if (Array.isArray(item.latLngs)) {
+        // Polyline or Polygon object (if curved polyline, extract interpolated arc points)
+        const pts = item.curved
+          ? generateCurvedPolyline(item.latLngs, item.curvature ?? 0.25)
+          : item.latLngs;
+        for (const pt of pts) {
+          if (
+            Array.isArray(pt) &&
+            pt.length >= 2 &&
+            typeof pt[0] === 'number' &&
+            typeof pt[1] === 'number'
+          ) {
+            list.push([pt[0], pt[1]]);
+          } else if (pt && typeof pt.lat === 'number' && typeof pt.lng === 'number') {
+            list.push([pt.lat, pt.lng]);
+          }
+        }
+      } else if (item.type && (item.features || item.geometry || item.coordinates)) {
+        list.push(...extractGeoJsonLatLngs(item));
+      }
+    }
+    return list;
+  }
+
+  // Overlays collection object: { markers, polylines, polygons, circles, geojson }
+  if (
+    bounds.markers ||
+    bounds.polylines ||
+    bounds.polygons ||
+    bounds.circles ||
+    bounds.geojson
+  ) {
+    const list: LatLngTuple[] = [];
+    if (Array.isArray(bounds.markers)) {
+      list.push(...extractLatLngs(bounds.markers));
+    }
+    if (Array.isArray(bounds.polylines)) {
+      list.push(...extractLatLngs(bounds.polylines));
+    }
+    if (Array.isArray(bounds.polygons)) {
+      list.push(...extractLatLngs(bounds.polygons));
+    }
+    if (Array.isArray(bounds.circles)) {
+      list.push(...extractLatLngs(bounds.circles));
+    }
+    if (bounds.geojson) {
+      list.push(...extractGeoJsonLatLngs(bounds.geojson));
+    }
+    return list;
+  }
+
+  // Leaflet LatLngBounds object
+  if (
+    typeof bounds.getSouthWest === 'function' &&
+    typeof bounds.getNorthEast === 'function'
+  ) {
+    const sw = bounds.getSouthWest();
+    const ne = bounds.getNorthEast();
+    return [
+      [sw.lat, sw.lng],
+      [ne.lat, ne.lng],
+    ];
+  }
+
+  // MapBounds object: { minLat, maxLat, minLng, maxLng }
+  if (
+    typeof bounds.minLat === 'number' &&
+    typeof bounds.maxLat === 'number' &&
+    typeof bounds.minLng === 'number' &&
+    typeof bounds.maxLng === 'number'
+  ) {
+    return [
+      [bounds.minLat, bounds.minLng],
+      [bounds.maxLat, bounds.maxLng],
+    ];
+  }
+
+  // Object with southWest and northEast
+  if (bounds.southWest && bounds.northEast) {
+    const sw = bounds.southWest;
+    const ne = bounds.northEast;
+    const swLat = Array.isArray(sw) ? sw[0] : sw.lat;
+    const swLng = Array.isArray(sw) ? sw[1] : sw.lng;
+    const neLat = Array.isArray(ne) ? ne[0] : ne.lat;
+    const neLng = Array.isArray(ne) ? ne[1] : ne.lng;
+    if (
+      typeof swLat === 'number' &&
+      typeof swLng === 'number' &&
+      typeof neLat === 'number' &&
+      typeof neLng === 'number'
+    ) {
+      return [
+        [swLat, swLng],
+        [neLat, neLng],
+      ];
+    }
+  }
+
+  // Object with _southWest and _northEast
+  if (bounds._southWest && bounds._northEast) {
+    const sw = bounds._southWest;
+    const ne = bounds._northEast;
+    if (typeof sw.lat === 'number' && typeof ne.lat === 'number') {
+      return [
+        [sw.lat, sw.lng],
+        [ne.lat, ne.lng],
+      ];
+    }
+  }
+
+  return [];
+}
+
+/**
+ * Calculate the bounding box { minLat, maxLat, minLng, maxLng } from points
+ */
+export function calculateBounds(points: LatLngTuple[]): MapBounds | null {
+  if (!points || points.length === 0) return null;
+
+  let minLat = Infinity;
+  let maxLat = -Infinity;
+  let minLng = Infinity;
+  let maxLng = -Infinity;
+
+  for (const [lat, lng] of points) {
+    if (typeof lat !== 'number' || typeof lng !== 'number') continue;
+    if (isNaN(lat) || isNaN(lng)) continue;
+    if (lat < minLat) minLat = lat;
+    if (lat > maxLat) maxLat = lat;
+    if (lng < minLng) minLng = lng;
+    if (lng > maxLng) maxLng = lng;
+  }
+
+  if (!isFinite(minLat) || !isFinite(maxLat) || !isFinite(minLng) || !isFinite(maxLng)) {
+    return null;
+  }
+
+  return { minLat, maxLat, minLng, maxLng };
+}
+
+export interface BoundsCalcOptions {
+  padding?: [number, number]; // [paddingX, paddingY] in pixels
+  minZoom?: number;
+  maxZoom?: number;
+  tileSize?: number;
+}
+
+/**
+ * Calculate optimal center LatLng and integer Zoom to fit the bounds in given view dimensions
+ */
+export function getBoundsCenterAndZoom(
+  bounds: any,
+  viewWidth: number,
+  viewHeight: number,
+  options?: BoundsCalcOptions
+): { center: LatLngTuple; zoom: number } | null {
+  const points = extractLatLngs(bounds);
+  const bbox = calculateBounds(points);
+  if (!bbox) return null;
+
+  const { minLat, maxLat, minLng, maxLng } = bbox;
+  const minZoom = options?.minZoom ?? 3;
+  const maxZoom = options?.maxZoom ?? 18;
+  const tileSize = options?.tileSize || 256;
+
+  // Single point case
+  if (Math.abs(maxLat - minLat) < 1e-7 && Math.abs(maxLng - minLng) < 1e-7) {
+    return {
+      center: [minLat, minLng],
+      zoom: clamp(options?.maxZoom ?? 14, minZoom, maxZoom),
+    };
+  }
+
+  // Convert bounding corners to Mercator world pixels at zoom 0
+  const pNW = latLngToWorldPixel(maxLat, minLng, 0, tileSize);
+  const pSE = latLngToWorldPixel(minLat, maxLng, 0, tileSize);
+
+  // Geometric center in world pixels at zoom 0
+  const centerWorldX = (pNW.x + pSE.x) / 2;
+  const centerWorldY = (pNW.y + pSE.y) / 2;
+  const centerLatLng = worldPixelToLatLng(centerWorldX, centerWorldY, 0, tileSize);
+
+  // Available viewport space considering padding
+  const padX = options?.padding ? options.padding[0] : 20;
+  const padY = options?.padding ? options.padding[1] : 20;
+  const availW = Math.max(viewWidth - 2 * padX, 20);
+  const availH = Math.max(viewHeight - 2 * padY, 20);
+
+  // World pixel spans at zoom 0
+  const deltaX0 = Math.abs(pSE.x - pNW.x);
+  const deltaY0 = Math.abs(pSE.y - pNW.y);
+
+  const zoomX = deltaX0 > 1e-6 ? Math.log2(availW / deltaX0) : Infinity;
+  const zoomY = deltaY0 > 1e-6 ? Math.log2(availH / deltaY0) : Infinity;
+
+  // Use Math.floor to ensure entire bounding area + padding fits within view
+  const rawZoom = Math.min(zoomX, zoomY);
+  const targetZoom = clamp(Math.floor(rawZoom), minZoom, maxZoom);
+
+  return {
+    center: [centerLatLng.lat, centerLatLng.lng],
+    zoom: targetZoom,
+  };
+}

package/utils/cluster.ts

@@ -0,0 +1,158 @@
+import type {
+  LatLngTuple,
+  MarkerOptions,
+  ClusterGroup,
+  ClusterResult,
+  ClusterOptions,
+} from '../types';
+import { latLngToWorldPixel } from './crs';
+
+export type { ClusterGroup, ClusterResult, ClusterOptions };
+
+/**
+ * Cluster markers based on screen pixel distance at current zoom level (EPSG:3857)
+ */
+export function clusterMarkers(
+  markers: MarkerOptions[],
+  zoom: number,
+  options?: ClusterOptions
+): ClusterResult[] {
+  if (!markers || markers.length === 0) return [];
+
+  const radius = options?.clusterRadius ?? 60;
+  const maxZoom = options?.clusterMaxZoom ?? 17;
+  const tileSize = options?.tileSize || 256;
+
+  // If beyond max cluster zoom, return all markers directly
+  if (zoom >= maxZoom) {
+    return markers.map((marker) => ({ isCluster: false, marker }));
+  }
+
+  // Calculate world pixel coordinate for each marker at zoom
+  interface PixelMarker {
+    marker: MarkerOptions;
+    x: number;
+    y: number;
+    assigned: boolean;
+  }
+
+  const pixelMarkers: PixelMarker[] = [];
+  for (const marker of markers) {
+    if (!marker || !marker.latLng) continue;
+    const [lat, lng] = marker.latLng;
+    if (typeof lat !== 'number' || typeof lng !== 'number' || isNaN(lat) || isNaN(lng)) continue;
+    const pt = latLngToWorldPixel(lat, lng, zoom, tileSize);
+    pixelMarkers.push({
+      marker,
+      x: pt.x,
+      y: pt.y,
+      assigned: false,
+    });
+  }
+
+  if (pixelMarkers.length === 0) return [];
+
+  // Spatial Grid Index for fast neighbor search
+  const grid = new Map<string, PixelMarker[]>();
+  const cellSize = radius;
+
+  for (const pm of pixelMarkers) {
+    const gx = Math.floor(pm.x / cellSize);
+    const gy = Math.floor(pm.y / cellSize);
+    const key = `${gx}_${gy}`;
+    let cell = grid.get(key);
+    if (!cell) {
+      cell = [];
+      grid.set(key, cell);
+    }
+    cell.push(pm);
+  }
+
+  const results: ClusterResult[] = [];
+  const radiusSq = radius * radius;
+
+  for (let i = 0; i < pixelMarkers.length; i++) {
+    const pm = pixelMarkers[i];
+    if (pm.assigned) continue;
+
+    pm.assigned = true;
+    const clusterItems: PixelMarker[] = [pm];
+
+    const gx = Math.floor(pm.x / cellSize);
+    const gy = Math.floor(pm.y / cellSize);
+
+    // Search 3x3 neighbor grid cells
+    for (let dx = -1; dx <= 1; dx++) {
+      for (let dy = -1; dy <= 1; dy++) {
+        const neighborKey = `${gx + dx}_${gy + dy}`;
+        const neighborCell = grid.get(neighborKey);
+        if (!neighborCell) continue;
+
+        for (const neighbor of neighborCell) {
+          if (neighbor.assigned) continue;
+          const distSq =
+            (neighbor.x - pm.x) * (neighbor.x - pm.x) +
+            (neighbor.y - pm.y) * (neighbor.y - pm.y);
+          if (distSq <= radiusSq) {
+            neighbor.assigned = true;
+            clusterItems.push(neighbor);
+          }
+        }
+      }
+    }
+
+    if (clusterItems.length === 1) {
+      // Single unclustered marker
+      results.push({
+        isCluster: false,
+        marker: clusterItems[0].marker,
+      });
+    } else {
+      // Multi-marker cluster
+      let sumLat = 0;
+      let sumLng = 0;
+      let minLat = Infinity;
+      let maxLat = -Infinity;
+      let minLng = Infinity;
+      let maxLng = -Infinity;
+
+      const clusterRawMarkers: MarkerOptions[] = [];
+      for (const item of clusterItems) {
+        const [lat, lng] = item.marker.latLng;
+        sumLat += lat;
+        sumLng += lng;
+        if (lat < minLat) minLat = lat;
+        if (lat > maxLat) maxLat = lat;
+        if (lng < minLng) minLng = lng;
+        if (lng > maxLng) maxLng = lng;
+        clusterRawMarkers.push(item.marker);
+      }
+
+      const count = clusterItems.length;
+      const centerLat = sumLat / count;
+      const centerLng = sumLng / count;
+
+      // Pick representative marker (one that has an icon or first)
+      const rep =
+        clusterRawMarkers.find((m) => m.icon?.url || m.icon?.svg || m.icon?.text) ||
+        clusterRawMarkers[0];
+
+      results.push({
+        isCluster: true,
+        cluster: {
+          id: `cluster_${zoom}_${centerLat.toFixed(5)}_${centerLng.toFixed(5)}_${count}`,
+          count,
+          center: [centerLat, centerLng],
+          bounds: [
+            [minLat, minLng],
+            [maxLat, maxLng],
+          ],
+          markers: clusterRawMarkers,
+          representativeMarker: rep,
+        },
+      });
+    }
+  }
+
+  return results;
+}

package/utils/curve.ts

@@ -0,0 +1,86 @@
+import type { LatLngTuple } from '../types';
+
+/**
+ * Generate a smooth arc / flight route between two LatLng points using quadratic Bézier curve.
+ * @param p1 Starting [lat, lng]
+ * @param p2 Ending [lat, lng]
+ * @param curvature Curvature factor, default 0.25 (positive arches left/up, negative arches right/down, 0 is straight)
+ * @param segments Number of interpolation segments along the curve, default 36
+ */
+export function generateCurvedArc(
+  p1: LatLngTuple,
+  p2: LatLngTuple,
+  curvature = 0.25,
+  segments = 36
+): LatLngTuple[] {
+  if (Math.abs(curvature) < 1e-4) {
+    return [p1, p2];
+  }
+
+  const [lat1, lng1] = p1;
+  const [lat2, lng2] = p2;
+
+  // Vector between points
+  const dLat = lat2 - lat1;
+  const dLng = lng2 - lng1;
+  const dist = Math.hypot(dLat, dLng);
+
+  if (dist < 1e-7) {
+    return [p1, p2];
+  }
+
+  // Midpoint
+  const midLat = (lat1 + lat2) / 2;
+  const midLng = (lng1 + lng2) / 2;
+
+  // Normal perpendicular vector [-dLng / dist, dLat / dist]
+  const normLat = -dLng / dist;
+  const normLng = dLat / dist;
+
+  // Control point
+  const ctrlLat = midLat + normLat * dist * curvature;
+  const ctrlLng = midLng + normLng * dist * curvature;
+
+  const points: LatLngTuple[] = [];
+  const steps = Math.max(12, segments);
+
+  for (let i = 0; i <= steps; i++) {
+    const t = i / steps;
+    const invT = 1 - t;
+    // Quadratic Bézier formula: B(t) = (1-t)^2 * P1 + 2*(1-t)*t * C + t^2 * P2
+    const lat = invT * invT * lat1 + 2 * invT * t * ctrlLat + t * t * lat2;
+    const lng = invT * invT * lng1 + 2 * invT * t * ctrlLng + t * t * lng2;
+    points.push([lat, lng]);
+  }
+
+  return points;
+}
+
+/**
+ * Generate a curved polyline from an array of waypoints.
+ * If 2 points: generates a single arc.
+ * If > 2 points: generates sequential arcs between consecutive pairs.
+ */
+export function generateCurvedPolyline(
+  latLngs: LatLngTuple[],
+  curvature = 0.25,
+  segments = 36
+): LatLngTuple[] {
+  if (!latLngs || latLngs.length < 2) return latLngs || [];
+  if (Math.abs(curvature) < 1e-4) return latLngs;
+
+  if (latLngs.length === 2) {
+    return generateCurvedArc(latLngs[0], latLngs[1], curvature, segments);
+  }
+
+  const result: LatLngTuple[] = [];
+  for (let i = 0; i < latLngs.length - 1; i++) {
+    const arc = generateCurvedArc(latLngs[i], latLngs[i + 1], curvature, segments);
+    if (i > 0) {
+      // Avoid duplicate junction point
+      arc.shift();
+    }
+    result.push(...arc);
+  }
+  return result;
+}