es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo especificar la altitud para una capa de círculos o símbolos en Mapbox?

11 Jun, 2023 Programación

Tengo dos capas construidas sobre datos GeoJSON FeatureCollection. Una de ellas es de tipo circle y la otra es de tipo symbol. Aquí están:

enter image description here

La cosa es que, como puedes ver en nuestro proyecto, usamos edificios en 3D en el mapa y necesitamos que nuestros objetos estén a una cierta altitud sobre el suelo. La pregunta es, ¿cómo hacer esto en Mapbox?

Esto es lo que he intentado:

Coordenadas de la característica GeoJSON

Un tercer elemento OPCIONAL DEBERÍA ser la altura en metros por encima o por debajo del elipsoide de referencia WGS 84. En ausencia de valores de elevación, las aplicaciones sensibles a la altura o a la profundidad DEBERÍAN interpretar las posiciones como siendo a nivel local del suelo o del nivel del mar.
– Especificación GeoJSON.

He intentado establecer el tercer argumento para la geometría de una característica, que es un punto, pero no ayudó. Parece que el tercer valor simplemente está siendo ignorado.

return {
type: 'Feature',
id: l.id,
geometry: {
type: 'Point',
coordinates: [l.coordinates.lng, l.coordinates.lat, 50]
}
}

circle-translate

El desplazamiento de la geometría. Los valores son [x, y] donde los negativos indican izquierda y arriba, respectivamente.

He intentado establecer esto, pero el resultado parecía muy extraño, no parecía una elevación normal.

Ejemplo

He modificado un ejemplo de Mapbox para que puedas jugar con esto, aquí.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para establecer la altitud o altura de las características de GeoJSON en Mapbox, puedes usar el elemento opcional en tercera posición en las coordenadas de geometría de la característica, según lo especificado en la especificación de GeoJSON. Sin embargo, este enfoque puede no funcionar como se espera en Mapbox.

    Otro enfoque para ajustar la altura de las características por encima del nivel del suelo es usar la opción symbol-translate para las capas de símbolos con la biblioteca mapbox-gl-js. Esta opción te permite especificar un valor [x, y, z] de desplazamiento de posición del símbolo, donde el valor z es la compensación de altura en metros por encima del nivel del suelo.

    Sin embargo, este enfoque puede no funcionar bien con los edificios 3D en el mapa. Para posicionar con precisión características a una cierta altitud por encima del suelo y tener en cuenta los edificios 3D, puedes usar la propiedad altitude en la biblioteca mapbox-gl-js. Esta propiedad te permite establecer la compensación de altura de la cámara del mapa por encima del nivel del suelo. Al establecer la propiedad altitude en un valor mayor que 0, puedes posicionar las características a una cierta altura por encima del nivel del suelo y ajustar la altura de los edificios 3D.

    Aquí tienes un ejemplo de implementación:

    mapboxgl.accessToken = 'your-mapbox-access-token';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v10',
  center: [-73.9749, 40.7736],
  zoom: 15,
  pitch: 60
});

map.on('load', function() {
  map.setTerrain({
    source: 'mapbox-dem',
    exaggeration: 1.5
  });

  map.addLayer({
    id: 'circles',
    type: 'circle',
    source: {
      type: 'geojson',
      data: {
        type: 'FeatureCollection',
        features: [{
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [-73.9749, 40.7736, 50] // establecer altitud a 50 metros
          }
        },{
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [-73.9792, 40.7808, 25] // establecer altitud a 25 metros
          }
        }]
      }
    },
    paint: {
      'circle-color': '#f00',
      'circle-radius': 7,
      'circle-stroke-width': 2,
      'circle-stroke-color': '#fff'
    }
  });

  map.addLayer({
    id: 'symbols',
    type: 'symbol',
    source: {
      type: 'geojson',
      data: {
        type: 'FeatureCollection',
        features: [{
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [-73.9732, 40.7716, 50] // establecer altitud a 50 metros
          },
          properties: {
            'icon': 'monumento'
          }
        },{
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [-73.9805, 40.7805, 25] // establecer altitud a 25 metros
          },
          properties: {
            'icon': 'puerto'
          }
        }]
      }
    },
    layout: {
      'icon-image': '{icon}-15',
      'text-field': '{icon}',
      'text-font': ['Open Sans Regular', 'Arial Unicode MS Bold'],
      'text-size': 12,
      'text-offset': [0, 1]
    },
    paint: {
      'icon-color': '#f00',
      'icon-halo-color': '#fff',
      'icon-halo-width': 2
    }
  });

  map.setTerrain({
    source: 'mapbox-dem',
    exaggeration: 1.5
  });

  map.setLayerZoomRange('circles', 14, 24);
  map.setLayerZoomRange('symbols', 14, 24);
  map.setZoom(15);
  map.setPitch(60);
  map.setBearing(-60);
  map.setCenter([-73.9749, 40.7736]); 
  map.setAltitude(50); // establecer altitud de la cámara por encima del suelo a 50 metros
});

    En este ejemplo, se establece la altitud de las características mediante el elemento en tercera posición en las coordenadas de geometría de la característica. Sin embargo, la propiedad altitude se utiliza para ajustar la altura de la cámara por encima del nivel del suelo, lo que permite una posición precisa de las características a una cierta altura por encima del suelo y tener en cuenta los edificios 3D.

Comments are closed.