如何在Mapbox GL JS中围绕经纬度/点击点创建可编辑半径的圆形？

阿华AIGC实验室

2026-5-26

解决方案：在Mapbox GL JS中创建可点击生成、支持半径编辑的地理圆形

刚好之前做过类似的需求，来给你一步步拆解实现方法——核心是借助Turf.js的地理计算能力，结合Mapbox GL JS的图层和事件系统来完成：

1. 基础：围绕指定经纬度创建地理圆形

Mapbox GL JS本身没有原生的“地理圆形”图层，但我们可以用Turf.js的turf.circle()函数生成基于真实距离的圆形GeoJSON（区别于circle图层的像素圆点），再将其添加到地图中。

首先确保你引入了Turf.js（可以通过项目依赖安装或CDN引入），然后看基础实现代码：

// 初始化Mapbox地图
mapboxgl.accessToken = '你的Mapbox Access Token';
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v12',
  center: [-74.5, 40], // 示例中心点
  zoom: 10
});

// 地图加载完成后创建圆形
map.on('load', () => {
  // 用Turf生成圆形：参数依次是中心点坐标、半径（单位：米）、平滑度参数
  const centerCoords = [-74.5, 40];
  const circleRadius = 5000; // 5公里半径
  const circleGeoJSON = turf.circle(centerCoords, circleRadius, { steps: 64 });

  // 添加GeoJSON数据源
  map.addSource('custom-circle', {
    type: 'geojson',
    data: circleGeoJSON
  });

  // 添加填充图层来渲染圆形
  map.addLayer({
    id: 'circle-fill',
    type: 'fill',
    source: 'custom-circle',
    paint: {
      'fill-color': 'rgba(55, 148, 179, 0.3)', // 填充色半透明
      'fill-outline-color': '#3b9ddd' // 边框色
    }
  });
});

2. 点击地图点位生成圆形

接下来实现“点击地图生成圆形”的逻辑：我们先创建一个空的GeoJSON源，在用户点击地图时，获取点击的经纬度，生成新的圆形并更新数据源。

let circleSource; // 保存数据源引用，方便后续更新
let currentCircleCenter = null; // 保存当前圆形的中心点，用于后续编辑半径

map.on('load', () => {
  // 先添加空的GeoJSON源
  map.addSource('custom-circle', {
    type: 'geojson',
    data: { type: 'FeatureCollection', features: [] }
  });

  // 添加圆形渲染图层（和之前一致）
  map.addLayer({
    id: 'circle-fill',
    type: 'fill',
    source: 'custom-circle',
    paint: {
      'fill-color': 'rgba(55, 148, 179, 0.3)',
      'fill-outline-color': '#3b9ddd'
    }
  });

  circleSource = map.getSource('custom-circle');
});

// 监听地图点击事件
map.on('click', (e) => {
  // 获取点击的经纬度
  currentCircleCenter = [e.lngLat.lng, e.lngLat.lat];
  // 用默认半径生成圆形
  const defaultRadius = 5000;
  const newCircle = turf.circle(currentCircleCenter, defaultRadius, { steps: 64 });
  // 更新数据源
  circleSource.setData(newCircle);
});

3. 实现圆形半径编辑功能

要支持编辑半径，我们可以添加一个滑块控件，监听滑块的变化事件，结合当前保存的圆形中心点，重新生成圆形并更新数据源：

首先在HTML中添加滑块控件：

<!-- 放在地图容器外，设置绝对定位悬浮在地图上方 -->
<div style="position: absolute; top: 20px; left: 20px; z-index: 1000; padding: 10px; background: white; border-radius: 4px;">
  <label>圆形半径：<span id="radius-display">5000</span> 米</label>
  <input type="range" id="radius-slider" min="100" max="20000" value="5000" step="100">
</div>

然后在JS中添加滑块的监听逻辑：

// 监听滑块变化事件
document.getElementById('radius-slider').addEventListener('input', (e) => {
  // 如果还没有点击生成圆形，直接返回
  if (!currentCircleCenter) return;

  const newRadius = parseInt(e.target.value);
  // 更新显示的半径数值
  document.getElementById('radius-display').textContent = newRadius;
  // 重新生成圆形并更新数据源
  const updatedCircle = turf.circle(currentCircleCenter, newRadius, { steps: 64 });
  circleSource.setData(updatedCircle);
});