@heycar/heycars-map 2.7.1 → 2.8.0

package/dist/v2/types/interface.d.ts

@@ -78,6 +78,7 @@ export interface Route {
     duration: number;
     tolls?: number;
     steps: RouteStep[];
+    trafficJams?: TrafficJams;
 }
 export interface TrackPoint {
     lng: number;
@@ -105,3 +106,5 @@ export type ProxyServiceError = {
     code: number;
     msg: string;
 };
+export type TrafficStatus = "UNKNOWN" | "NORMAL" | "SLOW" | "TRAFFIC_JAM" | "HEAVY_TRAFFIC_JAM";
+export type TrafficJams = Record<`${number},${number}`, TrafficStatus>;

package/dist/v2/utils/compatibleDrivingRoute.js

@@ -1,5 +1,18 @@
 import { apiGaodeDirectionDriving } from "../api/gaodeDirectionDriving.js";
 import { apiGoogleDirections } from "../api/googleDirections.js";
+import { stringifyPoint, amapTraffic2trafficStatus } from "./transform.js";
+const amapTmcs2trafficJams = (tmcs) => {
+  const trafficJams = {};
+  for (const tmc of tmcs) {
+    const { path } = tmc;
+    if (!path)
+      continue;
+    for (const { lng, lat } of path) {
+      trafficJams[stringifyPoint([lng, lat])] = amapTraffic2trafficStatus(tmc.status);
+    }
+  }
+  return trafficJams;
+};
 function amapJsApiDrivingRoute(from, to, amapDriving) {
   return new Promise((resolve, reject) => {
     amapDriving.search(
@@ -7,6 +20,7 @@ function amapJsApiDrivingRoute(from, to, amapDriving) {
       AMap.LngLat.from(to),
       { waypoints: [] },
       (status, result) => {
+        const trafficJams = {};
         switch (status) {
           case "complete": {
             let path = [];
@@ -19,6 +33,7 @@ function amapJsApiDrivingRoute(from, to, amapDriving) {
               const basicStep = step;
               const stepPath = basicStep.path.map(({ lng, lat }) => [lng, lat]);
               path = path.concat(stepPath);
+              Object.assign(trafficJams, amapTmcs2trafficJams(basicStep.tmcs));
               routeSteps.push({
                 path: basicStep.path.map(({ lng, lat }) => [lng, lat]),
                 duration: basicStep.time,
@@ -30,7 +45,8 @@ function amapJsApiDrivingRoute(from, to, amapDriving) {
               distance: firstRoute.distance,
               duration: firstRoute.time,
               tolls: firstRoute.tolls,
-              steps: routeSteps
+              steps: routeSteps,
+              trafficJams
             });
           }
           case "no_data":
@@ -48,6 +64,7 @@ async function gaodeServiceApiDrivingRoute(from, to, proxyUrl) {
     origin: [from],
     destination: to
   });
+  const trafficJams = {};
   switch (status) {
     case "complete": {
       let path = [];
@@ -59,6 +76,7 @@ async function gaodeServiceApiDrivingRoute(from, to, proxyUrl) {
         const basicStep = step;
         const stepPath = basicStep.path.map(({ lng, lat }) => [lng, lat]);
         path = path.concat(stepPath);
+        Object.assign(trafficJams, amapTmcs2trafficJams(basicStep.tmcs));
         routeSteps.push({
           path: basicStep.path.map(({ lng, lat }) => [lng, lat]),
           duration: basicStep.time,
@@ -70,7 +88,8 @@ async function gaodeServiceApiDrivingRoute(from, to, proxyUrl) {
         distance: firstRoute.distance,
         duration: firstRoute.time,
         tolls: firstRoute.tolls,
-        steps: routeSteps
+        steps: routeSteps,
+        trafficJams
       };
     }
     case "no_data":

package/dist/v2/utils/log.js

@@ -1,6 +1,6 @@
 const availableLogKeys = /* @__PURE__ */ new Set();
 const pkgName = "@heycar/heycars-map";
-const pkgVersion = "2.7.1";
+const pkgVersion = "2.8.0";
 const isEnableLog = (name) => {
   const searchParam = new URLSearchParams(location.search);
   return searchParam.has(`log-${name}`);

package/dist/v2/utils/platform.d.ts

@@ -28,3 +28,4 @@ export declare const detectOSPlatform: () => OS_PLATFORM;
  * Inspired from http://www.browserleaks.com/webgl#howto-detect-webgl
  */
 export declare function detectWebGL(): WEBGL_STATUS;
+export declare function detectTouchDevice(): boolean;

package/dist/v2/utils/platform.js

@@ -80,6 +80,9 @@ function detectWebGL() {
   }
   return "NOT_SUPPORTED";
 }
+function detectTouchDevice() {
+  return "ontouchend" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+}
 export {
   ALIPAY_WALLET,
   BRWOSER_PLATFORM,
@@ -88,5 +91,6 @@ export {
   detectAlipayWallet,
   detectBrowserPlatform,
   detectOSPlatform,
+  detectTouchDevice,
   detectWebGL
 };

package/dist/v2/utils/transform.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="google.maps" />
-import type { Language, LngLatLiterial, Place, Point, TrackPoint, Zone } from "../types/interface";
+import type { LngLatLiterial, Place, Point, TrackPoint, TrafficStatus, Zone } from "../types/interface";
 import type { AlipayMyGetLocationSuccessResponse } from "../types/my";
 import type { WxGetLocationSuccessResponse } from "../types/wx";
 import { BRWOSER_PLATFORM } from "./platform";
@@ -9,6 +9,7 @@ export declare const lnglat2point: ({ lng, lat }: {
     lng: number;
     lat: number;
 }) => Point;
+export declare const stringifyPoint: (p: Point) => `${number},${number}`;
 export declare const googlePointsStringify: (points: Point[]) => string;
 export declare const gaodePointsStringify: (points: Point[]) => string;
 export interface AsteriskItem {
@@ -18,8 +19,6 @@ export interface AsteriskItem {
 export declare const decodeAsterisk: (encodedValue: string) => AsteriskItem[];
 export declare const property2emitEventName: (propertyName: string) => string;
 export declare const property2mapEventName: (propertyName: string) => string;
-export type VectorMapForeign = "style_en" | "style_local" | "style_zh_cn";
-export declare const language2vectorMapForeign: (lang: Language) => VectorMapForeign;
 export declare const place2point: (place: Place) => Point;
 export declare const combineHandler: <P extends any[], R>(fn1: ((...args: P) => any) | undefined, fn2: (...args: P) => R) => (...args: P) => R;
 export declare const pipeAsync: <P extends any[]>(fn?: ((...args: P) => any) | undefined) => (...args: P) => void;
@@ -47,4 +46,5 @@ export declare const maybeFunctionToFunction: <T>(value: T) => MaybeFunctionToFu
 export declare const signal2promise: (signal?: AbortSignal) => Promise<any>;
 export declare const googleEncodedPolyline2googleLatLng: (value: string) => google.maps.LatLng[];
 export declare const gaodePolyline2amapLngLat: (value: string) => AMap.LngLat[];
+export declare const amapTraffic2trafficStatus: (value?: AMap.TMC["status"]) => TrafficStatus;
 export {};

package/dist/v2/utils/transform.js

@@ -42,8 +42,9 @@ const vec2lnglat = ([lng, lat]) => ({
   lat: Number(lat)
 });
 const lnglat2point = ({ lng, lat }) => [lng, lat];
+const stringifyPoint = (p) => `${p[0]},${p[1]}`;
 const googlePointsStringify = (points) => points.map(([lng, lat]) => `${lat},${lng}`).join("|");
-const gaodePointsStringify = (points) => points.map(([lng, lat]) => `${lng},${lat}`).join(";");
+const gaodePointsStringify = (points) => points.map(stringifyPoint).join(";");
 const decodeAsterisk = (encodedValue) => {
   const result = [];
   const tokens = encodedValue.split("*");
@@ -61,15 +62,6 @@ const property2emitEventName = (propertyName) => {
 const property2mapEventName = (propertyName) => {
   return propertyName.slice(2).toLowerCase();
 };
-const language2vectorMapForeign = (lang) => {
-  switch (lang) {
-    case "en":
-      return "style_en";
-    case "zh-TW":
-    case "zh":
-      return "style_zh_cn";
-  }
-};
 const place2point = (place) => [Number(place.lng), Number(place.lat)];
 const combineHandler = (fn1, fn2) => {
   return (...args) => {
@@ -296,10 +288,26 @@ const gaodePolyline2amapLngLat = (value) => {
     return { lng, lat };
   });
 };
+const amapTraffic2trafficStatus = (value) => {
+  switch (value) {
+    case void 0:
+    case "未知":
+      return "UNKNOWN";
+    case "畅通":
+      return "NORMAL";
+    case "缓行":
+      return "SLOW";
+    case "拥堵":
+      return "TRAFFIC_JAM";
+    case "严重拥堵":
+      return "HEAVY_TRAFFIC_JAM";
+  }
+};
 export {
   alipayMyGetLocationError2GeolocationPositionErrorCode,
   alipayMyGetLocationSuccessResponse2GeolocationPosition,
   amapPlaceName2DisplayName,
+  amapTraffic2trafficStatus,
   businessCandidatesToAdsorptionPlace,
   combineHandler,
   decodeAsterisk,
@@ -316,7 +324,6 @@ export {
   isPlaceEqual,
   isPointEqual,
   isZoneEqual,
-  language2vectorMapForeign,
   lnglat2point,
   maybeFunctionToFunction,
   pipeAsync,
@@ -326,6 +333,7 @@ export {
   property2emitEventName,
   property2mapEventName,
   signal2promise,
+  stringifyPoint,
   trackPoints2amapGraspRoadPoints,
   vec2lnglat,
   wxGetLocationSuccessResponse2GeolocationPosition

package/dist/v3/App.js

@@ -4,8 +4,8 @@ import { DemoBusinessRecomendPlace } from "./Demo/DemoBusinessRecomendPlace.js";
 import { MapProvider } from "./components/MapProvider/MapProvider.js";
 const gmapApiKey = "AIzaSyCCOe8MAeS3EYvSraKsBX6ztVyLxj69z94";
 const gmapId = "d0af0c05331af64a";
-const amapApiKey = "81ed1d2b5b77187683717a5f2f19591a";
-const amapApiSecret = "1dfe626553258a9f91d7c4552c0816d2";
+const amapApiKey = "fcb7b14c930354a248e21f4031dfa179";
+const amapApiSecret = "11ad0e3d585b80d18b1ada5b0d947c4a";
 const App = /* @__PURE__ */ defineComponent({
   setup() {
     const supplierRef = ref("amap");

package/dist/v3/api/gaodeDirectionDriving.js

@@ -1,6 +1,6 @@
 import { gaodePointsStringify, gaodePolyline2amapLngLat } from "../utils/transform.js";
 import { createTypeError, isProxyServiceError } from "../utils/typeChecking.js";
-const GAODE_POLYLINE_REGEX = /^(?:\d*\.\d+,\d*\.\d+)?(?:;\d*\.\d+,\d*\.\d+)*$/;
+const GAODE_POLYLINE_REGEX = /^(?:-?\d*\.\d+,-?\d*\.\d+)?(?:;-?\d*\.\d+,-?\d*\.\d+)*$/;
 var GaodeDirectionStatus = /* @__PURE__ */ ((GaodeDirectionStatus2) => {
   GaodeDirectionStatus2["SUCCESS"] = "1";
   GaodeDirectionStatus2["FAIL"] = "0";
@@ -35,10 +35,19 @@ function isGaodeDirectionBasicStep(value) {
 function isGaodeEmptyValue(value) {
   return Array.isArray(value) && value.length === 0;
 }
-function assertGaodoDirectionDrivingStep(value) {
-  if (isGaodeDirectionBasicStep(value))
+function isAmapTmcStatus(value) {
+  return value === "未知" || value === "畅通" || value === "缓行" || value === "拥堵" || value === "严重拥堵";
+}
+function assertGaodeDirectionDrivingTmc(value) {
+  if (typeof value === "object" && value !== null && "status" in value && isAmapTmcStatus(value.status) && "polyline" in value && isGaodeDirectionPolyline(value.polyline))
     return;
-  throw createTypeError("GaodeDirectionDrivingStep", value);
+  throw createTypeError("GaodeDirectionDrivingTmc", value);
+}
+function assertGaodoDirectionDrivingStep(value) {
+  if (!isGaodeDirectionBasicStep(value) || !("tmcs" in value) || !Array.isArray(value.tmcs)) {
+    throw createTypeError("GaodeDirectionDrivingStep", value);
+  }
+  value.tmcs.forEach(assertGaodeDirectionDrivingTmc);
 }
 function assertGaodeDirectionDrivingRoutePath(value) {
   if (!isGaodeMeasurableObject(value) || !("tolls" in value) || !isGaodeNumberableString(value.tolls) || !("steps" in value) || !Array.isArray(value.steps)) {
@@ -63,15 +72,21 @@ function assertGaodeDirectionDrivingResponse(value) {
     throw createTypeError("GaodeDirectionDrivingResponse", value, detail);
   }
 }
+function gaodeDirectionDrivingTmc2amapTmc(gaodeTmc) {
+  const { status, polyline } = gaodeTmc;
+  const path = gaodePolyline2amapLngLat(String(polyline));
+  return { status, path };
+}
 function gaodeDirectionDrivingRoute2amapDrivingRoute(gaodeRoute) {
   return gaodeRoute.paths.map((routePath) => {
     const { distance, duration, tolls, steps: godeDirectionSteps } = routePath;
     const steps = godeDirectionSteps.map((directionStep) => {
-      const { distance: distance2, duration: duration2, polyline } = directionStep;
+      const { distance: distance2, duration: duration2, polyline, tmcs } = directionStep;
       return {
         distance: Number(distance2),
         time: Number(duration2),
-        path: gaodePolyline2amapLngLat(String(polyline))
+        path: gaodePolyline2amapLngLat(String(polyline)),
+        tmcs: tmcs.map(gaodeDirectionDrivingTmc2amapTmc)
       };
     });
     return {

package/dist/v3/business-components/BusinessQuotingMap/BusinessQuotingMap.js

@@ -9,10 +9,10 @@ import { defineSetup, defineLagecySetup } from "../../types/helper.js";
 import { generateCreateElementV2PropsOn } from "../../utils/compare.js";
 import { place2point, pipeDefer } from "../../utils/transform.js";
 import { toCoordinatePlaceType } from "../../utils/typeChecking.js";
-import { DrivingLine } from "../DrivingLine/DrivingLine.js";
 import { DrivingRoute } from "../DrivingRoute/DrivingRoute.js";
 import { FitViewOnce, createFittableRegisterOverlay } from "../FitView/FitView.js";
 import { StartEndPoint } from "../StartEndPoint/StartEndPoint.js";
+import { TrafficDrivingLine } from "../TrafficDrivingLine/TrafficDrivingLine.js";
 const BUSINESS_QUOTING_FITVIEW_PANDING = [26, 26, 19, 26];
 const BusinessQuotingMapInner = defineSetup("BusinessQuotingMapInner", function(props, {
   emit,
@@ -83,9 +83,11 @@ const BusinessQuotingMapInner = defineSetup("BusinessQuotingMapInner", function(
           path,
           distance,
           duration,
-          tolls
-        }) => [createVNode(DrivingLine, {
-          "path": path
+          tolls,
+          trafficJams
+        }) => [createVNode(TrafficDrivingLine, {
+          "path": path,
+          "trafficJams": trafficJams
         }, null), createVNode(StartEndPoint, {
           "type": "end",
           "registerOverlay": fittableRegistryOverlay,

package/dist/v3/business-components/BusinessTaxiServiceMap/BusinessTaxiServiceSection.js

@@ -14,6 +14,7 @@ import { ConditionalFittablePassengerCircle } from "../PassengerCircle/Passenger
 import { PlaceCircle } from "../PlaceCircle/PlaceCircle.js";
 import { StartEndPoint } from "../StartEndPoint/StartEndPoint.js";
 import { TaxiCar } from "../TaxiCar/TaxiCar.js";
+import { TrafficDrivingLine } from "../TrafficDrivingLine/TrafficDrivingLine.js";
 import { WalkingLine } from "../WalkingLine/WalkingLine.js";
 import { WalkingRoute } from "../WalkingRoute/WalkingRoute.js";
 import { WaveCircle } from "../WaveCircle/WaveCircle.js";
@@ -77,9 +78,11 @@ const SectionConfirmed = defineSetup("SectionConfirmed", function(props) {
       "to": to,
       "from": from,
       "render": ({
-        path
-      }) => createVNode(DrivingLine, {
-        "path": path
+        path,
+        trafficJams
+      }) => createVNode(TrafficDrivingLine, {
+        "path": path,
+        "trafficJams": trafficJams
       }, null)
     }, null), createVNode(ConditionalFittablePassengerCircle, {
       "position": passengerPosition,
@@ -162,11 +165,13 @@ const SectionDriverStartService = defineSetup("SectionDriverStartService", funct
         path,
         angle,
         distance,
-        duration
+        duration,
+        trafficJams
       }) => {
         var _a;
-        return [createVNode(DrivingLine, {
-          "path": path
+        return [createVNode(TrafficDrivingLine, {
+          "path": path,
+          "trafficJams": trafficJams
         }, null), createVNode(TaxiCar, {
           "position": (_a = path[0]) != null ? _a : carPosition,
           "angle": angle != null ? angle : carAngle,
@@ -233,9 +238,11 @@ const SectionBookDispatched = defineSetup("SectionBookDispatched", function(prop
       "to": to,
       "from": from,
       "render": ({
-        path
-      }) => createVNode(DrivingLine, {
-        "path": path
+        path,
+        trafficJams
+      }) => createVNode(TrafficDrivingLine, {
+        "path": path,
+        "trafficJams": trafficJams
       }, null)
     }, null), !!passengerPosition && passengerDistance && passengerDistance < PASSENGER_DISTANCE_MAX && passengerDistance > PASSENGER_DISTANCE_MIN && createVNode(WalkingRoute, {
       "from": passengerPosition,
@@ -370,11 +377,13 @@ const SectionInService = defineSetup("SectionInService", function(props) {
         path,
         angle,
         distance,
-        duration
+        duration,
+        trafficJams
       }) => {
         var _a;
-        return [createVNode(DrivingLine, {
-          "path": path
+        return [createVNode(TrafficDrivingLine, {
+          "path": path,
+          "trafficJams": trafficJams
         }, null), createVNode(TaxiCar, {
           "position": (_a = path[0]) != null ? _a : carPosition,
           "angle": angle != null ? angle : carAngle,
@@ -479,7 +488,7 @@ const SectionEndService = defineSetup("SectionEndService", function(props) {
         path
       }) => createVNode(DrivingLine, {
         "path": path,
-        "done": true
+        "status": "DONE"
       }, null)
     }, null), createVNode(StartEndPoint, {
       "type": "start",

package/dist/v3/business-components/DrivingLine/DrivingLine.d.ts

@@ -1,6 +1,9 @@
+import type { TrafficStatus } from "../../types/interface";
+type DrivingLineStatus = TrafficStatus | "DONE";
 export interface DrivingLineProps {
-    done?: boolean;
+    status?: DrivingLineStatus;
     path: [number, number][];
+    lineCap?: AMap.LineSharedOptions["lineCap"];
 }
 export declare const ADrivingLine: import("vue-demi").DefineComponent<import("vue-demi").ComponentObjectPropsOptions<DrivingLineProps>, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").EmitByProps<DrivingLineProps, Required<DrivingLineProps>>, never, import("vue-demi").PublicProps, DrivingLineProps, DrivingLineProps, import("vue-demi").SlotsType<{} & {
     default?: import("../../demi-polyfill").Slot | undefined;
@@ -11,3 +14,4 @@ export declare const GDrivingLine: import("vue-demi").DefineComponent<import("vu
 export declare const DrivingLine: import("vue-demi").DefineComponent<import("vue-demi").ComponentObjectPropsOptions<DrivingLineProps>, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").EmitByProps<DrivingLineProps, Required<DrivingLineProps>>, never, import("vue-demi").PublicProps, DrivingLineProps, DrivingLineProps, import("vue-demi").SlotsType<{} & {
     default?: import("../../demi-polyfill").Slot | undefined;
 }>>;
+export {};

package/dist/v3/business-components/DrivingLine/DrivingLine.js

@@ -7,24 +7,55 @@ import { createElement } from "../../demi-polyfill/demi-polyfill.js";
 import { useMapSupplier } from "../../hooks/useMapSupplier.js";
 import { defineSetup } from "../../types/helper.js";
 import { vec2lnglat } from "../../utils/transform.js";
+const trafficInnerColors = {
+  // UNKNOWN: "#487BF4",
+  UNKNOWN: "#00C875",
+  NORMAL: "#00C875",
+  SLOW: "#F9D100",
+  TRAFFIC_JAM: "#EB0E33",
+  HEAVY_TRAFFIC_JAM: "#99001A",
+  DONE: "#96B2CA"
+};
+const trafficOuterColors = {
+  // UNKNOWN: "#4175F1",
+  UNKNOWN: "#008559",
+  NORMAL: "#008559",
+  SLOW: "#B29400",
+  TRAFFIC_JAM: "#990D24",
+  HEAVY_TRAFFIC_JAM: "#4D000D",
+  DONE: "#7693AF"
+};
+const trafficBorderColors = {
+  // UNKNOWN: "#6C95F5",
+  UNKNOWN: "#00C875",
+  NORMAL: "#00C875",
+  SLOW: "#F9D100",
+  TRAFFIC_JAM: "#EB0E33",
+  HEAVY_TRAFFIC_JAM: "#99001A",
+  DONE: "#7693AF"
+};
 const ADrivingLine = defineSetup("ADrivingLine", function(props) {
   return () => {
+    const {
+      status = "UNKNOWN",
+      lineCap = "round"
+    } = props;
     const vw = window.innerWidth * 0.01;
     const strokeWidth = 1 * vw;
     const borderWidth = 0.13 * vw;
     const dirWidth = 0.24 * vw;
     const outlineWidth = 0.4 * vw;
     const dashLength = 0.3 * vw;
-    const strokeColorInner = props.done ? "#96B2CA" : "#487BF4";
-    const strokeColorOuter = props.done ? "#7693AF" : "#4175F1";
-    const strokeColorBorder = props.done ? "#7693AF" : "#6C95F5";
+    const strokeColorInner = trafficInnerColors[status];
+    const strokeColorOuter = trafficOuterColors[status];
+    const strokeColorBorder = trafficBorderColors[status];
     return createVNode("div", null, [createVNode(AmapPolyline, {
       "path": props.path,
       "strokeWeight": strokeWidth + 2 * borderWidth + 2 * outlineWidth,
       "strokeOpacity": 1,
       "strokeColor": strokeColorOuter,
       "lineJoin": "round",
-      "lineCap": "round",
+      "lineCap": lineCap,
       "zIndex": ZINDEX_LINE_LAYER
     }, null), createVNode(AmapPolyline, {
       "path": props.path,
@@ -32,7 +63,7 @@ const ADrivingLine = defineSetup("ADrivingLine", function(props) {
       "strokeOpacity": 1,
       "strokeColor": strokeColorBorder,
       "lineJoin": "round",
-      "lineCap": "round",
+      "lineCap": lineCap,
       "strokeStyle": "dashed",
       "strokeDasharray": [dashLength, dashLength * 0.5],
       "zIndex": ZINDEX_LINE_LAYER
@@ -42,7 +73,7 @@ const ADrivingLine = defineSetup("ADrivingLine", function(props) {
       "strokeOpacity": 1,
       "strokeColor": strokeColorInner,
       "lineJoin": "round",
-      "lineCap": "round",
+      "lineCap": lineCap,
       "zIndex": ZINDEX_LINE_LAYER
     }, null), createVNode(AmapPolyline, {
       "showDir": true,
@@ -51,7 +82,7 @@ const ADrivingLine = defineSetup("ADrivingLine", function(props) {
       "strokeOpacity": 1,
       "strokeColor": "transparent",
       "lineJoin": "round",
-      "lineCap": "round",
+      "lineCap": lineCap,
       "zIndex": ZINDEX_LINE_LAYER
     }, null)]);
   };
@@ -59,15 +90,18 @@ const ADrivingLine = defineSetup("ADrivingLine", function(props) {
 const GDrivingLine = defineSetup("GDrivingLine", function(props) {
   const pathRef = computed(() => props.path.map(vec2lnglat));
   return () => {
+    const {
+      status = "UNKNOWN"
+    } = props;
     const vw = window.innerWidth * 0.01;
     const repeat = 10 * vw;
     const strokeWidth = 1.25 * vw * 0.65;
     const borderWidth = 0.175 * vw * 0.65;
     const dirStrokeWeight = 0.375 * vw * 0.65;
     const outlineWidth = 0.45 * vw * 0.65;
-    const strokeColorInner = props.done ? "#96B2CA" : "#487BF4";
-    const strokeColorOuter = props.done ? "#7693AF" : "#4175F1";
-    const strokeColorBorder = props.done ? "#7693AF" : "#6C95F5";
+    const strokeColorInner = trafficInnerColors[status];
+    const strokeColorOuter = trafficOuterColors[status];
+    const strokeColorBorder = trafficBorderColors[status];
     return createVNode("div", null, [createVNode(GmapPolyline, {
       "path": pathRef.value,
       "strokeWeight": strokeWidth + 2 * borderWidth + 2 * outlineWidth,

package/dist/v3/business-components/DrivingRoute/DrivingRoute.d.ts

@@ -1,12 +1,13 @@
 import { type VNodeChild } from "../../demi-polyfill";
 import { type UseDrivingRouteProps } from "../../hooks/useDrivingRoute";
-import type { Point } from "../../types/interface";
+import type { Point, TrafficJams } from "../../types/interface";
 export type DrivingRouteRenderProps = {
     path: Point[];
     angle?: number;
     distance: number;
     duration: number;
     tolls?: number;
+    trafficJams?: TrafficJams;
 };
 export interface DrivingRouteProps extends UseDrivingRouteProps {
     render?: (props: DrivingRouteRenderProps) => VNodeChild;

package/dist/v3/business-components/DrivingRoute/DrivingRoute.js

@@ -14,7 +14,8 @@ const ADrivingRoute = defineSetup("ADrivingRoute", function(props, {
     path,
     distance,
     duration,
-    tolls
+    tolls,
+    trafficJams
   } = toRefs(useADrivingRoute(props).route);
   const {
     angleRef
@@ -29,7 +30,8 @@ const ADrivingRoute = defineSetup("ADrivingRoute", function(props, {
       angle: angleRef,
       distance,
       duration,
-      tolls
+      tolls,
+      trafficJams
     }))]);
   };
 });

package/dist/v3/business-components/TrafficDrivingLine/TrafficDrivingLine.d.ts

@@ -0,0 +1,8 @@
+import type { Point, TrafficJams } from "../../types/interface";
+export interface TrafficDrivingLineProps {
+    path: Point[];
+    trafficJams?: TrafficJams;
+}
+export declare const TrafficDrivingLine: import("vue").DefineComponent<import("vue").ComponentObjectPropsOptions<TrafficDrivingLineProps>, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").EmitByProps<TrafficDrivingLineProps, Required<TrafficDrivingLineProps>>, never, import("vue").PublicProps, TrafficDrivingLineProps, TrafficDrivingLineProps, import("vue").SlotsType<{} & {
+    default?: import("../../demi-polyfill").Slot | undefined;
+}>>;

package/dist/v3/business-components/TrafficDrivingLine/TrafficDrivingLine.js

@@ -0,0 +1,91 @@
+import { createVNode } from "vue";
+import { defineSetup } from "../../types/helper.js";
+import { stringifyPoint } from "../../utils/transform.js";
+import { DrivingLine } from "../DrivingLine/DrivingLine.js";
+const justifyFirstPointStatus = (firstPointStatus, secondPointStatus) => {
+  return (firstPointStatus === void 0 || firstPointStatus === "UNKNOWN") && !!secondPointStatus && secondPointStatus !== "UNKNOWN" ? secondPointStatus : firstPointStatus != null ? firstPointStatus : "UNKNOWN";
+};
+const createMulitpleLineByTrafficJams = (path, trafficJams) => {
+  var _a;
+  if (!trafficJams)
+    return [{
+      path,
+      status: "UNKNOWN"
+    }];
+  const firstPoint = path[0];
+  if (!firstPoint)
+    return [];
+  const multipleLines = [];
+  let line = {
+    path: [firstPoint],
+    status: justifyFirstPointStatus(trafficJams[stringifyPoint(firstPoint)], trafficJams[stringifyPoint(path[1])])
+  };
+  for (let idx = 2; idx < path.length; idx++) {
+    const point = path[idx];
+    const traffic = (_a = trafficJams[stringifyPoint(point)]) != null ? _a : "UNKNOWN";
+    line.path.push(point);
+    if (traffic === line.status)
+      continue;
+    multipleLines.push(line);
+    line = {
+      path: [point],
+      status: traffic
+    };
+  }
+  multipleLines.push(line);
+  return multipleLines;
+};
+const beautifyMultipleLines = (lines) => {
+  const max = lines.length - 1;
+  if (max === 0)
+    return [{
+      ...lines[0],
+      lineCap: "round"
+    }];
+  const totalPath = lines.flatMap((line) => line.path);
+  const totalLine = {
+    path: totalPath,
+    status: "NORMAL",
+    lineCap: "round"
+  };
+  const coveredLines = [];
+  for (const line of lines) {
+    const {
+      path,
+      status
+    } = line;
+    if (status !== "SLOW" && status !== "TRAFFIC_JAM" && status !== "HEAVY_TRAFFIC_JAM")
+      continue;
+    coveredLines.push({
+      status,
+      path,
+      lineCap: "butt"
+    });
+  }
+  const first = lines[0];
+  const ignoredLine = {
+    status: first.status,
+    path: first.path.slice(0, 2),
+    lineCap: "butt"
+  };
+  return [ignoredLine, totalLine, ...coveredLines];
+};
+const TrafficDrivingLine = defineSetup("TrafficDrivingLine", function(props) {
+  return () => {
+    const {
+      path,
+      trafficJams
+    } = props;
+    const multipleLines = createMulitpleLineByTrafficJams(path, trafficJams);
+    console.log("multipleLines = ", multipleLines);
+    const beautifiedLines = beautifyMultipleLines(multipleLines);
+    return createVNode("div", null, [beautifiedLines.map((line) => createVNode(DrivingLine, {
+      "path": line.path,
+      "status": line.status,
+      "lineCap": line.lineCap
+    }, null))]);
+  };
+});
+export {
+  TrafficDrivingLine
+};

package/dist/v3/business-components/TrafficDrivingLine/index.d.ts

@@ -0,0 +1 @@
+export * from "./TrafficDrivingLine";

package/dist/v3/business-components/TrafficDrivingLine/index.js

@@ -0,0 +1,4 @@
+import { TrafficDrivingLine } from "./TrafficDrivingLine.js";
+export {
+  TrafficDrivingLine
+};