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.

Obtén los límites de featureCollection en d3.

27 Jul, 2023 Programación

Desde este gist https://gist.github.com/mbertrand/5218300 obtuve un código de ejemplo para dibujar algunas características, que adapté para usar mi GeoJSON.

var features = [
    { "type": "Feature", "properties": {}, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 13.3921498, 52.476596, 31.64 ], [ 13.393036, 52.4765996, 31.6 ], [ 13.3934, 52.4765511, 31.87 ], [ 13.3935847, 52.4765058, 32.37 ], [ 13.3936657, 52.4764735, 32.16 ], [ 13.3936851, 52.4764164, 32.04 ], [ 13.3936229, 52.4761477, 32.05 ], [ 13.3934819, 52.4758929, 32.77 ], [ 13.3932546, 52.4756262, 32.56 ], [ 13.3930283, 52.4754013, 32.51 ], [ 13.3927091, 52.4751468, 32.64 ], [ 13.3923208, 52.4749337, 32.63 ], [ 13.3919094, 52.4747933, 33.13 ], [ 13.3917874, 52.4747948, 32.61 ], [ 13.391795, 52.4747857, 32.75 ], [ 13.3918985, 52.4747159, 33.03 ], [ 13.3921305, 52.4748218, 32.9 ], [ 13.3924295, 52.4749522, 32.21 ], [ 13.392583, 52.475059, 32.49 ], [ 13.3931511, 52.4753106, 32.74 ] ] ] } },
    { "type": "Feature", "properties": {}, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 13.3931511, 52.4753106, 32.74 ], [ 13.3934351, 52.475342, 32.43 ] ] ] } }
];

var bounds = d3.geo.bounds(features),
    topLeft = bounds[0],
    bottomRight = bounds[1];

Sin embargo, al depurar el script, topLeft y bottomRight son NaN.

Supongo que esto se debe a la estructura de geometría más compleja de mi JSON, que consta de geometrías de MultiLineString, no solo simples características de Point. ¿Alguna idea de cómo obtener los límites aquí?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Como se indica en la pregunta, el problema con la salida NaN para topLeft y bottomRight probablemente se debe a las geometrías MultiLineString complejas en el archivo GeoJSON.

    Para obtener los límites de estas geometrías más complejas, puedes utilizar el método d3.geo.path() para convertir las características del GeoJSON a coordenadas de pantalla, y luego utilizar d3.extent() para calcular la extensión de esas coordenadas de pantalla.

    Por ejemplo:

    var path = d3.geo.path();

var features = [ /* características del GeoJSON aquí */ ];

var bounds = features.reduce(function(bounds, feature) {
  var featureBounds = path.bounds(feature);
  return [
    [Math.min(bounds[0][0], featureBounds[0][0]), Math.min(bounds[0][1], featureBounds[0][1])],
    [Math.max(bounds[1][0], featureBounds[1][0]), Math.max(bounds[1][1], featureBounds[1][1])]
  ];
}, [[Infinity, Infinity], [-Infinity, -Infinity]]);

    Este código utiliza Array.reduce() para iterar a través de cada característica en el arreglo features, utilizando path.bounds() para calcular los límites de la característica en coordenadas de pantalla. El resultado se fusiona con los límites existentes utilizando Math.min() y Math.max().

    El valor inicial de la variable bounds se establece en [[Infinity, Infinity], [-Infinity, -Infinity]] para asegurar que cualquier límite calculado sea menor o mayor que los límites iniciales, respectivamente.

    Luego puedes utilizar la variable bounds para establecer las variables topLeft y bottomRight, de la siguiente manera:

    var topLeft = bounds[0];
var bottomRight = bounds[1];

    Esto debería darte los límites correctos de las características del GeoJSON.

Comments are closed.