Mapbox 来自任何外部源的映射框图标？

我想从任何公开的在线来源向mapbox地图添加png图标

我尝试使用mapbox.com中的这个例子，它使用维基媒体中的png：

这是他们使用的png：

我可以把它从维基媒体的任何东西中换出来，但不能换其他任何东西。例如，将链接与此链接交换，它不会出现：

我在这里错过了什么

在地图上添加一个图标
正文{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}
mapboxgl.accessToken='pk.eyj1ijoibml0dhlqzwuilchijoid1rmlxpycyj9.NFk875-Fe6hoRCkGciG8yQ'；
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/streets-v11'
});
map.on（'load'，function（））{
map.loadImage(
'https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png',
函数（错误、图像）{
如果（错误）抛出错误；
地图添加图像（'cat'，图像）；
map.addSource（'点'{
'type'：'geojson'，
“数据”：{
“类型”：“功能集合”，
“特征”：[
{
“类型”：“特征”，
“几何学”：{
'类型'：'点'，
“坐标”：[0，0]
}
}
]
}
});
map.addLayer({
'id'：'points'，
“类型”：“符号”，
'来源'：'点'，
“布局”：{
'图标图像'：'猫'，
“图标大小”：0.25
}
});
}
);
});

问题在于浏览器的CORS设置。当我允许CORS时，图像加载很好

错误：

取 "来源" “null”已被CORS策略阻止：否 “Access Control Allow Origin”标头出现在请求的服务器上 资源。如果不透明的响应满足您的需要，请设置请求的 模式设置为“无cors”，以获取禁用cors的资源

什么是CORS：

您可以尝试此Chrome扩展以允许CORS:

---

你太棒了！我在做我自己的地图，我想可能是这样的。我所需要做的就是把我的html文件放在这个域中，它工作得很好。对于发展来说，这种扩展应该非常有用。谢谢