---
title: "图块与署名"
description: "Leaflet 渲染并控制地图，但不提供地图图像。请为使用的每个栅格图块服务添加一个 ScriptLeafletTileLayer。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/scripts/leaflet/guides/tiles-and-attribution"
last_updated: "2026-08-11T09:33:17.560Z"
---

Leaflet 渲染并控制地图，但不提供地图图像。请为使用的每个栅格图块服务添加一个 `ScriptLeafletTileLayer`。

## 选择瓦片服务

瓦片 URL 通常包含 `{z}`、`{x}` 和 `{y}` 占位符：

```vue
<ScriptLeafletTileLayer
  url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
  :options="{
    maxZoom: 19,
    attribution: '&copy; <a href=&quot;https://www.openstreetmap.org/copyright&quot;>OpenStreetMap 贡献者</a>',
  }"
/>
```

对于生产环境，请检查服务的流量限制、缓存规则、允许的使用场景、隐私政策和可用性承诺。有些提供商要求 API 密钥或账户。其他提供商则提供可下载的瓦片，以便自行托管。

请将 URL 配置为可变更的形式，这样无需重写地图组件即可更换提供商：

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      mapTileUrl: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
    },
  },
})
```

```vue
<script setup lang="ts">
const config = useRuntimeConfig()
const tileAttribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap 贡献者</a>'
</script>

<template>
  <ScriptLeafletTileLayer
    :url="config.public.mapTileUrl"
    :options="{ attribution: tileAttribution }"
  />
</template>
```

## OpenStreetMap 的标准瓦片

OpenStreetMap 数据是开放的，但标准瓦片服务器是一项由捐赠资助的公共服务。它们不提供 SLA，并且可能会阻止违反[瓦片使用政策](https://operations.osmfoundation.org/policies/tiles/)的客户端。

使用 `tile.openstreetmap.org` 时：

- 在地图上保持显示 `© OpenStreetMap 贡献者`。
- 使用官方 HTTPS 瓦片 URL，并允许浏览器发送其正常的 referrer。
- 遵守 HTTP 缓存标头。不要强制瓦片绕过浏览器缓存。
- 不要批量下载、预取区域或添加离线下载功能。

基于浏览器的正常地图查看符合技术缓存和身份标识要求。代理、原生客户端或离线功能需要额外的工作，并且可能需要使用其他提供商。

## 归属信息

通过瓦片图层的 `options` 传递提供商所要求的归属信息。Leaflet 会在其归属信息控件中合并活动图层的归属信息。

不要让页面 UI 覆盖该控件，也不要移除它。如果你的地图使用了多个数据或影像来源，请包含每个来源所要求的归属信息。

## 失败回退

图块服务可能会拒绝请求或变得不可用，而页面的其余部分仍然正常运行。将重要位置保留在 HTML 中，并提供有用的错误状态：

```vue
<ScriptLeafletMap :center="[-37.8136, 144.9631]" :zoom="13">
  <template #error>
    <p role="alert">
      地图不可用。请使用位置列表选择一家门店。
    </p>
  </template>
</ScriptLeafletMap>
```