Xin chào những bạn, trước tiên viết bài ở anduc.edu.vn, nên tất cả gì không đúng sót, mọi fan góp ý để cải thiện.
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 đồ việt nam với 2 quần hòn đảo Hoàng Sa cùng Trường Sa 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 nhì quần đảo Hoàng Sa cùng Trường Sa.
Ok. Ban đầu thôi nào.
SetupĐể vẽ bản đồ ở ReactJS, thì mình sẽ sử dụng 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 đọc qua doc của tủ sách để biết cách sử dụng chi tiết nhé.
Để cho nhanh thì mình đang lấy luôn 1 ví dụ sinh sống 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, sinh hoạt ví dụ này thì nó vẫn hiển thị phiên bản đồ cầm cố giới. Và cái bọn họ cần là bạn dạng đồ Việt Nam.
Vậy thì bọn họ sẽ thay thế cái geography prop bằng bản đồ của bọn 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 cùng geoJson là 2 loại định dạng chăm để mã hóa những 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 phiên bản đồ vn + Hoàng Sa và Trường SaĐể đem dữ liệu bạn dạng đồ Việt Nam. Các chúng ta cũng có thể truy cập vào trang gadm.org. GADM cung cấp phiên bản đồ cùng dữ liệu không khí cho tất cả các non sông và những khu vực.
Tìm kiếm Việt Nam, và tải về Shapefile.
Ở GADM, thì dữ liệu trang web này ko bao gồm Hoàng Sa cùng Trường Sa ở 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) cùng Spratly Islands (Trường Sa) và sở hữu Shapefile.
Xem thêm: Link Xem Trực Tiếp Tennis Djokovic Vô Địch Wimbledon 2019 Của Kate
Khi mua xong các bạn sẽ có 3 file:
gadm36_VNM_shp.zipgadm36_XPI_shp.zipgadm36_XSP_shp.zipChuyển đổi shapefile sang trọng topojsonBước tiếp theo, mình đề nghị chuyển 3 shapefile thành topojson. Mình đã nghĩ rằng gồm thể biến hóa 3 shapefile thành 1 file topojson nhằm hiển thị bởi react-simple-maps. Tuy vậy hiện trên thì react-simple-maps không cung ứng multi-layer topojson. Các bạn có thể xem issue sống đây
Nhưng cơ mà không sao, bọn họ vẫn có thể hiển thị 3 tệp tin topojson.
Để làm cho điều đó, chúng ta lần lượt cách xử trí từng file zip đã tải về bằng cách:
1. Import zip file
Truy cập vào trang https://mapshaper.org/, cùng import tệp tin zip vào
2. Chọn layer
Sau lúc import thì các bạn sẽ thấy phần bản đồ hiện nay ra.
Ở bản đồ việt nam thì các các bạn sẽ thấy có những 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í như ở vn thì 0 tương xứng với biên cương quốc gia, một là biên giới các tỉnh và tp trực thuộc trung ương...
Tùy vào nhu yếu sử dụng, các chúng ta có thể chọn màn chơi phù hợp. Ở trên đây mình chỉ cần hiển thị biên giới Việt Nam, buộc phải mình sẽ chọn lớp _0 và xóa hồ hết lớp khác.
3. Simplify (Điều chỉnh nấc độ cụ thể của bản đồ)
Sau lúc đã lựa chọn layer, các bạn cũng có thể chọn Simplify để điểu chỉnh mức độ đưa ra tiết bạn dạng đồ (bằng phương pháp kéo 1 slider). Bạn càng đơn giản dễ dàng hóa bạn dạng đồ thì kích thước file topojson càng gọn. Mình khuyên chúng ta nên dùng Simplify để làm gọn phiên bản đồ, vì thậm chí là khi giảm một nửa mức độ đưa ra tiết, họ cũng khó có thể nhận ra sự không giống biệt.
Ở đây, mình đã simplify bạn dạng đồ ở tầm mức độ 3% mang đến lớp Việt Nam
4. Export topojson
Sau khi sẽ Simplify, mình sẽ tiến hành export 3 layers theo định dang topojson
Các bạn tiếp tục thực hiện cách 1 - 4 cùng với 2 file zip sót lại (của quần đảo Hoàng Sa cùng Trường Sa). Lưu ý, là với 2 quần đào thì các bạn không nên Simplify hoặc Simplify không nhiều thôi, vì những đảo siêu nhỏ.
Khi hoàn thành, các các bạn sẽ có 3 file topojson.
Sử dụng file topojsonNhư vậy thì họ đã gồm 3 tệp tin json giành riêng cho 3 quần thể vực. Cùng như tôi đã nói thì đáng lẽ chỉ cần 1 file topojson gộp bình thường 3 layer tuy nhiên react-simple-maps không hỗ trợ.
Nhưng cũng rất đơn giản chúng ta có thể sử dụng 3 component Geographies nhằm hiển thị 3 quanh vùng sử dụng 3 file topojson đã export.
Để đơn giản dễ dàng 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 vẫn update code mình để hiển thị 3 khu vực bằng 3 Geographies component
const vietnam =
Oh. Nhưng lại mà sao cảm giác bản đồ bị nghiêng nghiêng vậy cà?
Ok, update code nào.
const vietnam =
Vậy là bọn họ đã gồm một bản đồ vn hoàn chỉnh bao hàm cả Hoàng Sa ngôi trường Sa.
Mình cũng xin ngừng bài share tại đây. Cảm ơn mọi tín đồ đã dành thời gian đọc. Nếu bao gồm sai sót gì vẫn ý muốn mọi tín đồ phản hồi tại đoạn bình luận.
Đây là source code của mình. Hầu hết người hoàn toàn có thể tham khảo: vietnam-map Codesandbox
