Xin chào các bạn, lần đầu viết bài xích ở suachuadieuhoa68.com.vn, nên bao gồm gì sai sót, mọi tín đồ góp ý để cải thiện.

Bạn đang xem: Hoàng Sa District

Nhân ngày Quốc Khánh nước Việt Nam, bản thân xin share với các bạn cách vẽ bản đồ nước ta với 2 quần đảo Hoàng Sa với Trường Sa cùng với ReactJS, mặt khác khẳng định hòa bình không thể bất đồng quan điểm với hai quần hòn đảo Hoàng Sa với 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 & topojson using a declarative api.

Mọi người hãy xem thêm qua doc của tủ sách để biết phương pháp sử dụng cụ thể nhé.

Để cho nhanh thì mình đang lấy luôn 1 ví dụ ngơi nghỉ 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, ngơi nghỉ ví dụ này thì nó đang hiển thị bản đồ ráng giới. Và cái họ cần là phiên bản đồ Việt Nam.

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

geography prop rất có thể là một topojson hoặc geojson object, hoặc băng thông tới topojson geojson object. (topojson và geoJson là 2 mẫu mã định dạng siêng để mã hóa các loại kết cấu dữ liệu địa lý)

Vậy, họ sẽ yêu cầu file topojson của Vietnam.

Lấy dữ liệu bạn dạng đồ nước ta + Hoàng Sa cùng Trường Sa

Để lấy dữ liệu 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 dạng đồ với dữ liệu không gian cho toàn bộ các quốc gia và những khu vực.

Tìm kiếm Việt Nam, và download Shapefile.

*

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

Vì vậy, tiếp tục các bạn tìm thêm Paracel Islands (Hoàng Sa) cùng Spratly Islands (Trường Sa) và cài đặt Shapefile.

Xem thêm: Cài Đặt Google Assistant Tiếng Việt, Google Assistant

Khi tải xong các bạn sẽ có 3 file:

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

Bước tiếp theo, mình nên chuyển 3 shapefile thành topojson. Mình đã nghĩ rằng bao gồm thể biến đổi 3 shapefile thành 1 file topojson nhằm hiển thị bởi react-simple-maps. Mặc dù hiện trên thì react-simple-maps không cung cấp multi-layer topojson. Các bạn có thể xem issue nghỉ ngơi đây

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

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

1. Import zip file

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

*

2. Lựa chọn layer

Sau khi import thì các các bạn sẽ thấy phần bạn dạng đồ hiện tại ra.

Ở bản đồ nước ta thì các bạn sẽ thấy bao gồm layers khác nhau, như thể VNM_0, VNM_1, VNM_2. Số đuôi 1, 2, 3 khớp ứng với level của những đơn vị hành chính. Ví dụ như ở nước ta thì 0 tương ứng với biên thuỳ quốc gia, 1 là biên giới các tỉnh và tp trực ở trong trung ương...

Tùy vào nhu cầu sử dụng, các bạn cũng có thể chọn level phù hợp. Ở đây mình chỉ việc hiển thị biên cương Việt Nam, đề xuất mình sẽ lựa chọn lớp _0 cùng xóa hầu hết lớp khác.

*

3. Simplify (Điều chỉnh nút độ chi tiết của phiên bản đồ)

Sau khi đã lựa chọn layer, các chúng ta cũng có thể chọn Simplify để chỉ định mức độ bỏ ra tiết bạn dạng đồ (bằng giải pháp kéo 1 slider). Chúng ta càng dễ dàng hóa bạn dạng đồ thì size file topojson càng gọn. Mình khuyên các bạn nên dùng Simplify để gia công gọn phiên bản đồ, vì thậm chí là khi giảm một nửa mức độ bỏ ra tiết, họ cũng khó hoàn toàn có thể nhận ra sự không giống biệt.

Ở đây, mình sẽ simplify bạn dạng đồ ở tại mức độ 3% mang lại lớp Việt Nam

*

4. Export topojson

Sau khi đã Simplify, bản thân sẽ tiến hành export 3 layers theo định dang topojson

*

Các bạn thường xuyên thực hiện cách 1 - 4 cùng với 2 tệp tin zip sót lại (của quần đảo Hoàng Sa với Trường Sa). Lưu giữ ý, là cùng với 2 quần đào thì chúng ta không phải Simplify hoặc Simplify không nhiều thôi, vì các đảo vô cùng nhỏ.

Khi trả thành, các bạn sẽ có 3 file topojson.

Sử dụng file topojson

Như vậy thì họ đã có 3 tệp tin json dành riêng cho 3 khu vực. Cùng như tôi đã nói thì xứng đáng lẽ chỉ cần 1 file topojson gộp tầm thường 3 layer tuy nhiên react-simple-maps không hỗ trợ.

Nhưng cũng tương đối đơn giản chúng ta có thể sử dụng 3 component Geographies để hiển thị 3 khu vực sử dụng 3 tệp tin topojson đang export.

Để dễ dàng và đơn giản thì mình upload 3 file json lên gist.github.com.

const vietnamGeoUrl = "https://gist.githubusercontent.com/tandat2209/5eb797fc2bcc1c8b6d71271353a40ab4/raw/ca883f00b7843afeb7b6ad73ec4370ab514a8a90/gadm36_VNM_0.json";const paracelIslandsGeoUrl = "https://gist.githubusercontent.com/tandat2209/5eb797fc2bcc1c8b6d71271353a40ab4/raw/ca883f00b7843afeb7b6ad73ec4370ab514a8a90/gadm36_XPI_0.json";const spralyIslandsGeoUrl = "https://gist.githubusercontent.com/tandat2209/5eb797fc2bcc1c8b6d71271353a40ab4/raw/ca883f00b7843afeb7b6ad73ec4370ab514a8a90/gadm36_XSP_0.json";Việc còn sót lại thì mình đã update code mình nhằm hiển thị 3 khoanh vùng bằng 3 Geographies component

const vietnam = ;const MapChart = () => return ( ComposableMap style= width: "100%", height: "auto" > ZoomableGroup> vietnam.map((geoUrl) => ( Geographies key=geoUrl geography=geoUrl> ( geographies ) => geographies.map((geo) => ( Geography key=geo.rsmKey geography=geo /> )); /Geographies> )) /ZoomableGroup> /ComposableMap> );;Và họ có kết quả:

*

Oh. Dẫu vậy mà sao cảm giác phiên bản đồ bị nghiêng nghiêng vậy cà?

*

Ok, update code nào.

const vietnam = ;const MapChart = () => return ( ComposableMap projection="geoMercator" projectionConfig= scale: 1000, center: <105, 15> // coordinate of VietNam style= width: "100%", height: "auto" > ZoomableGroup> vietnam.map((geoUrl) => ( Geographies key=geoUrl geography=geoUrl> ( geographies ) => geographies.map((geo) => ( Geography key=geo.rsmKey geography=geo /> )) /Geographies> )) /ZoomableGroup> /ComposableMap> );;Và TADA, kết quả.!

*

Vậy là bọn họ đã tất cả một bản đồ nước ta hoàn chỉnh bao gồm cả Hoàng Sa trường Sa.

Mình cũng xin xong xuôi bài share tại đây. Cảm ơn mọi người đã dành thời gian đọc. Nếu gồm sai sót gì vẫn mong muốn mọi fan phản hồi ở trong phần bình luận.

Đây là source code của mình. đều người có thể tham khảo: vietnam-map Codesandbox