mapbox 如何实现框查圈查 具体实现代码

Mapbox GL JS 库提供了多种方式来实现框查圈查功能。以下是两种实现方式的示例代码：

1. 通过 `MapboxDraw` 插件实现：

// 创建地图对象
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [-122.4194, 37.7749],
  zoom: 13
});

// 添加 MapboxDraw 插件
var draw = new MapboxDraw();
map.addControl(draw, 'top-left');

// 监听绘制完成事件
map.on('draw.create', function(e) {
  var features = e.features;
  console.log(features);
  // 在这里处理绘制完成后的数据
});

// 开始绘制框选区域
draw.changeMode('draw_rectangle');

2. 通过 `turf.js` 库实现：

// 创建地图对象
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [-122.4194, 37.7749],
  zoom: 13
});

// 监听地图点击事件
map.on('click', function(e) {
  var radius = 100; // 圆形半径，单位：米
  var center = e.lngLat; // 圆心坐标
  var bbox = turf.bbox(turf.circle(center, radius)); // 计算圆形范围的边界框
  var features = map.queryRenderedFeatures(bbox); // 查询圆形范围内的地图要素
  console.log(features);
  // 在这里处理查询结果
});

以上代码仅供参考，具体实现方式可能因需求不同而有所差异。