Routes 路线

在地图上渲染连接坐标点的线/路线。支持点击和悬停交互，可构建路线选择 UI。

基本用法

MapWithRoute.tsx
123456789101112131415161718
import { Map, MapRoute } from class="tk-string">"@/components/ui/map";

const route = [
  [-74.006, 40.7128], class=class="tk-string">"tk-comment">// 纽约
  [-73.9857, 40.7484], class=class="tk-string">"tk-comment">// 帝国大厦
  [-73.9851, 40.7589], class=class="tk-string">"tk-comment">// 时代广场
  [-73.9724, 40.7831], class=class="tk-string">"tk-comment">// 中央公园
];

export function MapWithRoute() {
  return (
    <div className=class="tk-string">"h-[320px] overflow-hidden rounded-lg">
      <Map center={[-73.99, 40.75]} zoom={12}>
        <MapRoute coordinates={route} />
      </Map>
    </div>
  );
}

自定义样式

自定义路线颜色、宽度和透明度：

123456
<MapRoute
  coordinates={route}
  color=class="tk-string">"#ef4444"
  width={4}
  opacity={0.9}
/>

虚线

使用 dashArray 创建虚线：

123456
<MapRoute
  coordinates={route}
  color=class="tk-string">"#f59e0b"
  width={3}
  dashArray={[2, 2]}
/>

交互路线

启用鼠标事件以构建路线选择 UI：

InteractiveRoute.tsx
12345678910111213141516171819202122
import { Map, MapRoute } from class="tk-string">"@/components/ui/map";
import { useState } from class="tk-string">"react";

export function InteractiveRoute() {
  const [hovered, setHovered] = useState(false);

  return (
    <div className=class="tk-string">"h-[320px] overflow-hidden rounded-lg">
      <Map center={[-73.99, 40.75]} zoom={12}>
        <MapRoute
          coordinates={route}
          color={hovered ? class="tk-string">"#22d3ee" : class="tk-string">"#4285F4"}
          width={hovered ? 5 : 3}
          interactive
          onMouseEnter={() => setHovered(true)}
          onMouseLeave={() => setHovered(false)}
          onClick={() => console.log(class="tk-string">"路线被点击")}
        />
      </Map>
    </div>
  );
}

属性

属性	类型	默认值	描述
`id`	`string`	自动生成	路线图层的唯一标识符
`coordinates`	`[number, number][]`	—	坐标对数组 [经度, 纬度]
`color`	`string`	`"#4285F4"`	线条颜色（CSS 颜色值）
`width`	`number`	`3`	线条宽度（像素）
`opacity`	`number`	`0.8`	线条透明度（0-1）
`dashArray`	`[number, number]`	—	虚线模式 [线段长度, 间隔长度]
`onClick`	`() => void`	—	路线点击回调
`onMouseEnter`	`() => void`	—	鼠标进入路线回调
`onMouseLeave`	`() => void`	—	鼠标离开路线回调
`interactive`	`boolean`	`false`	响应鼠标事件

下一步

弧线

MapArc 组件