[英]Add Image Overlay in Mapbox without knowing coordinates
I would like to overlay simple PNG over the center of my map.我想在我的地图中心覆盖简单的 PNG。 I don't know how to get the coordinates for the bounding box.
我不知道如何获取边界框的坐标。 I tried to get them somehow correct with https://boundingbox.klokantech.com/ but the image is always flipped (?).
我试图用https://boundingbox.klokantech.com/让它们以某种方式正确,但图像总是被翻转(?)。 Is there a way to place the image with its correct aspect ratio in the center of my map?
有没有办法将具有正确纵横比的图像放置在我的地图中心? Or is there any way to get the correct coordinates somehow?
或者有没有办法以某种方式获得正确的坐标? I only know the location and the height / width in pixels of the image.
我只知道图像的位置和高度/宽度(以像素为单位)。
const coords = "10.993519925619722,48.13225506915424,10.987678074385087,48.12892887698615"
const splitCoords = coords.split(',');
const one = splitCoords[0] * 1;
const two = splitCoords[1] * 1;
const three = splitCoords[2] * 1;
const four = splitCoords[3] * 1;
map.on('load', () => {
map.addSource('area-overlay', {
'type': 'image',
'url': 'assets/images/map-2.png',
'coordinates': [
[one, two],
[three, two],
[three, four],
[one, four],
]
});
map.addLayer({
id: 'area-layer',
'type': 'raster',
'source': 'area-overlay',
'paint': {
'raster-fade-duration': 0
}
});
});
i think your image looks flipped beacuse of the order of positions you have defined in coordinates array.我认为由于您在坐标数组中定义的位置顺序,您的图像看起来会翻转。 according to the example here https://docs.mapbox.com/mapbox-gl-js/example/image-on-a-map/ the coordinate array should be defined in clockwise order.
根据此处的示例https://docs.mapbox.com/mapbox-gl-js/example/image-on-a-map/坐标数组应按顺时针顺序定义。
Your boundingbox format is like "maxX,maxY,minX,minY".您的边界框格式类似于“maxX,maxY,minX,minY”。 If we map those values on a rectangle with clockwise order, it will look like as below.
如果我们将这些值按顺时针顺序映射到一个矩形上,它将如下所示。
three,two one,two
xmin,ymax------->>>---------xmax,ymax
| |
| |
| |
| |
| | 2
| |
| |
xmin,ymin-------<<<<--------xmax,ymin
three,four 3 one,four
So the right order of the coordinates should be as below.所以坐标的正确顺序应该如下。
map.addSource('area-overlay', {
'type': 'image',
'url': 'assets/images/map-2.png',
'coordinates': [
[three, two],
[one, two],
[one, four],
[three, four],
]
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.