面向 Web 開發人員的最佳在線製圖工具調查：路線圖路線圖

已發表: 2022-03-11

沒有什麼能比得上一張好的、有用的地圖了。

今天，使用在線地圖是一個簡單而引人入勝的過程。 製作自己的在線地圖不再是一項艱鉅的任務； 我們擁有各種可用的在線地圖工具，從免費和簡單到功能豐富且使用複雜。 對於不熟悉 Web 製圖的 Web 開發人員來說，選擇的痛苦可能令人生畏。 您想製作地圖，但不知道從哪裡開始，也不知道使用哪些工具。 我是來幫助這個最好的映射工具列表的。

一點點歷史

從一開始，技術就對地圖製作和地圖的使用方式產生了影響。 隨著技術的進步，製圖和製圖過程也隨之發展，從在紙莎草紙上手動繪製的地圖到網絡上的交互式地圖。

面向 Web 開發人員的映射工具
映射過去。

20 世紀下半葉是製圖學的轉折點。 計算機成為​​首選工具。 航空攝影、衛星圖像和遙感改變了收集空間數據的方式。 地理信息系統 (GIS) 誕生了。 最終，GIS 地圖開始從桌面轉移到網絡，大型 GIS 供應商開始製作第一個在線地圖框架。

但 GIS 製圖並不容易。 它需要許多服務器端技術、地理空間標準和協議，以及它們的實現。 它需要了解地理空間數據和地圖投影，了解如何收集數據、如何顯示數據、使用哪種顏色、如何將數據概括為特定比例、如何在地圖上放置標籤、如何設置服務地圖的服務器，如何使用空間數據庫等等。 GIS充滿了縮寫，如WMS、WFS、EPSG、CRS、SLD、GML、TMS等等，要了解和理解它們，需要閱讀書籍、學術論文和文章。

在線地圖的演變

第一個 web 地圖通常只顯示一個非常小的地圖圖像。 當時，平移是通過在八個可能的指南針方向之一（N、NW、W、SW、S、SE、E、NE）上移動一步（通常是地圖大小的一半）來實現的。 用戶單擊平移或縮放按鈕後，需要在地圖服務器上渲染一個全新的圖像，通過網絡加載，然後由瀏覽器處理。 由於技術的限制，地圖只佔整個網頁很小的一部分。 為了獲得更好的交互性，早期的地圖需要 Flash 等插件或基於 Java 的專有插件，甚至是僅在 Internet Explorer 中工作的 ActiveX。

谷歌在 2005 年推出谷歌地圖時顛覆了地圖世界。在其創新中，谷歌通過拖動引入了連續平移。 他們的解決方案是顯示一張地圖，該地圖被分割成許多稱為“圖塊”的較小方形圖像。 這些瓦片是從“地圖瓦片服務器”渲染和提供的，通常為 256 x 256 像素。 縮放和平移現在只需要加載新的地圖圖塊，而不是重新加載整個網頁。 結果是一個更大的可見地圖，覆蓋了瀏覽器窗口的一半以上，並為探索地圖提供了流暢的體驗。 由於能夠通過平滑的縮放和平移功能“滑動”地圖，這些新地圖被稱為“滑動地圖”。 谷歌還允許編寫腳本，因此用戶可以將谷歌的地圖放在自己的網站上，並將自己的數據添加到地圖中。 這導致另一個新術語被創造出來：“地圖混搭”。

突然間，在線地圖變得流行起來； 要將漂亮的地圖添加到您的網站，您不再需要成為製圖師或 GIS 專家。 在“Web 2.0”運動的推動下，在 HTML5、CSS3 和 SVG 等現代技術的基礎上，可以輕鬆創建交互式內容，交互式地圖現在正在經歷新的複興。

在線地圖
未來的映射？

地圖數據

如前所述，早期的在線地圖基於 GIS 數據集及其空間地理數據庫。 沒有多少人可以訪問這些數據，更不用說它的價格標籤了。 谷歌和 OpenStreetMap (OSM) 項目數據集改變了這一點。 谷歌的數據庫是私有的並且有限制，而 OSM 的靈感來自維基百科的概念，作為一個創建免費世界地圖的協作項目。 OpenStreetMap 由志願者地圖繪製者社區構建，他們貢獻和維護空間數據。

