mapbox 测量 图层切换 画圈

在Mapbox中，你可以使用Mapbox GL JS来实现测量图层的切换和画圈功能。以下是一个简单的例子，展示了如何在地图上切换测量图层并绘制一个圆形区域：

// 初始化Mapbox地图
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; // 替换为你的Mapbox访问令牌
var map = new mapboxgl.Map({
    container: 'map', // 地图容器的DOM元素ID
    style: 'mapbox://styles/mapbox/streets-v11', // 地图样式
    center: [0, 0], // 初始中心点坐标
    zoom: 1 // 初始缩放级别
});
 
// 添加测量图层（这里以 geojson 源为例）
map.on('load', function() {
    map.addSource('measure-source', {
        type: 'geojson',
        data: {
            type: 'FeatureCollection',
            features: []
        }
    });
 
    map.addLayer({
        id: 'measure-layer',
        type: 'line',
        source: 'measure-source',
        layout: {
            'line-join': 'round',
            'line-cap': 'round'
        },
        paint: {
            'line-color': '#fbb03b',
            'line-width': 3
        }
    });
});
 
// 绘制圆形区域的函数
function drawCircle(center, radius) {
    // 使用Mapbox Studio样式创建一个圆形的GeoJSON
    var radiusInMeters = radius * 1000; // 将单位转换为米
    var coordinates = turf.circle(center, radiusInMeters, {units: 'meters'}).geometry.coordinates[0];
 
    // 更新源中的GeoJSON数据
    map.getSource('measure-source').setData({
        type: 'FeatureCollection',
        features: [{
            type: 'Feature',
            properties: {},
            geometry: {
                type: 'Polygon',
                coordinates: [coordinates]
            }
        }]
    });
}
 
// 假设你有一个事件来触发绘制圆形区域
map.on('click', function(e) {
    drawCircle(e.lngLat, 5); // 点击地图的任意位置，绘制半径为5公里的圆
});

在这个例子中，我们首先初始化了Mapbox地图，并在加载完成后添加了一个名为'measure-layer'的图层。drawCircle函数接受一个点的坐标和半径，然后使用Turf.js库创建一个圆形的GeoJSON，并更新Mapbox地图上的'measure-source'源。在地图上点击任意位置时，会触发绘制一个半径为5公里的圆形区域。

请确保你的项目中包含了Mapbox GL JS库以及Turf.js库，并且替换了访问令牌为你的实际值。