Xin chào các bạn, lần thứ nhất viết bài bác ở dongphucmerriman.com, nên tất cả gì không đúng sót, mọi fan góp ý nhằm cải thiện.

Bạn đang xem: Dữ liệu bản đồ việt nam - shapefile

Nhân ngày Quốc Khánh nước Việt Nam, mình xin chia sẻ với chúng ta cách vẽ bản đồ việt nam với 2 quần hòn đảo Hoàng Sa cùng Trường Sa với ReactJS, đôi khi khẳng định hòa bình không thể tranh cãi với nhị quần hòn đảo Hoàng Sa và Trường Sa.

Ok. Ban đầu thôi nào.

Setup

Để vẽ maps ở ReactJS, thì bản thân sẽ thực hiện thư viện react-simple-maps

React Simple Maps

Create beautiful SVG maps in react with d3-geo and topojson using a declarative api.

Mọi người hãy tham khảo qua doc của tủ sách để biết phương pháp sử dụng chi tiết nhé.

Để cho nhanh thì mình sẽ lấy luôn 1 ví dụ sinh hoạt trang Examples của nó.

const geoUrl = "https://raw.githubusercontent.com/zcreativelabs/react-simple-maps/master/topojson-maps/world-110m.json";const MapChart = () => { return ( > ComposableMap> ZoomableGroup> Geographies geography=geoUrl> ( geographies ) => geographies.map(geo => ( Geography key=geo.rsmKey geography=geo /> )) /Geographies> /ZoomableGroup> /ComposableMap> /> );Ok, sống ví dụ này thì nó đang hiển thị phiên bản đồ cố gắng giới. Cùng cái họ cần là phiên bản đồ Việt Nam.

Xem thêm: Thiết Bảng Của Tôn Ngộ Không Viết Gì, Gậy Ngộ Không Giá Tốt Tháng 10, 2021

Vậy thì họ sẽ sửa chữa cái geography prop bằng phiên bản đồ của chúng ta.

geography prop có thể là một topojson hoặc geojson object, hoặc đường truyền tới topojson geojson object. (topojson và geoJson là 2 mẫu mã định dạng chuyên để mã hóa nhiều loại kết cấu dữ liệu địa lý)

Vậy, bọn họ sẽ phải file topojson của Vietnam.

Lấy dữ liệu bạn dạng đồ việt nam + Hoàng Sa và Trường Sa

Để mang dữ liệu phiên bản đồ Việt Nam. Các chúng ta cũng có thể truy cập vào trang gadm.org. GADM cung cấp bản đồ với dữ liệu không khí cho toàn bộ các tổ quốc và những khu vực.

Tìm kiếm Việt Nam, và tải về Shapefile.


*

Ở GADM, thì dữ liệu website này ko bao gồm Hoàng Sa cùng Trường Sa ở phiên bản đồ thiết yếu Việt Nam

Vì vậy, tiếp tục chúng ta tìm thêm Paracel Islands (Hoàng Sa) với Spratly Islands (Trường Sa) và cài đặt Shapefile.

Khi cài đặt xong các bạn sẽ có 3 file:

gadm36_VNM_shp.zipgadm36_XPI_shp.zipgadm36_XSP_shp.zipChuyển thay đổi shapefile sang topojson

Bước tiếp theo, mình yêu cầu chuyển 3 shapefile thành topojson. Mình đã nghĩ rằng gồm thể biến đổi 3 shapefile thành 1 file topojson nhằm hiển thị bằng react-simple-maps. Tuy nhiên hiện tại thì react-simple-maps không cung cấp multi-layer topojson. Các chúng ta có thể xem issue sống đây

Nhưng cơ mà không sao, họ vẫn có thể hiển thị 3 tệp tin topojson.

Để làm cho điều đó, các bạn lần lượt cách xử lý từng file zip đã tải về bằng cách:

1. Import zip file

Truy cập vào trang https://mapshaper.org/, và import tệp tin zip vào