簡而言之，今天有助於輕鬆製作地圖的最大革命是與維護地圖服務器和空間數據庫相關的麻煩已被消除。

選擇 Web 映射框架

那麼，有了所有選項，我們如何選擇正確的在線地圖工具？ 一方面，有谷歌、MapQuest、微軟和諾基亞等商業在線地圖提供商。 這些服務提供地圖圖塊和適當的 JavaScript API 來查看它們並與地圖交互。 另一方面，有一些開源地圖項目可以輕鬆加載基於 OpenStreetMap 的地圖圖塊。 其中包括 OpenLayers 和 Leaflet。 然後是 MapBox 和 CartoDB 等項目，它們的業務模型基於開源庫和 OSM 數據，提供附加值但不是免費的。

讓我們看一下這些類別中的一些示例。 在這裡，我將討論其中的幾個在線地圖工具，提供每個工具的簡要概述以及代碼示例，並權衡利弊。 我們還編寫了一個 D3.js 映射教程，您可能會覺得單獨閱讀它會很有趣。

谷歌地圖

讓我們從最明顯的選擇開始，谷歌地圖。 Google Maps API 的第一個版本於 2005 年 2 月推出，當前的 Google Maps API v3 於 2009 年 6 月推出。Google Maps API 不僅僅是 JavaScript API 端點； 它包含更多項目，並提供多種不同的方式將 Google 地圖嵌入到具有廣泛自定義功能的網頁中。

當前可用的 Google Maps API 包括：

  • 谷歌地圖 JavaScript API
  • 谷歌靜態地圖 API
  • 谷歌地圖嵌入 API
  • 適用於 iOS 的 Google 地圖 SDK
  • 谷歌地圖 Android API v2

為了幫助您選擇正確的 API，Google 開發了一個 API 選擇器。

值得注意的是，雖然基本 API 是免費的，但存在一些限制。 首先是地圖必須對最終用戶免費和公開訪問。 其次是使用限制：只要您的網站在任何 90 天內每天生成的地圖加載量不超過 25,000 次，該服務就是免費的。 如果您需要更大的比例尺或想要私人地圖，或者您正在運行企業或商業網站，您應該考慮為 Google Maps API for Work 付費。

執行

下面是一個如何在代碼中實現簡單的 Google 地圖的示例。 它展示瞭如何使用 API 創建一個簡單的地圖，在地圖上放置一個標記，並通過鼠標單擊打開一個彈出窗口。

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> </head> <body> <div></div> <script type="text/javascript"> var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: new google.maps.LatLng(45.8167, 15.9833), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow(); var marker = new google.maps.Marker({ position: new google.maps.LatLng(45.8167, 15.9833), map: map }); google.maps.event.addListener(marker, 'click', (function(marker) { return function() { infowindow.setContent("Zagreb"); infowindow.open(map, marker); } })(marker)); </script> </body> </html>

生成的地圖如下所示：

使用 API 的谷歌地圖

優點

  • 由谷歌開發和維護。
  • 許多不同的 API 用於在您的網站或應用程序中包含地圖。
  • 龐大的用戶社區。
  • 非常好的 API 文檔，有很多示例。

缺點

  • 我們確定我們不會在某個時候看到添加嗎？
  • 每個人都在使用它； 所有地圖（大部分）看起來都一樣。
  • 封閉和適當的 API。
  • 除了谷歌官方開發的插件外，沒有插件。
  • Google Maps for Work 的定價不明確。

開放層

OpenLayers 是由 MetaCarta 開發的與 Google Maps 相當的開源軟件，第一個版本於 2006 年 6 月發布。OpenLayers 是一個在線地圖工具，它實現了用於構建基於 Web 的豐富地理應用程序的 JavaScript API，其 API 類似於谷歌地圖 API。 OpenLayers 很快就獲得了很大的吸引力，並且一開始的發展也很快。 OpenLayers 2 在 2006 年 8 月版本 1 之後僅兩個月發布。該庫一直在開發中，並且不斷添加具有新功能的新版本。 這種快速進步的缺點是版本 2 庫變得非常龐大和笨重，最終達到 1MB 大小並包含超過 100,000 行代碼！ 儘管它具有許多功能，但普通用戶並不需要所有功能。

