如何使用mapbox-gl-Draw创建8个点的矩形？

// 引入mapbox-gl和mapbox-gl-Draw库文件
import mapboxgl from 'mapbox-gl';
import MapboxDraw from '@mapbox/mapbox-gl-draw';

// 创建地图容器
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [lng, lat],
  zoom: 12
});

// 初始化mapbox-gl-Draw插件
const draw = new MapboxDraw();

// 将Draw插件添加到地图上
map.addControl(draw);

// 设置绘制模式为矩形模式
draw.changeMode('draw_rectangle');

// 监听绘制完成事件
map.on('draw.create', function(event) {
  const features = event.features;
  features.forEach(function(feature) {
    const coordinates = feature.geometry.coordinates[0];
    const rectangle = createRectangle(coordinates);
    map.addLayer(rectangle);
  });
});

// 创建8个点的矩形
function createRectangle(coordinates) {
  const marker1 = new mapboxgl.Marker().setLngLat(coordinates[0]).addTo(map);
  const marker2 = new mapboxgl.Marker().setLngLat(coordinates[1]).addTo(map);
  const marker3 = new mapboxgl.Marker().setLngLat(coordinates[2]).addTo(map);
  const marker4 = new mapboxgl.Marker().setLngLat(coordinates[3]).addTo(map);
  const marker5 = new mapboxgl.Marker().setLngLat(coordinates[4]).addTo(map);
  const marker6 = new mapboxgl.Marker().setLngLat(coordinates[5]).addTo(map);
  const marker7 = new mapboxgl.Marker().setLngLat(coordinates[6]).addTo(map);
  const marker8 = new mapboxgl.Marker().setLngLat(coordinates[7]).addTo(map);

  return [marker1, marker2, marker3, marker4, marker5, marker6, marker7, marker8];
}