MapBox从入门到精通

Mapbox GL JS 是 Mapbox 核心的前端地图开发库，支持添加点、线、面、圆、符号、文本等各类矢量图形，主要通过数据源（Source） + 图层（Layer）的模式实现。以下是详细的添加方法和示例，涵盖常用图形类型：

一、基础准备：初始化地图

首先确保引入 Mapbox GL JS 并初始化地图（需提前申请 Mapbox Access Token）：

复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Mapbox 添加各类图形</title>
  <!-- 引入 Mapbox GL JS 核心库和样式 -->
  <link href="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.css" rel="stylesheet">
  <script src="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.js"></script>
  <style>
    body { margin: 0; padding: 0; }
    #map { width: 100vw; height: 100vh; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    // 初始化地图
    mapboxgl.accessToken = '你的Mapbox Access Token'; // 替换为自己的Token
    const map = new mapboxgl.Map({
      container: 'map', // 容器ID
      style: 'mapbox://styles/mapbox/streets-v12', // 基础地图样式
      center: [116.4074, 39.9042], // 初始中心点（北京）
      zoom: 12 // 初始缩放级别
    });

    // 地图加载完成后执行添加图形的逻辑
    map.on('load', () => {
      // 所有图形添加逻辑写在这里
    });
  </script>
</body>
</html>

二、核心概念：Source + Layer

Mapbox 中所有图形都需要先定义数据源（Source）（存储地理数据），再通过图层（Layer）（定义渲染样式）展示。

Source 类型：常用 geojson（兼容 GeoJSON 格式，支持点、线、面）、image（图片）、video（视频）等；

Layer 类型：根据图形类型选择，如 circle（圆）、line（线）、fill（面）、symbol（符号 / 文本）等。

三、各类图形添加示例

以下示例均写在 map.on('load', () => { ... }) 内部。

1. 点图形（Circle 图层：圆形点）

适合展示坐标点（如 POI、传感器位置），可自定义半径、颜色、透明度：

复制代码

// 1. 添加 GeoJSON 数据源（单个点）
map.addSource('point-source', {
  type: 'geojson',
  data: {
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [116.4074, 39.9042] // [经度, 纬度]
    },
    properties: { name: '天安门' } // 自定义属性（可选）
  }
});

// 2. 添加 Circle 图层渲染点
map.addLayer({
  id: 'point-layer', // 图层唯一ID
  type: 'circle', // 图层类型：圆形
  source: 'point-source', // 关联数据源
  paint: {
    'circle-radius': 10, // 圆半径（像素）
    'circle-color': '#FF5733', // 填充色
    'circle-opacity': 0.8, // 透明度
    'circle-stroke-width': 2, // 描边宽度
    'circle-stroke-color': '#FFFFFF' // 描边色
  }
});

2. 线图形（Line 图层：折线 / 曲线）

适合展示道路、轨迹、边界线等：

复制代码

// 1. 添加线数据源
map.addSource('line-source', {
  type: 'geojson',
  data: {
    type: 'Feature',
    geometry: {
      type: 'LineString',
      coordinates: [
        [116.35, 39.9], // 起点
        [116.4, 39.92], // 中点
        [116.45, 39.9]  // 终点
      ]
    }
  }
});

// 2. 添加 Line 图层渲染线
map.addLayer({
  id: 'line-layer',
  type: 'line',
  source: 'line-source',
  paint: {
    'line-width': 4, // 线宽度
    'line-color': '#3498DB', // 线颜色
    'line-dasharray': [2, 2], // 虚线（可选，[实线长度, 空白长度]）
    'line-opacity': 0.9 // 透明度
  }
});

3. 面图形（Fill 图层：多边形 / 区域）

适合展示行政区、湖泊、建筑区域等：

复制代码

// 1. 添加面数据源（多边形，闭合坐标）
map.addSource('fill-source', {
  type: 'geojson',
  data: {
    type: 'Feature',
    geometry: {
      type: 'Polygon',
      coordinates: [
        [
          [116.38, 39.89], // 顶点1
          [116.42, 39.89], // 顶点2
          [116.42, 39.92], // 顶点3
          [116.38, 39.92], // 顶点4
          [116.38, 39.89]  // 闭合点（与顶点1一致）
        ]
      ]
    }
  }
});

// 2. 添加 Fill 图层渲染面
map.addLayer({
  id: 'fill-layer',
  type: 'fill',
  source: 'fill-source',
  paint: {
    'fill-color': '#2ECC71', // 填充色
    'fill-opacity': 0.5, // 填充透明度
    'fill-outline-color': '#27AE60' // 面轮廓线颜色
  }
});