Làm cách nào để hiển thị tọa độ kinh độ vĩ độ trên bản đồ với D3?


16

Tôi đang cố gắng phủ lên các chấm của các tập hợp tọa độ kinh độ - vĩ độ tùy ý trên bản đồ Hoa Kỳ.

Cho đến nay tôi đã tìm thấy ví dụ bản đồ D3 , nhưng khi tôi cố gắng đặt các chấm trên tọa độ pixel X, Y, chúng xuất hiện cách khung vẽ. Tôi đã tìm thấy các ghi chú bài giảng làm việc bao gồm các hệ tọa độ trong d3 , nhưng tôi vẫn không chắc chắn làm thế nào để có được các hợp đồng lat / long xuất hiện trên bản đồ.

Đây là những gì tôi có cho đến nay (gần như chỉ có một bản đồ của Hoa Kỳ)

Tư vấn về cách làm cho công việc này sẽ được đánh giá rất cao!


d3 có đúng không?
Mapperz

Vâng, d3 là svg.
Jay Taylor

1
Một ví dụ điển hình về việc hiển thị svg thành bản đồ ở đây - github.com/kartograph/kartograph.py/wiki/iêu sử dụng Đường dẫn và Biện pháp
Mapperz

Câu trả lời:


15

Bạn cần có một hàm chiếu () để chiếu độ trễ và độ dài của các điểm của bạn lên bản đồ. Theo mặc định, đường dẫn địa lý d3 sử dụng phép chiếu albersUsa, do đó bạn có thể khai báo rõ ràng:

var projection = d3.geo.albersUsa();

Bạn sẽ thấy điều này được thực hiện trong các ví dụ không sử dụng AlbersUsa và bằng cách xác định phép chiếu, bạn có thể sửa đổi nó. Có nó được định nghĩa làm cho nó có sẵn như là một chức năng. Bằng cách này, bạn có thể đặt điểm của mình dưới dạng vòng tròn svg:

svg.append("circle").attr("r",5).attr("transform", function() {return "translate(" + projection([-75,43]) + ")";});

Điều đó sẽ thả một vòng tròn trên vùng lân cận của New York. Sau đó, bạn có thể liên kết dữ liệu có "lat" và "long" làm thuộc tính, trong trường hợp đó nó sẽ trông như thế này:

 svg.selectAll("circles.points")
.data(yourData)
.enter()
.append("circle")
.attr("r",5)
.attr("transform", function(d) {return "translate(" + projection([d.long,d.lat]) + ")";});

Hàm chiếu lấy mảng [dài, lat] và trả về mảng [x, y], phù hợp với cú pháp biến đổi, dịch () hoặc bạn có thể chia mảng cho các giá trị x và y.

Ví dụ dưới đây đặt polys, đường và điểm và lấy điểm từ csv và chiếu chúng lên bản đồ, nhưng lưu ý rằng nó biến đổi phần tử g và gắn một vòng tròn vào phần tử đó (bạn cũng có thể muốn có nhãn hoặc các khía cạnh khác vào một trang web, tất cả trong số đó sẽ được thêm vào phần tử g được chiếu đó):

https://gist.github.com/4414107 http://bl.ocks.org/d/4414107/

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.