這是對其庫進行全面重寫的主要原因。 目標是針對最新的 HTML5 和 CSS3 功能，具有與 OpenLayers 2 相同的功能，例如支持投影、標準協議和編輯功能。 主要關注的是性能改進、更輕的構建、更漂亮的可視化組件和更好的 API。 這個大大改進的 OpenLayers 3 於 2014 年 8 月發布。

執行

讓我們看看與上一個示例中的地圖有何相同，這次使用的是 OpenLayers 3。

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://openlayers.org/en/v3.2.1/build/ol.js"></script> <link rel="stylesheet" href="http://openlayers.org/en/v3.2.1/css/ol.css" type="text/css"> <script src="http://openlayers.org/en/v3.2.1/resources/jquery.min.js"></script> <script src="http://openlayers.org/en/v3.2.1/resources/bootstrap/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://openlayers.org/en/v3.2.1/resources/bootstrap/css/bootstrap.min.css" type="text/css"> </head> <body> <div class="map"> <div></div> </div> <script type="text/javascript"> var iconFeature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.transform([15.9833, 45.8167], 'EPSG:4326', 'EPSG:3857')), name: 'Zagreb', }); var iconStyle = new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', opacity: 0.75, src: 'http://ol3js.org/en/master/examples/data/icon.png' })) }); iconFeature.setStyle(iconStyle); var vectorSource = new ol.source.Vector({ features: [iconFeature] }); var vectorLayer = new ol.layer.Vector({ source: vectorSource }); var map = new ol.Map({ target: document.getElementById('map'), layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer ], controls: ol.control.defaults(), view: new ol.View({ center: ol.proj.transform([15.9833, 45.8167], 'EPSG:4326', 'EPSG:3857'), zoom: 10 }) }); var element = document.getElementById('popup'); var popup = new ol.Overlay({ element: element, positioning: 'bottom-center', stopEvent: false }); map.addOverlay(popup); map.on('click', function(evt) { var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) { return feature; }); if (feature) { var geometry = feature.getGeometry(); var coord = geometry.getCoordinates(); popup.setPosition(coord); $(element).popover({ 'placement': 'top', 'html': true, 'content': feature.get('name') }); $(element).popover('show'); } else { $(element).popover('destroy'); } }); map.on('pointermove', function(e) { if (e.dragging) { $(element).popover('destroy'); return; } var pixel = map.getEventPixel(e.originalEvent); var hit = map.hasFeatureAtPixel(pixel); map.getTarget().style.cursor = hit ? 'pointer' : ''; }); </script> </body> </html>

結果：

使用 openlayers3 映射

優點

  • 免費和開源。
  • 功能豐富的庫，可滿足您的映射需求。
  • 很多例子。
  • 支持一系列數據類型和 GIS 標準。
  • 內置支持地圖投影和編輯功能。

缺點

  • 版本 3 仍在大力開發中，API 仍在隨著每個點的發布而變化。
  • 複雜的 API 語法。
  • 版本 3 文檔目前還沒有達到應有的全面性。

傳單

可以肯定地說，Leaflet 的誕生是為了應對 OpenLayers 的臃腫、雜亂和復雜性。 Vladimir Agafonkin 被要求圍繞 OpenLayers 構建一個包裝器，但他創建了一個簡單且輕量級的 OpenLayers 替代方案，並於 2011 年 5 月誕生了 Leaflet。 Vladimir 專注於這個在線地圖工具的簡單性、性能和可用性。 核心庫只有基本功能，對於大多數實際用例來說已經足夠了。 儘管如此，Leaflet 仍然可以使用大量易於開發和添加到核心庫之上的插件進行擴展。 此外，Leaflet 是在考慮移動支持的情況下從頭開始開發的。

Leaflet 易於使用，並具有文檔完善的 API，以及 GitHub 上提供的簡單源代碼。 由於它專注於性能、可用​​性、簡單性、小尺寸和移動支持，它比 OpenLayers 複雜得多。

Leaflet 的未來看起來也很有趣。 根據 Vladimir 的說法，他計劃讓下一個主要版本更加簡單，進一步提高性能，併升級插件基礎設施。

執行

