> ## Documentation Index
> Fetch the complete documentation index at: https://private-7c7dfe99-fix-nav-issues.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 服务地图

> 使用 ClickStack 服务地图可视化服务依赖关系和请求流向。

export const Image = ({img, alt, size}) => {
  return <Frame>
      <img src={img} alt={alt} />
    </Frame>;
};

export const galaxyOnClick = eventName => () => {
  try {
    if (typeof window !== "undefined" && window.galaxy && eventName) {
      window.galaxy.track(eventName, {
        interaction: "click"
      });
    }
  } catch (e) {}
};

export const BetaBadge = ({link, galaxyTrack, galaxyEvent}) => {
  if (link) {
    return <a href={link} target="_blank" rel="noopener noreferrer" className="betaBadge" onClick={galaxyTrack && galaxyEvent ? galaxyOnClick(galaxyEvent) : undefined}>
                <Icon />
                <span>Beta</span>
            </a>;
  }
  return <div className="betaBadge">
            <Icon />
            <span>
                Beta feature. 
                <u>
                    <a href="/docs/beta-and-experimental-features#beta-features">
                        Learn more.
                    </a>
                </u>
            </span>
        </div>;
};

服务地图可直观展示各个服务之间的交互关系。ClickStack 通过在同一个 trace 中匹配客户端 span (出站请求) 和服务端 span (入站请求) 来构建该图，从而重建服务之间的请求路径。

点击左侧导航面板中的 **Service Map** 以打开完整图谱。使用 OpenTelemetry [摄取 trace 数据](/zh/clickstack/ingesting-data) 后，服务就会显示出来。

<Image img="https://mintcdn.com/private-7c7dfe99-fix-nav-issues/huP88Vza7bEG09HU/images/clickstack/service-maps/service-map-overview.png?fit=max&auto=format&n=huP88Vza7bEG09HU&q=85&s=329e5af166964eaff835d053b0e275bb" alt="显示服务节点及其之间请求流的服务地图" size="lg" width="1999" height="981" data-path="images/clickstack/service-maps/service-map-overview.png" />

<div id="exploring-the-service-map">
  ## 探索服务地图
</div>

每个节点代表一个服务，由 `service.name` 资源属性标识。边 (虚线) 用于连接服务：当一个服务中的客户端 span 与另一个服务中的服务端 span 匹配时，就会显示一条连接。节点大小反映相对流量，红色节点表示在所选时间范围内出现错误的服务。

地图上方的工具栏可用于过滤和调整视图。

**数据源选择器** — 将地图过滤为特定的链路追踪数据源 (例如“ClickPy Traces”) 。

<Image img="https://mintcdn.com/private-7c7dfe99-fix-nav-issues/huP88Vza7bEG09HU/images/clickstack/service-maps/source-selector.png?fit=max&auto=format&n=huP88Vza7bEG09HU&q=85&s=ecf60d5b8facb6cfb3f65cd35b247cef" alt="服务地图工具栏中高亮显示的数据源选择器" size="lg" width="3838" height="138" data-path="images/clickstack/service-maps/source-selector.png" />

**采样滑块** — 调整采样率，以平衡性能和准确性。在高流量集群上，较低的采样率加载速度更快。

<Image img="https://mintcdn.com/private-7c7dfe99-fix-nav-issues/huP88Vza7bEG09HU/images/clickstack/service-maps/sampling.png?fit=max&auto=format&n=huP88Vza7bEG09HU&q=85&s=16194f0661fc21be9a57f287e0911aae" alt="服务地图工具栏中高亮显示的采样滑块" size="lg" width="3838" height="138" data-path="images/clickstack/service-maps/sampling.png" />

**日期范围选择器** — 设置用于构建地图的链路追踪数据时间窗口。

<Image img="https://mintcdn.com/private-7c7dfe99-fix-nav-issues/huP88Vza7bEG09HU/images/clickstack/service-maps/date-selector.png?fit=max&auto=format&n=huP88Vza7bEG09HU&q=85&s=24a2f1eff9a4ce5109d02911eb44b574" alt="服务地图工具栏中高亮显示的日期范围选择器" size="lg" width="3838" height="138" data-path="images/clickstack/service-maps/date-selector.png" />

使用地图左下角的 **+/-** 按钮，或滚动鼠标滚轮即可放大和缩小。

<div id="trace-level-service-maps">
  ## trace 级服务地图
</div>

查看单个 trace 时，聚焦式服务地图会显示该请求在各个服务之间的流转路径。这样，你无需离开 trace 瀑布图，就能查看单次请求的拓扑。

<Frame>
  <video src="https://mintcdn.com/private-7c7dfe99-fix-nav-issues/huP88Vza7bEG09HU/images/clickstack/service-maps/service-map-demo.mp4?fit=max&auto=format&n=huP88Vza7bEG09HU&q=85&s=9effbc631e45847c648c37f3b5e661a5" autoPlay loop muted playsInline width="100%" data-path="images/clickstack/service-maps/service-map-demo.mp4" />
</Frame>
