Mapbox GL-JS：为什么我在工作时会收到图像加载错误？

Question

我将一张图像加载到我的地图上以指示用户的 GPS 位置。我没有使用内置的 GPS 控制 Mapbox，我正在从外部获取数据并使用图像层和源显示它。只是一个蓝色的箭头。

当 javascript 执行时，它似乎按预期显示没有问题。但是，我收到了一个控制台错误，我担心在某些时候会出现问题（如果还没有，我只是还没有注意到。）

首先，我的控制台错误：

util.js:458 Image "arrow" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event.

这是我用来加载图像、图层和源的代码：

map.loadImage('images/gps/arrow.png', function(error, image) {
  if (error)
    throw error;
  map.addImage('arrow', image);
});


map.addSource('gps_point', {
  type: 'geojson',
  data: window.userLatestPoint
});


map.addLayer({
  "id": "gps_point",
  "type": "symbol",
  "source": "gps_point",
  "layout": {
    "icon-image": "arrow",
    "icon-allow-overlap": true,
    "text-allow-overlap": true,
    "icon-rotate": ["get", "rotate"]

  }
});

我不知道为什么这会引发错误，除非我做错了什么但无论如何 Mapbox 允许它。

Answer 1

loadImage 是一个异步操作，因此您应该在函数 loadImage.

的范围内添加对 addSource 和 addLayer 的调用

否则很可能图层在加载图像之前就开始绘制并引发这些错误，但由于图层定义中存在引用，最终在加载时可以查看。

你可以在官方文档example from Mapbox中看到这个好的做法

Mapbox GL-JS：为什么我在工作时会收到图像加载错误？

Mapbox GL-JS : Why am I getting an image load error when it works anyway?

mapbox

mapbox-gl-js