如何使用自定义HTML按钮调用Mapbox GL JS绘制多边形函数？

Mapbox GL JS是一个基于WebGL的开源地图库，可以用于在网页上展示交互式的地图。要使用自定义HTML按钮调用Mapbox GL JS绘制多边形函数，可以按照以下步骤进行操作：

引入Mapbox GL JS库：在HTML文件的<head>标签中添加以下代码，引入Mapbox GL JS库。

<script src='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' rel='stylesheet' />

创建地图容器：在HTML文件的<body>标签中添加一个具有唯一ID的<div>元素，用于容纳地图。

<div id='map'></div>

初始化地图：在JavaScript代码中，使用Mapbox GL JS的API初始化地图，并设置地图的初始视图。

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [lng, lat], // 设置地图中心点的经纬度
  zoom: 12 // 设置地图缩放级别
});

请注意，上述代码中的YOUR_ACCESS_TOKEN需要替换为你自己的Mapbox访问令牌。

创建自定义HTML按钮：在HTML文件中添加一个自定义的HTML按钮，用于触发绘制多边形的函数。

<button id='draw-polygon'>绘制多边形</button>

编写绘制多边形的函数：在JavaScript代码中，编写一个函数，用于绘制多边形。该函数将在点击自定义HTML按钮时被调用。

document.getElementById('draw-polygon').addEventListener('click', function() {
  // 在这里编写绘制多边形的代码
});

调用Mapbox GL JS的绘制多边形方法：在绘制多边形的函数中，使用Mapbox GL JS的API调用绘制多边形的方法。

map.on('load', function() {
  map.addSource('draw-polygon', {
    'type': 'geojson',
    'data': {
      'type': 'FeatureCollection',
      'features': []
    }
  });

  map.addLayer({
    'id': 'draw-polygon',
    'type': 'fill',
    'source': 'draw-polygon',
    'layout': {},
    'paint': {
      'fill-color': '#088',
      'fill-opacity': 0.8
    }
  });

  map.on('click', function(e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['draw-polygon'] });

    if (features.length) {
      var id = features[0].id;
      map.setFeatureState({ source: 'draw-polygon', id: id }, { selected: true });
    } else {
      var feature = {
        'type': 'Feature',
        'geometry': {
          'type': 'Polygon',
          'coordinates': [[]]
        }
      };

      var source = map.getSource('draw-polygon');
      source.setData(feature);
    }
  });
});

以上代码中的绘制多边形函数使用了Mapbox GL JS的addSource、addLayer和setFeatureState等方法，用于创建多边形的数据源、图层，并实现多边形的绘制和选中效果。

这是一个基本的示例，你可以根据自己的需求进行进一步的定制和扩展。关于Mapbox GL JS的更多功能和API，你可以参考Mapbox GL JS官方文档。