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.

Mapbox GL JS encuentra la dirección más cercana al punto clickeado.

11 Jul, 2023 Programación

Estoy intentando crear una aplicación web donde el usuario pueda hacer clic en un punto y obtener la dirección más cercana a ese punto. Este ejemplo de la documentación parece bastante similar a lo que quiero hacer, excepto que la función queryRenderedFeatures no parece devolver la dirección física de ninguna característica. ¿Cuál es la mejor manera de obtener la dirección física de un punto seleccionado?

Aquí está mi código:

map.on("click", (e) => {
  const features = map.queryRenderedFeatures(e.point);
  const displayProperties = [
    "type",
    "properties",
    "id",
    "layer",
    "source",
    "sourceLayer",
    "state",
  ];
  const displayFeatures = features.map((feat) => {
    const displayFeat = {};
    displayProperties.forEach((prop) => {
      displayFeat[prop] = feat[prop];
    });
    return displayFeat;
  });
  console.log(displayFeatures);
});
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El método queryRenderedFeatures devuelve una lista de características que se encuentran renderizadas dentro del punto dado. Dependiendo de cómo haya configurado su mapa y sus datos, estas características pueden o no incluir la dirección física de un punto en particular.

    Una forma de obtener la dirección física de un punto seleccionado es utilizar una API de geocodificación. Mapbox ofrece una API de geocodificación que le permite convertir una latitud y longitud en una dirección física o nombre de lugar. Puede utilizar el complemento mapbox-gl-geocoder para agregar una barra de búsqueda a su mapa que permita a los usuarios ingresar una dirección o nombre de lugar y luego hacer clic en el resultado para obtener la dirección más cercana al punto seleccionado.

    Alternativamente, si tiene acceso a un conjunto de datos que incluye direcciones físicas, puede utilizar una consulta espacial para encontrar la dirección más cercana al punto seleccionado. Por ejemplo, podría utilizar la biblioteca Turf para encontrar el punto más cercano al punto seleccionado y luego consultar su conjunto de datos para obtener la dirección asociada a ese punto.

    Aquí hay un ejemplo de cómo utilizar Turf.js para encontrar el punto más cercano a un punto seleccionado:

    map.on("click", (e) => {
  const features = map.queryRenderedFeatures(e.point);
  const nearestPoint = turf.nearestPoint(e.lngLat, turf.featureCollection(features));
  const nearestAddress = getAddressFromPoint(nearestPoint.geometry.coordinates);
  console.log(nearestAddress);
});

    En este ejemplo, getAddressFromPoint es una función que consulta su conjunto de datos para encontrar la dirección asociada con el punto dado. La función nearestPoint es parte de la biblioteca Turf y encuentra el punto más cercano en una colección de características a un punto dado.

Comments are closed.