在 Mapbox 中添加图像 - 来源呢?
Adding image in Mapbox - what about the source?
我想在我在 mapbox 中准备的地图中添加一张图片。我阅读了文档,但问题是我无法找到如何将图像从我的电脑上传到 mapbox,因为在所有示例中似乎都有一些通过 mapbox 获取图像的来源。那么我可以将我的图片上传到 mapbox 中的某个地方吗?如果不行,还有什么解决办法?
我们可能有语言障碍,但您是想问如何在 Mapbox studio 之外向地图添加图像?如果是这样,这是我用于天气应用程序的示例。请注意,我将其设置为 "hidden" 但您可以根据需要进行修改。我现在没有时间为你修改太多,但你问的是 "what about the source",我在下面有一个解决方案。希望这可以满足您的需求。我添加了一些评论。
map.on('load', function() {
map.addSource("source_KEWX_L3_KDP", { // adding a source
"type": "image", // specify type
"url": "images/KEWX_L3_KDP.gif", // URL
"coordinates": [
[-102, 33],
[-94, 33],
[-94, 26],
[-102, 26]
]
})
// The following code places the image underneath my labels, this is not required.
var layers = map.getStyle().layers;
// Find the index of the first symbol layer in the map style
var firstSymbolId;
for (var i = 0; i < layers.length; i++) {
if (layers[i].type === 'symbol') {
firstSymbolId = layers[i].id;
break;
}
}
map.addLayer({ // Now we add the layer we created previously
"id": "overlay_KEWX_L3_KDP",
"source": "source_KEWX_L3_KDP",
"type": "raster",
"layout": {"visibility": "hidden"},
"paint": {
"raster-fade-duration": 0
},
}, firstSymbolId)
});
我想在我在 mapbox 中准备的地图中添加一张图片。我阅读了文档,但问题是我无法找到如何将图像从我的电脑上传到 mapbox,因为在所有示例中似乎都有一些通过 mapbox 获取图像的来源。那么我可以将我的图片上传到 mapbox 中的某个地方吗?如果不行,还有什么解决办法?
我们可能有语言障碍,但您是想问如何在 Mapbox studio 之外向地图添加图像?如果是这样,这是我用于天气应用程序的示例。请注意,我将其设置为 "hidden" 但您可以根据需要进行修改。我现在没有时间为你修改太多,但你问的是 "what about the source",我在下面有一个解决方案。希望这可以满足您的需求。我添加了一些评论。
map.on('load', function() {
map.addSource("source_KEWX_L3_KDP", { // adding a source
"type": "image", // specify type
"url": "images/KEWX_L3_KDP.gif", // URL
"coordinates": [
[-102, 33],
[-94, 33],
[-94, 26],
[-102, 26]
]
})
// The following code places the image underneath my labels, this is not required.
var layers = map.getStyle().layers;
// Find the index of the first symbol layer in the map style
var firstSymbolId;
for (var i = 0; i < layers.length; i++) {
if (layers[i].type === 'symbol') {
firstSymbolId = layers[i].id;
break;
}
}
map.addLayer({ // Now we add the layer we created previously
"id": "overlay_KEWX_L3_KDP",
"source": "source_KEWX_L3_KDP",
"type": "raster",
"layout": {"visibility": "hidden"},
"paint": {
"raster-fade-duration": 0
},
}, firstSymbolId)
});