MapboxGL Wiki

简体中文

English

简体中文

English

Appearance

数据源和瓦片 ​

目的和范围 ​

本文档解释 Mapbox GL JS 如何管理地理数据源和为地图渲染过程提供支持的瓦片系统。它涵盖了库支持的各种数据源类型、如何在 style specification 中配置它们,以及用于在不同缩放级别高效加载和显示地理数据的基于瓦片的机制。

有关这些数据源如何在地图上渲染的信息,请参阅 渲染系统 和 图层渲染。

数据源系统概述 ​

数据源提供在地图上渲染的地理信息。Mapbox GL JS 支持各种 source 类型,从 vector 和 raster tiles 到 GeoJSON 数据和 media sources。Sources 由 Style 系统管理,并被 layers 引用以确定要渲染什么数据以及如何对其进行样式设置。

SVG
100%

数据源类型 ​

Mapbox GL JS 支持几种数据源类型,每种类型都有特定的能力和用例:

矢量数据源 ​

矢量数据源提供 vector tile 数据,这是一种使用 points、lines 和 polygons 的地理数据的紧凑表示。Vector tiles 在客户端渲染,允许动态样式设置和交互。

SVG
100%

栅格数据源 ​

栅格数据源提供 raster tile 数据,这些通常是预渲染的图像,用于卫星影像、terrain 可视化或其他基于图像的地图。

SVG
100%

GeoJSON数据源 ​

GeoJSON数据源允许直接使用 GeoJSON 数据,可以是内联的或来自外部 URL。这些 sources 非常适合中小型数据集和动态数据。

SVG
100%

图片和视频数据源 ​

图片和视频数据源在地图上显示地理参考的媒体,映射到特定的地理坐标。

SVG
100%

模型数据源 ​

模型数据源（实验性）支持用于高级可视化的 3D models。

Style 中的 Source 规范 ​

Sources 在 style specification 中定义,并被 layers 引用。以下是 sources 在 style 中的结构方式:

SVG
100%

通用 Source 属性 ​

所有 source 类型共享某些通用属性:

PropertyDescription
type必需。标识 source 类型（例如,"vector"、"raster"）
minzoom数据可用的最小缩放级别
maxzoom数据可用的最大缩放级别
attribution在地图上显示的归属文本

示例 Source 配置 ​

矢量数据源 ​

"mapbox-streets": {
  "type": "vector",
  "url": "mapbox://mapbox.mapbox-streets-v8",
  "minzoom": 0,
  "maxzoom": 14
}

栅格数据源 ​

"satellite": {
  "type": "raster",
  "url": "mapbox://mapbox.satellite",
  "tileSize": 256
}

GeoJSON 数据源 ​

"points": {
  "type": "geojson",
  "data": {
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [-122.4194, 37.7749]
        },
        "properties": {
          "name": "San Francisco"
        }
      }
    ]
  }
}

图片数据源 ​

"radar": {
  "type": "image",
  "url": "https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif",
  "coordinates": [
    [-80.425, 46.437],
    [-71.516, 46.437],
    [-71.516, 37.936],
    [-80.425, 37.936]
  ]
}

瓦片系统 ​

Mapbox GL JS 使用基于瓦片的系统来高效加载和显示不同缩放级别的地理数据。这种方法将世界划分为方形瓦片的网格,在更高的缩放级别提供更详细的瓦片。

瓦片坐标和方案 ​

SVG
100%

瓦片坐标表示为 {z}/{x}/{y},其中:

  • z 是缩放级别
  • x 是列（经度）
  • y 是行（纬度）

scheme 属性（xyz 或 tms）影响瓦片坐标的 y 方向。

缩放级别和过缩放 ​

SVG
100%
  • minzoom: 瓦片数据可用的最小缩放级别
  • maxzoom: 瓦片数据可用的最大缩放级别
  • 过缩放: 当查看地图的缩放级别超过 maxzoom 时,系统使用 maxzoom 的数据并将其放大

SourceCache 和瓦片管理 ​

SVG
100%
  • Source: 所有 source 类型的抽象基类
  • SourceCache: 管理 source 的瓦片集合
  • Tile: 表示单个地图瓦片及其数据和状态

与样式和渲染的集成 ​

数据源被 style specification 中的 layers 引用,在数据和其渲染方式之间建立连接。

SVG
100%

Source-Layer 关系 ​

Layers 通过其 source 属性引用 sources,对于 vector tiles,可以指定 source-layer 来定位 vector tile 中的特定数据。

{
  "id": "water",
  "source": "mapbox-streets",
  "source-layer": "water",
  "type": "fill",
  "paint": {
    "fill-color": "#00ffff"
  }
}

动态 Source 更新 ​

Sources 可以在添加到地图后动态更新:

// 更新 image source
map.getSource("radar").updateImage({url: newImageUrl});

这允许创建动画或实时更新的地图可视化。

结论 ​

数据源和瓦片系统是 Mapbox GL JS 的基本组成部分,提供在地图上可视化的地理数据。通过了解不同的 source 类型以及它们如何与瓦片系统和 style specification 交互,开发者可以有效地管理地图数据并创建丰富的交互式可视化。

有关 sources 如何由 workers 处理的更多信息,请参阅 Worker Architecture。有关 sources 如何被渲染系统使用的详细信息,请参阅 Rendering System。

Copyright © 2026 LZUGIS