2013-04-18 38 views
6

Tôi đang cố gắng tạo một Choropleth với d3.js nhưng tôi đã bị mắc kẹt ngay từ đầu. Tôi tìm thấy một Shapefile và tạo ra các tệp GeoJSON và TopoJson từ nó giống như here. Bản đồ sử dụng phép chiếu Albers-Siberia. Những gì tôi thấy về dự báo này:Bản đồ với d3.js và TopoJSON, Albers Siberia chiếu

chiếu: Albers Equal-Diện tích Conic

  • Đơn vị: Mét
  • hình cầu: Krasovsky
  • Trung kinh tuyến: 105
  • chuẩn Parallel 1: 52
  • Chuẩn song song 2: 64
  • Tham chiếu Latitude: 0
  • False hướng đông: 18500000
  • False Hướng về phía bắc: 0

PROJ.4: + Proj = AEA + lat_1 = 52 + lat_2 = 64 + lat_0 = 0 + lon_0 = 105 + x_0 = 18500000 + y_0 = 0 + ellps = krass + đơn vị = m + towgs84 = 28, -130, -95,0,0,0,0 + no_defs

MapInfo: "Albers-Siberia", 9, 1001, 7, 105, 0, 64, 52, 18500000, 0.

Vì vậy, tôi nhận được mã này cuối cùng và nó không làm gì cả (và thậm chí là freez up), có chuyện gì vậy?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Choropleth</title> 
    <script type="text/javascript" src="d3/d3.v3.js"></script> 
    <script type="text/javascript" src="d3/queue.v1.min.js"></script> 
    <script type="text/javascript" src="d3/topojson.v0.min.js"></script> 
</head> 
<body> 
    <h1>My Choropleth</h1> 
    <script type="text/javascript"> 

     var width = 960, 
      height = 500; 

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

     var pr = d3.geo.albers() 
      .center([105,0]) 
      .parallels([52, 64]) 
      .scale(1000); 


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

     d3.json("map_rus_topo.json", function(error, map) { 
     svg.append("path") 
      .datum(topojson.object(map, map.objects.map_rus)) 
      .attr("d", path); 
     }); 

    </script> 
</body> 

Bạn có thể tìm tất cả các tệp JSON here.
Và một câu hỏi khác: Làm cách nào tôi có thể tham chiếu đến giá trị của khu vực trường trong tệp TopoJson của tôi.

+0

Điều gì xảy ra chính xác khi bạn chạy mã? Bạn nhận được bất kỳ loại thông báo lỗi, đầu ra? –

+0

Không, không có lỗi trong bảng điều khiển. – KoGor

+0

Kích thước của tệp JSON có thể là một vấn đề. Bạn đã thử đơn giản hóa chúng hay chỉ chờ đợi lâu hơn một chút? –

Trả lời

17

Vấn đề đầu tiên là tệp GeoJSON của bạn không ở độ [kinh độ °, vĩ độ °], còn được gọi là EPSG:4326 or WGS 84. Để chuyển đổi tệp GeoJSON của bạn thành WGS 84, trước tiên bạn cần phải tạo một tệp chiếu, giả sử albers.prj để bạn có thể cho OGR biết phép chiếu nguồn là gì.

+proj=aea +lat_1=52 +lat_2=64 +lat_0=0 +lon_0=105 +x_0=18500000 +y_0=0 +ellps=krass +units=m +towgs84=28,-130,-95,0,0,0,0 +no_defs 

Sau đó, “unproject” file GeoJSON bằng cách chuyển đổi nó để WGS 84:

ogr2ogr -f GeoJSON -s_srs albers.prj -t_srs EPSG:4326 map_rus_wgs84_geo.json map_rus_geo.json 

Bây giờ bạn có thể chuyển đổi sang TopoJSON trong WGS 84, chứ không phải là tọa độ dự kiến. Tôi cũng đã tự do thực hiện một số đơn giản hóa:

topojson -o map_rus_wgs84_topo.json -s 1e-7 -- russia=map_rus_wgs84_geo.json 

Vấn đề thứ hai là định nghĩa chiếu của bạn trong D3 không chính xác. Phép chiếu d3.geo.albers có xoay và trung tâm mặc định được thiết kế cho bản đồ lấy nét làm trung tâm của Hoa Kỳ, do đó, ngoài việc xác định trung tâm, bạn cũng sẽ cần ghi đè xoay vòng mặc định. Thực tế, tham số dự báo + lon_0 (trung tâm kinh tuyến) ánh xạ tới vòng xoay của chiếu, chứ không phải là trung tâm của chiếu. Giving:

var projection = d3.geo.albers() 
    .rotate([-105, 0]) 
    .center([-10, 65]) 
    .parallels([52, 64]) 
    .scale(700) 
    .translate([width/2, height/2]); 

(Tôi fudged với tham số trung tâm để đưa Nga tại trung tâm của khung nhìn Bạn có thể compute this automatically nếu bạn thích..) Bây giờ bạn sẽ thấy một cái gì đó như thế này:

Albers Siberia

Nó cũng có thể làm việc với dự kiến ​​(Descartes) tọa độ trong TopoJSON, và sau đó xác định một d3.geo.path với một null sắc) chiếu (nhưng Tôi sẽ để điều đó cho một câu hỏi riêng.

+0

Thật tuyệt vời! Cảm ơn bạn, cho câu trả lời quá nhanh và đầy đủ. Tôi mới làm quen với tất cả những thứ này, lần đầu tiên tôi làm việc với bản đồ. – KoGor

+0

Ngoài ra, bạn có thể giải thích những gì làm cho --russia = trong mã này:> topojson -o map_rus_wgs84_topo.json -s 1e-7 - russia = map_rus_wgs84_geo.json. Và tôi không hiểu về các tọa độ trung tâm, liên kết mà U đưa ra là về thang máy tính tự động và các thông số dịch, hoặc tôi đã bỏ lỡ một số thứ. – KoGor

+1

Xem [Tham chiếu dòng lệnh TopoJSON] (https://github.com/mbostock/topojson/wiki/Command-Line-Reference) để xem giải thích đầy đủ. Ở trên, tôi đang sử dụng '-o' để chỉ định tên tệp đầu ra,' -s' để chỉ định ngưỡng đơn giản hóa trong steradians, và sau đó các tệp đầu vào theo dấu tách '--'. Chỉ có một tệp đầu vào ('map_rus_wgs84_geo.json'), và bằng tiền tố với' russia = ', tôi có thể đặt tên của đối tượng trong cấu trúc liên kết được tạo ra. Đó là lý do tại sao trong ví dụ liên kết, tôi tham khảo 'russia.objects.russia'. – mbostock

Các vấn đề liên quan