Arcs 弧线

使用二次贝塞尔曲线在经纬度坐标对之间渲染弯曲弧线。支持点击和悬停交互。

MapArc 基于 MapLibre线图层构建——paint 和layout 属性接受LineLayerSpecification 的任何字段。

基本用法

MapWithArcs.tsx
123456789101112131415161718192021222324
import { Map, MapArc } from class="tk-string">"@/components/ui/map";

const arcs = [
  {
    id: class="tk-string">"arc-1",
    from: [-74.006, 40.7128], class=class="tk-string">"tk-comment">// 纽约
    to: [-87.6298, 41.8781],  class=class="tk-string">"tk-comment">// 芝加哥
  },
  {
    id: class="tk-string">"arc-2",
    from: [-74.006, 40.7128], class=class="tk-string">"tk-comment">// 纽约
    to: [-118.2437, 34.0522], class=class="tk-string">"tk-comment">// 洛杉矶
  },
];

export function MapWithArcs() {
  return (
    <div className=class="tk-string">"h-[320px] overflow-hidden rounded-lg">
      <Map blank center={[-95, 40]} zoom={3.5}>
        <MapArc data={arcs} />
      </Map>
    </div>
  );
}

控制曲率

curvature 控制弧线偏离直线的程度： 0 渲染为直线，正值弯曲更多，负值向相反方向弯曲。

123
<MapArc data={arcs} curvature={0.4} />
<MapArc data={arcs} curvature={0} /> {class=class="tk-string">"tk-comment">/* 直线 */}
<MapArc data={arcs} curvature={-0.3} /> {class=class="tk-string">"tk-comment">/* 反向弯曲 */}

自定义样式

通过 paint 和 layout 自定义线条样式：

12345678910111213
<MapArc
  data={arcs}
  paint={{
    class="tk-string">"line-color": class="tk-string">"#22d3ee",
    class="tk-string">"line-width": 3,
    class="tk-string">"line-opacity": 0.7,
    class="tk-string">"line-blur": 2,
  }}
  layout={{
    class="tk-string">"line-join": class="tk-string">"round",
    class="tk-string">"line-cap": class="tk-string">"round",
  }}
/>

数据驱动样式

使用 MapLibre 表达式实现每条弧线的独立样式：

12345678910111213
const arcs = [
  { id: class="tk-string">"1", from: [...], to: [...], color: class="tk-string">"#22d3ee", volume: 100 },
  { id: class="tk-string">"2", from: [...], to: [...], color: class="tk-string">"#f59e0b", volume: 200 },
];

<MapArc
  data={arcs}
  paint={{
    class="tk-string">"line-color": [class="tk-string">"get", class="tk-string">"color"],
    class="tk-string">"line-width": [class="tk-string">"*", [class="tk-string">"get", class="tk-string">"volume"], 0.02],
    class="tk-string">"line-opacity": 0.8,
  }}
/>

悬停高亮

使用 hoverPaint 高亮悬停的弧线：

12345678910111213141516171819
<MapArc
  data={arcs}
  paint={{
    class="tk-string">"line-color": class="tk-string">"#4285F4",
    class="tk-string">"line-width": 2,
    class="tk-string">"line-opacity": 0.6,
  }}
  hoverPaint={{
    class="tk-string">"line-color": class="tk-string">"#22d3ee",
    class="tk-string">"line-width": 4,
    class="tk-string">"line-opacity": 1,
  }}
  onHover={(e) => {
    if (e) console.log(class="tk-string">"悬停弧线:", e.id);
  }}
  onClick={(e) => {
    console.log(class="tk-string">"点击弧线:", e.id);
  }}
/>

属性

属性	类型	默认值	描述
`data`	`MapArcDatum[]`	—	弧线数据数组。每条需要唯一 id 和 from/to 坐标
`id`	`string`	自动生成	源/图层 id 前缀
`curvature`	`number`	`0.2`	弧线弯曲程度。0 为直线
`samples`	`number`	`64`	每条弧线的采样点数。越高越平滑
`paint`	`LineLayerSpecification['paint']`	默认蓝线	合并到默认值的绘制属性。支持 MapLibre 表达式
`layout`	`LineLayerSpecification['layout']`	默认圆角	合并到默认值的布局属性
`hoverPaint`	`LineLayerSpecification['paint']`	—	悬停时通过 feature-state 应用的绘制覆盖
`onClick`	`(e: MapArcEvent) => void`	—	弧线点击事件
`onHover`	`(e: MapArcEvent \| null) => void`	—	悬停弧线变化事件
`interactive`	`boolean`	`true`	响应鼠标事件
`beforeId`	`string`	—	在此图层 id 之前插入弧线图层

下一步

GeoJSON

MapGeoJSON 组件