Me gustaría superponer PNG simple sobre el centro de mi mapa. No sé cómo obtener las coordenadas para el cuadro delimitador. Traté de corregirlos de alguna manera con https://boundingbox.klokantech.com/ pero la imagen siempre está volteada (?). ¿Hay alguna forma de colocar la imagen con su relación de aspecto correcta en el centro de mi mapa? ¿O hay alguna forma de obtener las coordenadas correctas de alguna manera? Solo conozco la ubicación y el alto/ancho en píxeles de la imagen.
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 } }); });Creo que su imagen se ve volteada debido al orden de las posiciones que ha definido en la matriz de coordenadas. de acuerdo con el ejemplo aquí https://docs.mapbox.com/mapbox-gl-js/example/image-on-a-map/ la matriz de coordenadas debe definirse en el sentido de las agujas del reloj.
Su formato de cuadro delimitador es como "maxX,maxY,minX,minY". Si mapeamos esos valores en un rectángulo en el sentido de las agujas del reloj, se verá como se muestra a continuación.
three,two one,two xmin,ymax------->>>---------xmax,ymax | | | | | | | | | | 2 | | | | xmin,ymin-------<<<<--------xmax,ymin three,four 3 one,fourEntonces, el orden correcto de las coordenadas debe ser el siguiente.
map.addSource('area-overlay', { 'type': 'image', 'url': 'assets/images/map-2.png', 'coordinates': [ [three, two], [one, two], [one, four], [three, four], ] });