Mapbox地图加载后绘制圆形报Style is not done loading如何解决

错误原因 #

Style is not done loading报错是因为Mapbox GL JS要求所有图层、数据源操作必须在底图样式完全加载完成后才能执行，直接在map.on('load')外部调用addLayer方法就会触发这个错误。

场景1：地图初始化完成后自动绘制圆形 #

直接将圆形绘制逻辑放到map.on('load')事件回调中即可：

// 地图初始化逻辑
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v12', // 替换为你的底图样式地址
  center: [116.40, 39.90], // 替换为你的初始中心点
  zoom: 10
});

map.on('load', function () {
  // 圆形绘制逻辑放在load事件回调内
  var center = turf.point(droneLocation);
  var radius = 0.5;
  var options = {
    steps: 80,
    units: 'kilometers'
  };
  var circle = turf.circle(center, radius, options);

  map.addLayer({
    "id": "circle-fill",
    "type": "fill",
    "source": {
      "type": "geojson",
      "data": circle
    },
    "paint": {
      "fill-color": "green",
      "fill-opacity": 0.3
    }
  });
});

场景2：用户点击按钮时才生成圆形 #

这种情况需要先判断地图是否加载完成，避免用户提前点击触发报错，同时还要处理重复点击导致的图层ID重复问题：

var mapIsLoaded = false;
// 地图初始化逻辑
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v12',
  center: [116.40, 39.90],
  zoom: 10
});

map.on('load', function () {
  mapIsLoaded = true;
});

// 按钮点击事件绑定，替换为你的按钮ID
document.getElementById('yourButtonId').addEventListener('click', function () {
  // 先判断地图是否加载完成
  if (!mapIsLoaded) return alert('地图还未加载完成，请稍后再试');

  var center = turf.point(droneLocation);
  var radius = 0.5;
  var options = {
    steps: 80,
    units: 'kilometers'
  };
  var circle = turf.circle(center, radius, options);

  // 判断图层是否已存在，存在则更新数据源，不存在则新建图层
  if (map.getLayer('circle-fill')) {
    map.getSource('circle-fill').setData(circle);
  } else {
    map.addLayer({
      "id": "circle-fill",
      "type": "fill",
      "source": {
        "type": "geojson",
        "data": circle
      },
      "paint": {
        "fill-color": "green",
        "fill-opacity": 0.3
      }
    });
  }
});

注意事项 #

• 如果需要多次修改圆形的位置、半径，直接调用map.getSource('circle-fill').setData(newCircle)更新数据源即可，不需要反复调用addLayer，性能更优。
• 如果需要删除圆形，依次调用map.removeLayer('circle-fill')和map.removeSource('circle-fill')即可。

内容的提问来源于stack exchange，提问作者Mehmet Can BOZ