2021 年值得關注的React 5 大地圖庫
本文轉載自微信公眾號「TianTianUp」，作者小弋 。轉載本文請聯系TianTianUp公眾號。
大家好，我是小弋。
當你的項目需要使用地圖庫時，應該如何選擇呢?
接下來推薦一些能幫助您的項目選擇更好的地圖庫。
2021 年 React 的 5 大地圖庫
實施用戶友好、有效的地圖功能可能是一項具有挑戰性的任務。但是，如果你知道正確的工具，你可以讓它變得更容易。
因此，在本文中，我將介紹 React 的 5 個最佳地圖庫，并進行功能比較，以幫助您為下一個項目選擇最佳地圖庫。
主要推薦的庫如下：
- React Simple Maps
- Google Map React
- Deck.gl
- React Leaflet
- Pigeon Maps
每個庫都有自己的優缺點，下面簡單介紹一下。
React Simple Maps
滿足基本需求的輕量級簡單地圖
React 簡單地圖示例預覽
這個 React 庫允許快速創建 SVG 地圖，同時由庫本身負責平移、縮放和渲染功能。
React Simple Maps 不依賴于整個 d3 庫，而是圍繞著 d3-geo 和 topojson 庫，使得 React Simple Maps 非常輕量級。
React Simple Maps Bundle 大小
優點
- 該庫將地圖呈現為 SVG，這使得使用 HTML 處理起來非常容易。
- 可與其他 React 組件一起擴展。
- 一個輕量級的庫。
缺點
- 處理大量地圖數據時的性能問題。
- 較小的開發者社區。
這是一個維護良好的庫，每周 NPM 下載量超過 44,000 次，GitHub 星數超過 23,000。
假設您是初學者并嘗試添加一個簡單的 React 地圖組件以滿足基本需求。在這種情況下，我會為您推薦 React Simple Maps。
您可以使用 npm 或 yarn 輕松安裝它：
- npm install --save react-simple-maps
- yarn add --save react-simple-maps
Google Map React
用谷歌地圖 API 來實現地圖功能。
Google Map React預覽
Google Map React 庫是可用于 React 的最流行的地圖庫之一。這個庫是完全同構的，可以從服務器端渲染。
Google Map React 擁有超過 5000 顆 GitHub 星，每周大約有 184,000 次 NPM 下載。
優點
- 支持帶有懸停效果的自定義地圖標記。
- 使用內容豐富的 Google Map API 來獲取地圖數據。
- 同構渲染——客戶端和服務器端的地圖渲染支持。
- 如果 API 沒有響應，Google Map React 可以在瀏覽器中本地渲染基本地圖組件。
缺點
- 需要設置 Google 開發者帳戶和 API 密鑰。
- 對于生產和廣泛使用，您需要購買Google Map Service。
如果您正在尋找一個輕松的地圖組件來與您的 React 應用程序集成，Google Map React 是完美的解決方案，它可以使用 npm 或 yarn 安裝。
- npm install --save google-map-react
- yarn add google-map-react
Deck.gl
這是一個帶有帶有動畫的強大地圖庫。
動畫庫預覽
Deck.gl 是免費提供的最先進的高性能 React 地圖庫之一。這是基于 WebGL 的，能夠可視化大比例尺的地圖數據。
Deck.gl 是一個高度可定制的地圖庫，幾乎可以滿足任何地圖需求，因為它的架構易于擴展。
優點
- 高度可擴展和可定制的庫。
- 大型數據集的高性能渲染和更新。
- 交互式事件處理，例如拾取、突出顯示和過濾。
- 內置支持不同的圖層類型，如圖標、多邊形、文本;以及不同的視圖，例如第一人稱、正字法。
- 支持與主要基本地圖提供商的集成，包括 Mapbox、Google Maps 等。
缺點
- 客戶端機器渲染地圖的大量內存需求。
- 較少的瀏覽器兼容性和較少的跨平臺支持。
Deck.gl 每周下載量超過 45,000 次，在 GitHub 上擁有超過 8,000 顆星。它提供了良好的文檔，包括有關其功能和安裝的所有詳細信息。
如果您打算設計一個 React 應用程序來處理和顯示大量地圖數據，這可能是您的最佳選擇。
您可以使用 NPM 或 Yarn 輕松安裝 Deck.gl：
- npm install deck.gl --save
- yarn add deck.gl
注意：建議在集成此庫后對應用程序進行性能測試和可用性測試。
React Leaflet
滿足基本需求的移動響應式地圖。
React Leaflet 是一個簡單的地圖庫，具有開箱即用的圖層自定義支持。
該庫將現有的 javascript Leaflet庫包裝為 React 組件，使其簡單且適合移動設備。
優點
- 具有微調基本功能的簡單庫。
- 跨瀏覽器和平臺支持。
- 圖層自定義。
- 移動響應能力。
缺點
- 不支持服務器端渲染。
- 直接 DOM 調用是在加載階段進行的，這對于處理大量地圖數據來說可能會很麻煩。
React Leaflet 每周有超過 149K 的 NPM 下載量和 37K 的 GitHub 星數。
你可以使用 NPM 或 Yarn 來安裝 React Leaflet：
- npm install react react-dom leaflet
- npm install react-leafletyarn add react react-dom leaflet
- yarn add react-leaflet
Pigeon Maps
這是性能優先的地圖庫。
預覽 Pigeon Maps
Pigeon Maps 是一個輕量級的地圖庫，其主要目標是提供一個性能第一、以 React 為中心的可擴展地圖引擎。
Pigeon Maps 附帶 Open Street Maps (OSM)、MapTiler 和更多地圖圖塊提供商。但它也允許您與自定義地圖圖塊提供程序集成。
優點
- 輕量級和快速的地圖渲染。
- 自定義地圖圖塊提供程序支持。
- 移動優化的地圖控件。
缺點
- 與其他組件的可擴展性較差。
- 無法進行高級地圖自定義。
Piegon Map 擁有 3100 顆 GitHub 星，每周在 GitHub 上的下載量超過 3000 次。
如果您正在尋找響應式、移動性和性能優化的地圖庫，Pigeon Map 是您的不二之選。
您可以使用 NPM 或 Yarn 輕松安裝 Pigeon Map：
- npm install —-save pigeon-map
- yarn add pigeon-maps
小結
上面的地圖庫只是 React 可用的許多地圖庫的一個子集。但是，我展示了 5 個精心挑選的庫以及它們的優缺點。您可以在下表中找到它們在 GitHub 上的流行度。
趨勢對比
我希望我的建議能幫助您為您的項目選擇最好的地圖庫。
