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' // 面轮廓线颜色 } });