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

以下是一个简单的Mapbox GL JS代码示例，演示如何实现框查圈查功能：

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

// 添加绘制工具
var draw = new MapboxDraw({
  displayControlsDefault: false,
  controls: {
    rectangle: true,
    circle: true,
    polygon: false,
    trash: true
  }
});
map.addControl(draw);

// 监听绘制完成事件
map.on('draw.create', function(e) {
  // 获取绘制区域的坐标信息
  var coords = e.features[0].geometry.coordinates;
  // 查询数据
  var features = map.queryRenderedFeatures(coords, { layers: ['my-layer'] });
  // 处理查询结果
  console.log(features);
});

// 添加数据源和图层
map.on('load', function() {
  map.addSource('my-source', {
    type: 'geojson',
    data: 'data.geojson',
    generateId: true,
    promoteId: 'id',
    buffer: 0,
    tolerance: 0.375,
    cluster: true,
    clusterRadius: 50,
    clusterMaxZoom: 14
  });
  map.addLayer({
    id: 'my-layer',
    type: 'symbol',
    source: 'my-source',
    layout: {
      'icon-image': 'my-icon'
    }
  });
});

代码解释：

1. 创建地图对象：使用Mapbox GL JS创建地图对象，设置地图样式、中心点和缩放级别等属性。

2. 添加绘制工具：使用Mapbox Draw添加绘制工具，包括矩形和圆形。

3. 监听绘制完成事件：监听绘制完成事件，获取绘制区域的坐标信息。

4. 查询数据：使用Mapbox GL JS提供的`queryRenderedFeatures`方法查询数据，该方法返回指定区域内渲染的所有要素。

5. 处理查询结果：处理查询结果，例如在地图上显示查询结果或者输出到控制台。

6. 添加数据源和图层：在地图加载完成后，添加数据源和图层，其中数据源可以是GeoJSON文件或者Mapbox服务。