Chuyển GeoJSON sang SVG bằng Javascript

Question

Có một plugin sẵn sàng sử dụng Javascript có thể biến đổi chuỗi GeoJSON thành chuỗi SVG không? Công cụ hiển thị, như Tempo hoặc dự án JsonT sẽ hữu ích, nhưng tôi cần mẫu để làm cho chúng hoạt động.

Answer 1

Bạn có thể xem xét GDAL, không chắc chắn liệu nó có hỗ trợ đầy đủ việc tạo SVG hay không, nhưng GDAL thường có thể chuyển đổi tất cả các định dạng địa lý thành các geoformats khác.

Xem: http://www.gdal.org/ogr/ogr_formats.html

Answer 2

Bạn có thể sử dụng thư viện d3.js. Sau đoạn mã sẽ thực hiện công việc:

Bao gồm d3.js trong file html của bạn

<script src="files/d3.v3.min.js"></script> 

Giả sử, bạn đã div với id bản đồ trong tập tin html của bạn:

<div id="map"></div> 

sau js đang sẽ thêm bản đồ vào bản đồ div của bạn. geoJsonObj là geojson của bạn.

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

svg.append("g") 
      .selectAll("path") 
      .data(geoJsonObj.features) 
      .enter().append("path") 
      .attr("d", path); 

Để xem ví dụ làm việc, hãy đi here. Lưu ý rằng ví dụ sử dụng topojson làm đầu vào cho thuộc tính .data().

Answer 3

Có công cụ cơ bản có sẵn để chuyển đổi geojson thành svg geojson2svg và cũng như npm module. Đầu ra từ geojson2svg là chuỗi svg để công cụ này có thể được sử dụng trong trình duyệt cũng như với node.js.

Rất dễ dàng để tách chuỗi svg thành phần tử dom. Điều này đã được giải thích bởi bobincehere rất độc đáo với mã JavaScript. Tôi đã thực hiện một số npm module để thuận tiện.

geojson2svg mang lại cho bạn sự linh hoạt hơn nhưng đối với giải pháp nhanh d3 thì tốt nhất.

Tuyên bố từ chối trách nhiệm: Tôi là tác giả của geojson2svg.