如何解决响应地图框图层,图标未出现
我在 React 应用程序中设置了一个地图框,它使用图标(标记)来渲染一些图层。最近我将一个 css 绘制层更改为一个图标,并将相关的 Image 添加到地图实例中。问题是新添加的图标在本地工作正常,但在部署到服务器时不起作用。我也在控制台上看到如下警告。
我为 Image 实例添加了日志,工作标记似乎记录为 data:image,但不工作的标记有一个 src。
我不知道这在本地工作正常,但在部署时无法工作。这里可能有什么问题。
与问题相关的层。
return [
{
id: `selected-${name}`,type: 'symbol',source: name,layout: {
'icon-image': selectedMarker || 'hollow-marker','icon-size': 1.1,'icon-allow-overlap': true,},filter: ['match',['get','isSelected'],'true',true,false],paint: {
'icon-color': borderColour,'text-color': borderColour,maxzoom: 24,minzoom: 0,weight: weight + 1,{
id: name,layout: {
'icon-image': marker || 'hollow-marker',weight,
];
将图像添加到地图实例
const wellIcon = new Image(30,30);
const { default: wellImage } = await import('images/search/well.png');
wellIcon.src = wellImage;
const documentIcon = new Image(15,15);
const { default: documentimage } = await import(
'images/search/document.png'
);
documentIcon.src = documentimage;
const selectedDocumentIcon = new Image(30,30);
const { default: selectedDocumentimage } = await import(
'images/search/selected-document.png'
);
selectedDocumentIcon.src = selectedDocumentimage;
mapInstance.on('load',() => {
innerSetMap(mapInstance);
setMapReference(mapInstance);
mapInstance.addImage(WELL_MARKER,wellIcon);
mapInstance.addImage(DOCUMENT_MARKER,documentIcon);
mapInstance.addImage(SELECTED_DOCUMENT_MARKER,selectedDocumentIcon);
mapInstance.addControl(new Minimap(),'bottom-left');
mapInstance.addControl(drawMap,'top-right');
innerSetDraw(drawMap);
mapInstance.resize();
});
解决方法
根据日志显示,由于 CORS 问题,最后一张图片尚未添加。这就是为什么最后一个图像记录为源链接而不是 base64 图像的原因。 Mapbox 需要一个预加载的图像,所以最后一个会导致错误,甚至其他图层的渲染也会受到干扰。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。