這是和以前一樣的地圖，這次是使用 Leaflet 實現的。

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> </head> <body> <div></div> <script type="text/javascript"> var map = L.map('map').setView([45.8167, 15.9833], 10); var mbUrl = 'https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png'; L.tileLayer(mbUrl, {id: 'examples.map-i875mjb7'}).addTo(map); var marker = L.marker([45.8167, 15.9833]).bindPopup("Zagreb").addTo(map); </script> </body> </html>

使用傳單的地圖

優點

  • 免費和開源。
  • 小而快。
  • 簡單易用的 API 語法。
  • 移動友好。
  • 非常適合快速輕鬆地獲取在線地圖。
  • 大量示例和非常好的文檔。

缺點

  • 缺乏高級功能。

地圖框

一家名為 MapBox 的初創公司正試圖徹底改變在線製圖市場，其目標是構建更好看、更通用的在線地圖。 MapBox JavaScript API 使用 Leaflet，並被編寫為 Leaflet 插件。 它擴展了 Leaflet 功能，並與其他 MapBox Web 服務集成，包括用於用戶創建的自定義地圖和數據集的 MapBox 託管。 除了 JavaScript API，MapBox 還包括以下連接服務：

  • 移動 iOS 和 Android SDK。
  • 一組預先設計的地圖。
  • 無需映射庫即可顯示的靜態地圖。
  • 地理編碼服務。
  • 方向服務。

MapBox 不僅提供地圖服務，還提供數據訪問權限，包括私人獲取的衛星圖像、來自 NASA 的開放數據以及來自 OpenStreetMap 的社區驅動的世界數據。 數據樣式是使用 CartoCSS 完成的，CartoCSS 是 MapBox 創建的一種樣式格式，基於 CSS 和 LESS 樣式框架。 雖然 MapBox 服務提供免費套餐，但它的帶寬和存儲空間有限，而且對於任何認真使用該服務都必須付費。

許多大公司已經認識到 MapBox 提供的好處，並在他們自己的網站上使用它。 它們包括 Foursquare、Evernote、Pinterest、金融時報、GitHub 和 Etsy，僅舉幾例。

CartoCSS

這是一個光滑的 MapBox 地圖示例，它使用一種名為Pirates的樣式，由 MapBox 的設計師創建。 由於 MapBox 在 Leaflet 之上運行，因此將其嵌入到您的網頁中的代碼將類似於上面的 Leaflet 示例：

使用 cartocss 繪製地圖

如上所述，CartoCSS 用於在 MapBox 中設置矢量瓦片的樣式。 這是使用他們的 MapBox Studio 完成的，它也是開源的。 使用 MapBox Studio，可以從頭開始創建自己的地圖樣式，或者更改和擴展其他設計師創建的現有樣式。 一旦您的自定義地圖上傳到您的 MapBox 帳戶，您就可以使用 MapBox API 將其嵌入您的網站。

