3 votos

D3 javascript y GeoJSON: líneas en el mapa de Estocolmo muy extrañas

Todo el código y los shapefiles que estoy utilizando están disponibles en este repositorio de GitHub .

Estoy intentando dibujar un mapa de Estocolmo con D3. El shapefile se ve bien en QGIS:

Stockholm Shapefile

Sin embargo, dibujar el GeoJSON produce algo que parece arte abstracto:.

Stockholm GeoJSON

¿Está mi shapefile corrupto o estoy haciendo algo mal?

Los pasos para producir mi GeoJSON son los siguientes:

  1. Abra el archivo Adm.shp como capa en QGIS
  2. Guardar la capa como GeoJSON
  3. Dibujar GeoJSON usando D3 en stockholm.html

He probado ogr2ogr en la línea de comandos también con los mismos resultados.

EDITAR

Hice algunas operaciones sobre las coordenadas, dividiendo lat por 1E4 y long por 1E5. El resultado se ve un poco mejor (pero lejos de la imagen que se ve en QGIS (probablemente un problema con la proyección?)):

enter image description here

4voto

Denis Kash Puntos 16

Su test.geojson le da este resultado, porque está proyectado como EPSG:3031 como se indica en los comentarios, y usted le está diciendo a d3 que esa es una proyección Mercator.

Si se reproyecta a EPSG:4326, como también se ha sugerido, lo que se espera es un mapa aplastado. Tu ubicación está más bien al norte. Recuerda que Mercator sólo proyecta bien alrededor del ecuador y que cuanto más al norte (o al sur) vayas, más distorsionadas estarán tus zonas.

Dado que tienes un archivo de forma proyectada como fuente, te sugiero que trabajes con proyecciones topojson .

Puedes generar tu topojson desde el shapefile así (siguiendo El bloque de Mike Bostock ):

topojson \
  --width 960 \
  --height 1160 \
  -s .25 \
  -o adm.json \
  -- adm=Adm.shp    

Entonces usa esto en d3:

var path = d3.geo.path()
    .projection(null);

El código completo:

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>

<script>
var width = 960,
    height = 1160;

var path = d3.geo.path()
    .projection(null);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("adm.json", function(error, stkhlm) {
  if (error) return console.error(error);
  svg.append("path")
      .datum(topojson.feature(stkhlm, stkhlm.objects.adm))
      .attr("d", path)
      .style("stroke", "white");
});
</script>

enter image description here

Así que no hay nada corrupto en sus coordenadas. Sin embargo, es conveniente que compruebes tu shapefile: hay múltiples polígonos superpuestos que cubren la misma zona. Como puede ver, el d3 muestra muchos más polígonos que lo que se ve con Qgis. Comprueba tu tabla de atributos: tienes 158 áreas administrativas, pero las áreas que ves con Qgis son mucho menos que eso.

i-Ciencias.com

I-Ciencias es una comunidad de estudiantes y amantes de la ciencia en la que puedes resolver tus problemas y dudas.
Puedes consultar las preguntas de otros usuarios, hacer tus propias preguntas o resolver las de los demás.

Powered by:

X