Mapbox调用getSource返回对象属性访问为undefined的问题

该现象由浏览器控制台的懒求值打印特性导致，和Mapbox API本身无关：

• 代码执行到console.log("Source:", source)时，控制台仅保存source对象的内存引用，不会立刻序列化对象全量属性生成快照
• 手动在控制台展开打印的source对象查看详情时，浏览器才会实时读取对象当前的所有属性值：此时Mapbox已经在后台异步完成矢量瓦片源的元数据请求，把vectorLayers、vectorLayerIds这类依赖元数据的字段挂载到source实例上，因此控制台中能看到这些字段
• 但在addSource之后同步执行source.vectorLayers读取属性时，矢量源元数据还未拉取完成，相关字段尚未挂载到source对象上，自然返回undefined

这类依赖异步加载的源属性，必须等源数据加载完成后再读取，两种常用实现：

• 监听单个source实例的data事件，判断加载完成后读取

map.on('load', () => {
  map.addSource("country-boundary-source", {
    type: "vector",
    url: "mapbox://mapbox.country-boundaries-v1"
  });

  const source = map.getSource("country-boundary-source");
  source.on('data', () => {
    if (source.loaded()) {
      // 此时属性已经挂载，可以正常读取
      console.log("vectorLayers:", source.vectorLayers);
      console.log("vectorLayerIds:", source.vectorLayerIds);
    }
  })
})

• 监听地图全局的sourcedata事件，匹配对应源ID后读取

map.on('load', () => {
  map.addSource("country-boundary-source", {
    type: "vector",
    url: "mapbox://mapbox.country-boundaries-v1"
  });

  map.on('sourcedata', (e) => {
    if (e.sourceId === "country-boundary-source" && e.isSourceLoaded) {
      const source = map.getSource("country-boundary-source");
      console.log("vectorLayers:", source.vectorLayers);
      console.log("vectorLayerIds:", source.vectorLayerIds);
    }
  })
})

提示：所有异步挂载属性的对象，只要在打印后立刻同步读取，都可能出现「控制台可见但代码访问为undefined」的情况，这是浏览器控制台的标准行为，不是框架或者API的bug。

内容的提问来源于stack exchange，提问作者justanotherguy