以下是用於獲取Pirates基礎層的 CartoCSS 示例：

 @name: '[name_en]'; @name_arrr: "[name_en].replace('([Aa]r)','\1rr')"; @land: #fff8f0; @water: #cdd; @park: #cda; Map { background-color:@land; background-image:url(img/noise.png); } #admin[maritime=0][zoom>=3] { line-join: round; line-color: #478; comp-op:multiply; // Countries [admin_level=2] { line-cap:round; line-width: 0.8; [zoom>=6] { line-width: 2; } [zoom>=8] { line-width: 4; } [disputed=1] { line-dasharray: 4,4; line-cap:butt; } } // States / Provices / Subregions [admin_level>=3] { line-width: 0.4; line-dasharray: 10,3,3,3; [zoom>=6] { line-width: 1; } [zoom>=8] { line-width: 2; } [zoom>=12] { line-width: 3; } } } @water_line:lighten(@water,8); #water { ::b { polygon-pattern-file:url(img/water.png); polygon-pattern-alignment:global; } polygon-fill: mix(@water,#fff,50); polygon-gamma: 0.6; comp-op:multiply; a/line-color:@water_line; a/line-width:-0.4; a/line-comp-op:multiply; a/line-smooth:2; b/line-color:@water_line; b/line-width:-0.4; b/line-comp-op:multiply; b/line-smooth:4; c/line-color:@water_line; c/line-width:-0.4; c/line-comp-op:multiply; c/line-smooth:6; [zoom>=12] { a/line-width:0.8; b/line-width:0.8; c/line-width:0.8; } } #waterway { comp-op:multiply; [type='river'], [type='canal'] { line-color: @water; line-width: 0.5; [zoom>=12] { line-width: 1; } [zoom>=14] { line-width: 2; } [zoom>=16] { line-width: 3; } } [type='stream'] { line-color: @water; line-width: 0.5; [zoom>=14] { line-width: 1; } [zoom>=16] { line-width: 2; } [zoom>=18] { line-width: 3; } } } #landuse { ::glow { comp-op:multiply; [class='park'],[class='pitch'],[class='school'] { line-width:2; line-join:round; [class='park'] { line-color:#ddb; } [class='pitch'] { line-color:#eed; } [class='school'] { line-color:#edb; } } } ::main[zoom>=0] { comp-op:multiply; [class='park'] { polygon-pattern-file:url(img/park.png); polygon-pattern-alignment:global; } [class='school'] { polygon-fill:#ed9; polygon-opacity:0.5; } } ::wood[class='wood'] { line-color:#C3CFB4; line-opacity:0.33; line-width:3; line-join:round; polygon-pattern-file:url(img/forest.png); polygon-pattern-alignment:global; comp-op:multiply; opacity:0.5; } } #building { polygon-fill:#efe8d8; comp-op:multiply; [zoom>=15] { line-color:#efe8d8 * 0.9; [zoom>=15] { line-width:0.2; } [zoom>=16] { line-width:0.4; } [zoom>=17] { line-width:0.8; } } } #tunnel { opacity: 0.5; } #road, #tunnel, #bridge { ['mapnik::geometry_type'=2] { line-width: 1; line-color:#edc; line-comp-op:multiply; [class='motorway'], [class='main'], [class='motorway_link']{ line-color:#dba; [zoom>=10] { line-width: 1; } [zoom>=12] { line-width: 2; } [zoom>=14] { line-width: 3; } [zoom>=16] { line-width: 5; } } [class='street'], [class='street_limited'] { [zoom>=13] { line-width: 1.4; } [zoom>=14] { line-width: 2; } [zoom>=16] { line-width: 3; } } [class='street_limited'] { line-dasharray: 4,1; } [class='path'] { line-dasharray: 3,2; } } }

啊，伙計！

帶有地圖框的地圖

在此處查看其他一些預先設計的 MapBox 樣式。

優點

  • 擴展傳單。
  • 詳細且無雲的衛星圖像的大型存儲庫。
  • 詳細的地形數據。
  • 大量的連接服務。
  • 開箱即用的精美設計地圖。
  • 用於樣式化和自定義現有地圖的圖形界面。

缺點

  • 好東西不是免費的。
  • 定價更多地基於流量而不是功能。

卡托數據庫

對於更複雜的地理空間數據可視化和分析，CartoDB 是目前最好的工具之一。 它是一種雲服務，可將地理數據存儲在名為 PostGIS 的雲中啟用空間的數據庫中，提供訪問數據的工具，使用 PostGIS 的空間和地理定位功能對其進行分析，並使用 Leaflet 進行顯示。

CartoDB 的創建是由於缺乏易於地理空間數據可視化和存儲的替代方案。 因此，CartoDB 可以被認為是 Google 的 Fusion Tables 的替代品。 用戶可以導入各種格式的數據集，包括 CSV、KML 或 Excel 表格，並將它們疊加在來自 Google、Here (Nokia) 或 OpenStreetMap 等常見來源的地圖上。 由於所有地理數據都存儲在真實數據庫中，因此可以使用 SQL 訪問和查詢數據，然後使用 CSS 設置樣式。

CartoDB 服務以“免費增值”形式提供； 將數據向公眾開放的用戶可以在 CartoDB 網站上免費託管他們的項目。 要存儲私人數據、導入超過 5MB 的數據或使用超過五個表，用戶必須訂閱高級計劃。

地理JSON

CartoDB 是一種數據可視化工具，因此它的使用方式與其他在線地圖工具示例略有不同。 您的 CartoDB 地圖將自動可視化地圖上具有地理參考坐標的任何數據。 因此，我們可以通過簡單地將其添加到 PostGIS 數據庫來顯示薩格勒布的標籤。 下面是一個 GeoJSON 格式的示例：

 { "type": "FeatureCollection", "features": [ { "type":"Feature", "geometry": { "type":"Point", "coordinates":[15.9833,45.8167] }, "properties": { "cartodb_id":1, "name":"Zagreb", "description":null, "created_at":"2015-02-20T21:02:16Z", "updated_at":"2015-02-20T21:03:59Z" } } ] }

