Pergunta

Estou tentando converter um shapefile de municípios mexicanos em um topojson e exibi-lo usando d3.js usando este tutorial http://bost.ocks.org/mike/map/#converting-data.Consegui convertê-lo, mas não consigo exibi-lo.Qualquer ajuda será muito apreciada.

Este é o meu fluxo de trabalho até agora:

1) Baixe e descompacte o shapefile

wget http://mapserver.inegi.org.mx/MGN/mgm2010v5_0a.zip 
unzip mgm2010v5_0a.zip 

2) Convertendo para JSON, reprojetando para lat-long e subdividindo o shapefile

ogr2ogr  -f GeoJSON -t_srs EPSG:4326 -where "CVE_ENT IN ('09')" df.json Municipios_2010_5A.shp

3) Convertendo para topojson

topojson --id-property OID -p name=OID -p name -o df2.json df.json 

4) E criando o código HTML

<!DOCTYPE html>
<meta charset="utf-8">
<style>

/* CSS goes here. */

</style>
<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 svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);

 d3.json("df2.json", function(error, df2) {
 svg.append("path")
  .datum(topojson.feature(df2, df2.objects.df))
  .attr("d", d3.geo.path().projection(d3.geo.mercator()));
 });

 </script>

Se eu executar o html, recebo uma página em branco.Alguma idéia sobre o que posso estar fazendo de errado?

Foi útil?

Solução

A opção mais simples, se você não for específico quanto à projeção, é apenas usar a projeção fornecida pelo shapefile (Lambert Conformal Conic).Usar topojsonsinalizadores de linha de comando --width e --height para redimensionar o shapefile projetado para um tamanho razoável.Por exemplo, se você quiser algo com 960px de largura, você poderia dizer:

topojson --width=960 --margin 20 --simplify=.1 -o mx.json -- municipalities.shp

(Isso também simplifica as coordenadas da tela, convenientemente.)

Um exemplo completo com um Makefile está em bl.ocks.org/9265467:

mexico

Se, por outro lado, você deseja especificar sua própria projeção, então é razoável usar ogr2ogr para desfazer a projeção e então definir uma projeção no navegador.Mas, nesse caso, você desejará especificar os parâmetros de projeção de forma adequada.Por exemplo, para recriar a mesma projeção no navegador, você pode dizer:

var projection = d3.geo.conicConformal()
    .rotate([102, 0])
    .center([0, 24])
    .parallels([17.5, 29.5])
    .scale(1850)
    .translate([width / 2, height / 2]);

(Mexe no centro e na escala conforme desejar para ajustar a janela de visualização desejada.) Essa abordagem alternativa é demonstrada em bl.ocks.org/9265674:

mexico 2

Geralmente prefiro usar coordenadas projetadas (a primeira abordagem, acima), pois são mais rápidas de renderizar e a simplificação é mais eficiente.Por outro lado, se você quiser alterar a projeção dinamicamente (reconhecidamente improvável com um shapefile tão complexo), então projetar no navegador é a melhor opção.E projetar no navegador é bom durante o desenvolvimento porque é mais fácil alterar os parâmetros e recarregar.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top