---
title: "样式与提供商"
description: "MapLibre GL JS 在浏览器中渲染地图。它不包含底图或托管的瓦片服务。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/scripts/maplibre/guides/styles-and-providers"
last_updated: "2026-08-11T09:33:18.078Z"
---

MapLibre GL JS 在浏览器中渲染地图。它不包含底图或托管的瓦片服务。

<table>
<thead>
  <tr>
    <th>
      部分
    </th>
    
    <th>
      功能
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      MapLibre GL JS
    </td>
    
    <td>
      使用 WebGL 渲染矢量或栅格数据源，并处理地图交互。
    </td>
  </tr>
  
  <tr>
    <td>
      样式 JSON
    </td>
    
    <td>
      定义数据源、图层、字体、图标、颜色和标签。
    </td>
  </tr>
  
  <tr>
    <td>
      瓦片服务
    </td>
    
    <td>
      托管样式所引用的矢量或栅格瓦片。
    </td>
  </tr>
  
  <tr>
    <td>
      地理数据
    </td>
    
    <td>
      提供道路、地点、边界和其他地图要素。
    </td>
  </tr>
</tbody>
</table>

传递给 `map-style` 的样式 URL 用于选择其余的技术栈：

```vue
<ScriptMapLibreMap
  :center="[144.9631, -37.8136]"
  map-style="https://tiles.openfreemap.org/styles/liberty"
/>
```

## OpenFreeMap

OpenFreeMap 提供无需 API 密钥的公共 MapLibre 兼容样式。其样式包含 OpenStreetMap 署名信息，并且其[服务条款](https://openfreemap.org/tos/)说明该公共服务按“现状”提供，可能发生变更或停止服务。

公共实例非常适合评估、原型开发，以及能够接受这种可用性模式的项目。当地图对运营至关重要时，请选择具有合同保障可用性的提供商，或自行托管 [OpenFreeMap 技术栈](https://github.com/hyperknot/openfreemap)。

## OpenMapTiles 和 OpenStreetMap

这些名称指的是技术栈中的不同部分：

- **OpenMapTiles** 是一种开放的矢量瓦片模式、工具链和样式集合。你可以通过托管服务商使用它，也可以自行提供兼容的样式和瓦片。
- **OpenStreetMap** 提供开放的地理数据。服务商可以将这些数据转换为供 MapLibre 样式使用的矢量瓦片。
- **OpenStreetMap 的标准瓦片服务** 根据单独的使用政策提供栅格图像。它不是上面示例中使用的矢量样式。

MapLibre 可以加载任何符合 MapLibre 样式规范的 URL 或内联对象。请确保自托管样式中的每个 source、sprite 和字体 URL 都可以从浏览器访问。

## 凭据与署名

托管服务提供商可能要求在样式 URL 或其源 URL 之一中提供 API 密钥。请将浏览器地图凭据视为公开信息，并在服务提供商的控制面板中按来源、API 作用域和配额对其进行限制。

MapLibre 会显示活动数据源声明的署名。请在渲染后的地图中进行验证，尤其是在编辑样式或替换其数据源之后。请勿遮挡或移除必需的署名。

## 保持服务提供商可替换

当不同环境使用不同服务时，将样式 URL 存储在运行时配置中：

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      mapStyleUrl: 'https://tiles.openfreemap.org/styles/liberty',
    },
  },
})
```

```vue
<script setup lang="ts">
const config = useRuntimeConfig()
</script>

<template>
  <ScriptMapLibreMap
    :center="[144.9631, -37.8136]"
    :map-style="config.public.mapStyleUrl"
  />
</template>
```