使用 cartodb 映射

但是，要真正了解 CartoDB 的能力，請查看他們的圖庫。

優點

  • 非常適合管理和存儲地理空間數據。
  • 支持多種數據格式和大型數據集。
  • 基於經過驗證的開源產品，例如 Leaflet 和 PostGIS。
  • 免費增值模式。

缺點

  • 不是免費的。
  • 定價基於存儲的數據大小，如果使用非常大的數據集，這可能會變得昂貴。

Web 開發人員的其他選擇

這些是當前可用的最流行的映射框架，但還有其他鮮為人知的選項。 如果您與 Microsoft 生態系統相關聯，他們會提供類似於 Google 地圖的 API，稱為 Bing Maps API。

而且，我們不能不提到在線地圖世界中的恐龍 MapQuest。 它仍然存在並提供 MapQuest Mapping Tools。

如果您正在尋找一種稍微不同的地圖製作方法，Kartograph 很有趣，因為它的創建考慮了設計師和數據記者的需求。

樣式化你的地圖

所有這些框架都提供了一種自定義地圖樣式和外觀的方法。 MapBox 和 CartoDB 使用 CSS 或 CSS 的變體提供樣式。

在 Google 方面，第 3 版 Google Maps API 引入了自定義樣式的地圖。 這最終讓開發人員，尤其是設計師，有更多的空間來定制隨處可見的默認谷歌地圖設計，並使其更符合網站的整體視覺主題。 在豐富的 Google 地圖社區中，誕生了一些樣式資源。 最著名的是 Snazzy Maps，這是一個為 Google 地圖創建自定義樣式並免費分享的社區。

如果您決定使用 OpenLayers 或 Leaflet，那麼您只能使用預渲染的地圖圖塊。 幸運的是，有不同範圍的地圖圖塊可供選擇，從 Google、諾基亞、Bing 或默認 OSM 圖塊，到由設計師特別創建的圖塊，例如 Stamen。 要了解存在多少可用的地圖圖塊，或者它們之間的對比情況，請訪問 Streetmap Smackdown 或地圖比較網站。

網絡地圖和地圖工具的未來

地圖世界的未來看起來很有趣。 以下是一些幾年前看起來像科幻小說的新興技術：

  • Vector-Only - 在 D3.js 中使用矢量地圖而不是光柵圖像帶來了一個使用標準框架無法實現的新功能世界。 MapBox 也在朝著這個方向發展，基於 OpenGL 的 MapBox GL。
  • 3D - 三維地形和建築物現在出現在地圖中，並且 OpenLayers v3 附帶了對 Cesium 的內置支持。
  • Web 瀏覽器中的 GIS 和空間分析- 已經可以使用 Turf。 Turf 是一個 JavaScript 庫，支持空間和統計操作、數據分類和 GeoJSON 數據創建，所有這些都在瀏覽器中進行。

包起來

此處列出的每個最佳在線地圖工具都有其優點和缺點。 例如，代碼示例顯示了使用 Leaflet 的簡單性與 OpenLayers 帶來的複雜性。 但是 Leaflet 不會像 OpenLayers 那樣解決您複雜的空間問題。 選擇取決於您的需求。

總結一下：

  • 谷歌地圖- 完善的、成熟的地圖解決方案，特別是非開發人員在網絡上獲取基本地圖，以及谷歌 (in) 著名的所有權力。
  • OpenLayers - 適用於其他製圖框架無法解決您的空間分析問題的情況。
  • Leaflet - 目前，很容易成為用於一般映射目的的最佳映射框架，特別是如果您不需要 MapBox 或 CartoDB 提供的其他服務。
  • MapBox - 當您想要更多地控制地圖樣式或需要其他人不提供的服務（例如詳細的衛星圖像、地理編碼或方向）時，快速增長和市場變化的地圖解決方案。
  • CartoDB - 如果您有大量數據集，以不同的數據格式存儲，請不要再猶豫了。

進一步閱讀 Toptal 工程博客：

  • 使用更智能的緩存將地圖集群服務速度提高 50 倍