• โฮมเพจ
  • บทความ
  • ทั่วไป
  • แบบสำรวจเครื่องมือสร้างแผนที่ออนไลน์ที่ดีที่สุดสำหรับนักพัฒนาเว็บ: แผนงานสู่แผนงาน

แบบสำรวจเครื่องมือสร้างแผนที่ออนไลน์ที่ดีที่สุดสำหรับนักพัฒนาเว็บ: แผนงานสู่แผนงาน

เผยแพร่แล้ว: 2022-03-11

ไม่มีอะไรดีเท่ากับแผนที่ที่ดีและมีประโยชน์

ปัจจุบัน การใช้แผนที่ออนไลน์เป็นกระบวนการที่ง่ายและมีส่วนร่วม การทำแผนที่ออนไลน์ของคุณเองไม่ใช่เรื่องใหญ่อีกต่อไป เรามีเครื่องมือทำแผนที่ออนไลน์มากมายให้เลือกใช้ ตั้งแต่แบบฟรีและเรียบง่าย ไปจนถึงคุณลักษณะที่สมบูรณ์และซับซ้อนในการใช้งาน สำหรับนักพัฒนาเว็บที่ไม่คุ้นเคยกับการทำแผนที่เว็บ ความเจ็บปวดจากการเลือกอาจเป็นเรื่องที่น่าวิตก คุณต้องการสร้างแผนที่ แต่ไม่รู้ว่าจะเริ่มต้นจากตรงไหนและใช้เครื่องมือใด ฉันพร้อมให้ความช่วยเหลือในรายการเครื่องมือทำแผนที่ที่ดีที่สุด

เกร็ดเล็กเกร็ดน้อยของประวัติศาสตร์

ตั้งแต่เริ่มต้น เทคโนโลยีมีอิทธิพลต่อการทำแผนที่และวิธีการใช้แผนที่ เมื่อเทคโนโลยีก้าวหน้าขึ้น กระบวนการทำแผนที่และการทำแผนที่ก็พัฒนาขึ้นด้วย ตั้งแต่แผนที่ที่วาดด้วยตนเองบนกระดาษปาปิรัสไปจนถึงแผนที่แบบโต้ตอบบนเว็บ

เครื่องมือทำแผนที่สำหรับนักพัฒนาเว็บ
การทำแผนที่ในอดีต

ช่วงครึ่งหลังของศตวรรษที่ 20 เป็นจุดเปลี่ยนของการทำแผนที่ คอมพิวเตอร์กลายเป็นเครื่องมือทางเลือก การถ่ายภาพทางอากาศ ภาพถ่ายดาวเทียม และการสำรวจระยะไกลได้เปลี่ยนวิธีการรวบรวมข้อมูลเชิงพื้นที่ ระบบสารสนเทศภูมิศาสตร์ (GIS) ถือกำเนิดขึ้น ในที่สุด แผนที่ GIS เริ่มย้ายจากเดสก์ท็อปไปยังเว็บ และผู้จำหน่าย GIS รายใหญ่เริ่มสร้างเฟรมเวิร์กแรกสำหรับแผนที่ออนไลน์

แต่การทำแผนที่ GIS ไม่ใช่เรื่องง่าย มันต้องการเทคโนโลยีฝั่งเซิร์ฟเวอร์ มาตรฐานเชิงพื้นที่ และโปรโตคอลจำนวนมาก พร้อมกับการใช้งาน ต้องใช้ความเข้าใจข้อมูลเชิงพื้นที่และการคาดคะเนแผนที่ ความรู้ในการรวบรวมข้อมูล วิธีแสดงข้อมูล สีที่จะใช้ วิธีสรุปข้อมูลให้เป็นมาตราส่วนเฉพาะ วิธีการวางป้ายชื่อบนแผนที่ วิธีการตั้งค่า เซิร์ฟเวอร์ที่จะให้บริการแผนที่ วิธีการใช้ฐานข้อมูลเชิงพื้นที่ และอื่นๆ GIS เต็มไปด้วยคำย่อ เช่น WMS, WFS, EPSG, CRS, SLD, GML, TMS และหากต้องการทราบและทำความเข้าใจ คุณต้องอ่านหนังสือ เอกสารวิชาการ และบทความต่างๆ

วิวัฒนาการของการทำแผนที่ออนไลน์

แผนที่เว็บแรกมักแสดงภาพแผนที่ขนาดเล็กมากเพียงภาพเดียว ในขณะนั้น การแพนกล้องทำได้โดยการย้ายหนึ่งขั้น ซึ่งปกติแล้วจะเท่ากับครึ่งหนึ่งของขนาดแผนที่ ไปในทิศทางใดทิศทางหนึ่งจากแปดทิศทางของเข็มทิศที่เป็นไปได้ - N, NW, W, SW, S, SE, E, NE หลังจากที่ผู้ใช้คลิกปุ่มแพนหรือซูม รูปภาพใหม่ทั้งหมดจะต้องแสดงผลบนเซิร์ฟเวอร์แผนที่ โหลดผ่านเครือข่าย จากนั้นเบราว์เซอร์จะประมวลผล เนื่องจากข้อจำกัดของเทคโนโลยี แผนที่จึงครอบครองเพียงส่วนเล็ก ๆ ของหน้าเว็บทั้งหมดเท่านั้น เพื่อให้ได้การโต้ตอบที่ดียิ่งขึ้น แผนที่ในยุคแรกๆ จำเป็นต้องมีปลั๊กอิน เช่น Flash หรือปลั๊กอินที่เหมาะสมตาม Java หรือแม้แต่ ActiveX ซึ่งใช้งานได้เฉพาะใน Internet Explorer

Google พลิกโฉมโลกของการทำแผนที่เมื่อเปิดตัว Google Maps ในปี 2548 Google ได้เปิดตัวการแพนกล้องอย่างต่อเนื่องด้วยการลากท่ามกลางนวัตกรรมใหม่ๆ วิธีแก้ปัญหาของพวกเขาคือแสดงแผนที่ที่หั่นเป็นภาพสี่เหลี่ยมเล็กๆ จำนวนมากที่เรียกว่า “ไทล์” ไทล์เหล่านี้แสดงผลและให้บริการจาก “เซิร์ฟเวอร์ไทล์แผนที่” และโดยทั่วไปจะมีขนาด 256 x 256 พิกเซล ตอนนี้การซูมและการแพนกล้องจำเป็นต้องโหลดแผ่นแผนที่ใหม่แทนที่จะโหลดซ้ำทั้งหน้าเว็บ ผลลัพธ์ที่ได้คือแผนที่ที่มองเห็นได้กว้างขึ้นซึ่งครอบคลุมหน้าต่างเบราว์เซอร์มากกว่าครึ่ง และมอบประสบการณ์การสำรวจแผนที่ที่ราบรื่น เนื่องจากความสามารถในการ "เลื่อน" แผนที่ไปรอบๆ ด้วยฟังก์ชันการซูมและการเลื่อนที่ราบรื่น แผนที่ใหม่เหล่านี้จึงถูกเรียกว่า "แผนที่ลื่น" Google ยังอนุญาตให้ใช้สคริปต์ ดังนั้นผู้ใช้สามารถใส่แผนที่ของ Google บนเว็บไซต์ของตนเองและเพิ่มข้อมูลของตนเองลงในแผนที่ สิ่งนี้ส่งผลให้มีการกำหนดคำศัพท์ใหม่อีกคำหนึ่ง: "Map mash-ups"

ทันใดนั้น แผนที่ออนไลน์กลายเป็นที่นิยม เพื่อเพิ่มแผนที่ที่สวยงามให้กับเว็บไซต์ของคุณ คุณไม่จำเป็นต้องเป็นนักเขียนแผนที่หรือผู้เชี่ยวชาญ GIS อีกต่อไป บนปีกของการเคลื่อนไหว "Web 2.0" และการสร้างเทคโนโลยีสมัยใหม่ เช่น HTML5, CSS3 และ SVG ที่ช่วยให้สร้างเนื้อหาแบบโต้ตอบได้ง่าย ขณะนี้แผนที่แบบโต้ตอบกำลังอยู่ในยุคฟื้นฟูศิลปวิทยารูปแบบใหม่

แผนที่ออนไลน์
การทำแผนที่ในอนาคต?

ข้อมูลแผนที่

ดังที่ได้กล่าวไว้ก่อนหน้านี้ แผนที่ออนไลน์ในยุคแรกๆ อิงตามชุดข้อมูล GIS และฐานข้อมูลทางภูมิศาสตร์เชิงพื้นที่ มีคนไม่มากที่เข้าถึงข้อมูลนั้น ไม่ต้องพูดถึงป้ายราคา ชุดข้อมูลโครงการ Google และ OpenStreetMap (OSM) เปลี่ยนแปลงไป ฐานข้อมูลของ Google เป็นฐานข้อมูลส่วนตัวและมีข้อจำกัด ในขณะที่ OSM ได้รับแรงบันดาลใจจากแนวคิดของวิกิพีเดีย เป็นโครงการความร่วมมือเพื่อสร้างแผนที่ฟรีของโลก OpenStreetMap สร้างขึ้นโดยชุมชนของผู้ทำแผนที่อาสาสมัคร ซึ่งมีส่วนสนับสนุนและรักษาข้อมูลเชิงพื้นที่

กล่าวโดยย่อ การปฏิวัติครั้งใหญ่ที่สุดที่นำไปสู่การสร้างแผนที่อย่างง่ายในปัจจุบันคือ ปัญหาที่เกี่ยวข้องกับการบำรุงรักษาเซิร์ฟเวอร์แผนที่และฐานข้อมูลเชิงพื้นที่ได้ถูกลบออกไปแล้ว

การเลือก Web Mapping Framework

ด้วยตัวเลือกทั้งหมด เราจะเลือกเครื่องมือทำแผนที่ออนไลน์ที่เหมาะสมได้อย่างไร ในอีกด้านหนึ่ง มีผู้ให้บริการแผนที่ออนไลน์เชิงพาณิชย์เช่น Google, MapQuest, Microsoft และ Nokia บริการเหล่านี้จัดเตรียมแผนที่ย่อยและ JavaScript API ที่เหมาะสมเพื่อดูและโต้ตอบกับแผนที่ ในทางกลับกัน มีโครงการการทำแผนที่แบบโอเพ่นซอร์สที่ให้การโหลดไทล์แผนที่ที่ใช้ OpenStreetMap ได้ง่าย ซึ่งรวมถึง OpenLayers และ Leaflet แล้วก็มีโครงการต่างๆ เช่น MapBox และ CartoDB ซึ่งใช้โมเดลธุรกิจของตนบนไลบรารีโอเพนซอร์สและข้อมูล OSM และให้มูลค่าเพิ่มแต่ไม่ฟรี

มาดูตัวอย่างจากแต่ละหมวดหมู่เหล่านี้กัน ในที่นี้ ฉันจะพูดถึงเครื่องมือการทำแผนที่ออนไลน์เหล่านี้ โดยให้ภาพรวมคร่าวๆ ของแต่ละเครื่องมือ พร้อมด้วยตัวอย่างโค้ด และการชั่งน้ำหนักข้อดีข้อเสีย นอกจากนี้เรายังได้เขียนบทแนะนำการทำแผนที่ D3.js ที่คุณอาจพบว่าน่าสนใจเมื่ออ่านแยกต่างหาก

Google Maps

เริ่มจากตัวเลือกที่ชัดเจนที่สุดคือ Google แผนที่ Google Maps API เวอร์ชันแรกเปิดตัวในเดือนกุมภาพันธ์ 2005 และ Google Maps API v3 เวอร์ชันปัจจุบันในเดือนมิถุนายน 2009 Google Maps API ไม่ได้เป็นเพียงจุดปลาย JavaScript API เท่านั้น มีโครงการเพิ่มเติมและเสนอวิธีต่างๆ ในการฝัง Google Maps ลงในหน้าเว็บด้วยการปรับแต่งที่หลากหลาย

Google Maps API ที่มีอยู่ในปัจจุบัน ได้แก่:

  • Google Maps Javascript API
  • Google แผนที่แบบคงที่ API
  • Google Maps Embed API
  • Google Maps SDK สำหรับ iOS
  • Google แผนที่ Android API v2

เพื่อช่วยคุณเลือก API ที่เหมาะสม Google ได้พัฒนาเครื่องมือเลือก API

เป็นที่น่าสังเกตว่าแม้ว่า API พื้นฐานจะใช้งานได้ฟรี แต่ก็มีข้อจำกัดบางประการ ประการแรกคือแผนที่จะต้องเปิดให้ผู้ใช้ปลายทางเข้าถึงได้ฟรีและเปิดเผยต่อสาธารณะ ประการที่สองคือข้อจำกัดการใช้งาน: บริการนี้ฟรีตราบใดที่เว็บไซต์ของคุณไม่สร้างการโหลดแผนที่มากกว่า 25,000 ครั้งต่อวัน ในช่วง 90 วันใดๆ หากคุณต้องการขนาดที่ใหญ่กว่าหรือต้องการแผนที่ส่วนตัว หรือคุณกำลังใช้งานเว็บไซต์องค์กรหรือเชิงพาณิชย์ คุณควรพิจารณาชำระเงินสำหรับ Google Maps API for Work

การดำเนินการ

นี่คือตัวอย่างวิธีการใช้ Google map อย่างง่ายในโค้ด แสดงวิธีการสร้างแผนที่อย่างง่ายโดยใช้ 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>

แผนที่ผลลัพธ์จะมีลักษณะดังนี้:

google map โดยใช้ API

ข้อดี

  • พัฒนาและดูแลโดย Google
  • API ต่างๆ มากมายสำหรับการรวมแผนที่ในเว็บไซต์หรือแอปพลิเคชันของคุณ
  • ชุมชนผู้ใช้ขนาดใหญ่
  • เอกสาร API ที่ดีมาก พร้อมตัวอย่างมากมาย

ข้อเสีย

  • เราแน่ใจหรือไม่ว่าเราจะไม่เห็นการเพิ่มในบางจุด?
  • ทุกคนใช้มัน แผนที่ทั้งหมด (ส่วนใหญ่) มีลักษณะเหมือนกัน
  • API ที่ปิดและเหมาะสม
  • ไม่มีปลั๊กอินนอกเหนือจากที่พัฒนาโดย Google อย่างเป็นทางการ
  • ราคาไม่ชัดเจนสำหรับ Google Maps for Work

OpenLayers

OpenLayers ได้รับการพัฒนาโดย MetaCarta เป็นโอเพ่นซอร์สที่เทียบเท่ากับ Google Maps และเวอร์ชันแรกได้รับการเผยแพร่ในเดือนมิถุนายน 2549 OpenLayers เป็นเครื่องมือสร้างแผนที่แบบ onling ที่ใช้ JavaScript API สำหรับการสร้างแอปพลิเคชันทางภูมิศาสตร์บนเว็บที่สมบูรณ์ โดยมี API ที่คล้ายกับ Google แผนที่ API OpenLayers ได้รับความนิยมอย่างรวดเร็ว และการพัฒนาในช่วงเริ่มต้นนั้นรวดเร็ว OpenLayers 2 เปิดตัวเพียงสองเดือนหลังจากเวอร์ชัน 1 ในเดือนสิงหาคม 2549 ไลบรารีอยู่ระหว่างการพัฒนาอย่างต่อเนื่องและมีการเพิ่มเวอร์ชันใหม่พร้อมคุณสมบัติใหม่อย่างต่อเนื่อง ข้อเสียของความคืบหน้าอย่างรวดเร็วนี้คือไลบรารีเวอร์ชัน 2 มีขนาดใหญ่และเทอะทะ ในที่สุดก็มีขนาดถึง 1MB และมีโค้ดมากกว่า 100,000 บรรทัด! แม้ว่าจะมาพร้อมกับคุณสมบัติมากมาย แต่ผู้ใช้ทั่วไปก็ไม่จำเป็นต้องใช้ทั้งหมด

นี่เป็นเหตุผลหลักสำหรับการเขียนใหม่อย่างครอบคลุมของห้องสมุด เป้าหมายคือการกำหนดเป้าหมายคุณลักษณะ HTML5 และ CSS3 ล่าสุดด้วยฟังก์ชันการทำงานเดียวกันจาก OpenLayers 2 เช่น การรองรับการฉายภาพ โปรโตคอลมาตรฐาน และฟังก์ชันการแก้ไข โฟกัสหลักอยู่ที่การปรับปรุงประสิทธิภาพ บิลด์ที่เบากว่า ส่วนประกอบภาพที่สวยกว่า และ API ที่ดีขึ้น OpenLayers 3 ที่ได้รับการปรับปรุงอย่างมากนี้เผยแพร่ในเดือนสิงหาคม 2014

การดำเนินการ

มาดูกันว่าแผนที่เหมือนในตัวอย่างที่แล้วขนาดไหน คราวนี้ใช้ 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 Leaflet ก็ถือกำเนิดขึ้น Vladimir มุ่งเน้นไปที่ความเรียบง่าย ประสิทธิภาพ และความสามารถในการใช้งานสำหรับเครื่องมือแผนที่ออนไลน์นี้ ไลบรารีหลักมีฟังก์ชันพื้นฐานเท่านั้น ซึ่งเพียงพอสำหรับกรณีการใช้งานจริงส่วนใหญ่ อย่างไรก็ตาม 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 พยายามที่จะปฏิวัติตลาดการทำแผนที่ออนไลน์ โดยมีเป้าหมายในการสร้างแผนที่ออนไลน์ที่ดูดีขึ้นและหลากหลายมากขึ้น MapBox JavaScript API ใช้ Leaflet และเขียนเป็นปลั๊กอิน Leaflet มันขยายฟังก์ชันการทำงานของ Leaflet และรวมเข้ากับบริการเว็บ MapBox อื่น ๆ รวมถึงการโฮสต์ MapBox สำหรับแผนที่และชุดข้อมูลที่กำหนดเองที่ผู้ใช้สร้างขึ้น นอกจาก JavaScript API แล้ว MapBox ยังมีบริการที่เชื่อมต่อดังต่อไปนี้:

  • SDK สำหรับอุปกรณ์เคลื่อนที่ iOS และ Android
  • ชุดแผนที่ที่ออกแบบไว้ล่วงหน้า
  • แผนที่แบบคงที่ที่สามารถแสดงได้โดยไม่ต้องใช้ไลบรารีแผนที่
  • บริการ GeoCoding
  • บริการทิศทาง

MapBox ไม่เพียงแต่ให้บริการแผนที่เท่านั้น แต่ยังเข้าถึงข้อมูล รวมถึงภาพถ่ายดาวเทียมที่ได้มาโดยส่วนตัว ข้อมูลเปิดจาก NASA และข้อมูลโลกที่ขับเคลื่อนโดยชุมชนจาก OpenStreetMap การใส่สไตล์ข้อมูลทำได้โดยใช้ CartoCSS ซึ่งเป็นรูปแบบสไตล์ที่สร้างโดย MapBox โดยใช้ CSS และเฟรมเวิร์กการจัดรูปแบบน้อยลง แม้ว่าบริการ MapBox จะให้บริการฟรี แต่มีข้อ จำกัด ในด้านแบนด์วิดท์และพื้นที่เก็บข้อมูลและสำหรับการใช้บริการอย่างจริงจังใด ๆ จะต้องชำระค่าบริการ

บริษัทใหญ่ๆ หลายแห่งตระหนักดีถึงประโยชน์ที่ได้รับจาก MapBox และกำลังใช้งานบนไซต์ของตนเอง ได้แก่ Foursquare, Evernote, Pinterest, The Financial Times, GitHub และ Etsy เป็นต้น

CartoCSS

นี่คือตัวอย่างแผนที่ MapBox แบบเรียบๆ โดยใช้สไตล์ที่เรียกว่า Pirates ซึ่งสร้างโดยนักออกแบบของ MapBox เนื่องจาก MapBox ทำงานที่ด้านบนของ Leaflet โค้ดสำหรับฝังสิ่งนี้ในหน้าเว็บของคุณจะคล้ายกับตัวอย่าง Leaflet ด้านบน:

แผนที่โดยใช้ cartocss

ดังที่ได้กล่าวไว้ข้างต้น CartoCSS ใช้เพื่อจัดรูปแบบไทล์เวกเตอร์ใน MapBox ทำได้โดยใช้ MapBox Studio ซึ่งเป็นโอเพ่นซอร์สด้วย ด้วย MapBox Studio คุณสามารถสร้างรูปแบบแผนที่ของคุณเองได้ตั้งแต่เริ่มต้น หรือเปลี่ยนและขยายรูปแบบที่มีอยู่ซึ่งสร้างโดยนักออกแบบคนอื่นๆ เมื่ออัปโหลดแผนที่ที่กำหนดเองของคุณไปยังบัญชี MapBox แล้ว คุณสามารถฝังลงในไซต์ของคุณโดยใช้ MapBox API

ต่อไปนี้คือตัวอย่าง CartoCSS ที่ใช้ในการรับฐานของ Pirates :

 @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

สำหรับการสร้างภาพและการวิเคราะห์ข้อมูลเชิงพื้นที่ที่ซับซ้อนมากขึ้น CartoDB เป็นหนึ่งในเครื่องมือที่ดีที่สุด เป็นบริการคลาวด์ที่จัดเก็บข้อมูลทางภูมิศาสตร์ในฐานข้อมูลที่เปิดใช้งานเชิงพื้นที่ในระบบคลาวด์ที่เรียกว่า PostGIS ซึ่งมีเครื่องมือในการเข้าถึงข้อมูล วิเคราะห์โดยใช้พลังเชิงพื้นที่และตำแหน่งทางภูมิศาสตร์ของ PostGIS และแสดงโดยใช้ Leaflet

CartoDB ถูกสร้างขึ้นจากการขาดทางเลือกอื่นสำหรับการสร้างภาพข้อมูลและการจัดเก็บข้อมูลเชิงพื้นที่อย่างง่าย ดังนั้น CartoDB อาจได้รับการพิจารณาเป็นทางเลือกแทน Fusion Tables ของ Google ผู้ใช้อาจนำเข้าชุดข้อมูลในรูปแบบต่างๆ รวมถึงตาราง CSV, KML หรือ Excel และจัดชั้นไว้เหนือแผนที่จากแหล่งที่มาทั่วไป เช่น Google, Here (Nokia) หรือ OpenStreetMap เนื่องจากข้อมูล geodata ทั้งหมดถูกจัดเก็บไว้ในฐานข้อมูลจริง ข้อมูลสามารถเข้าถึงและสอบถามด้วย SQL แล้วจัดรูปแบบด้วย CSS

บริการ CartoDB ให้บริการในรูปแบบ "freemium" ผู้ใช้ที่เปิดเผยข้อมูลต่อสาธารณะสามารถโฮสต์โครงการได้ที่เว็บไซต์ CartoDB ได้ฟรี ในการจัดเก็บข้อมูลส่วนตัว นำเข้าข้อมูลมากกว่า 5MB หรือใช้มากกว่าห้าตาราง ผู้ใช้ต้องสมัครแผนพรีเมียม

GeoJSON

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
  • รุ่นฟรีเมียม

ข้อเสีย

  • ไม่ฟรี.
  • ราคาขึ้นอยู่กับขนาดข้อมูลที่เก็บไว้ ซึ่งอาจมีราคาแพงหากใช้ชุดข้อมูลขนาดใหญ่

ตัวเลือกอื่นๆ สำหรับนักพัฒนาเว็บ

นี่คือเฟรมเวิร์กการทำแผนที่ที่ได้รับความนิยมมากที่สุดในปัจจุบัน แต่มีตัวเลือกอื่นๆ ที่ไม่ค่อยมีใครรู้จัก หากคุณเชื่อมโยงกับระบบนิเวศของ Microsoft พวกเขาเสนอ API ที่คล้ายกับ Google Maps ที่เรียกว่า Bing Maps API

และเราไม่สามารถไปได้โดยไม่เอ่ยถึงไดโนเสาร์ในโลกการทำแผนที่ออนไลน์ MapQuest ยังคงอยู่รอบๆ และให้บริการ MapQuest Mapping Tools

หากคุณกำลังมองหาแนวทางที่แตกต่างออกไปเล็กน้อยในการสร้างแผนที่ Kartograph เป็นสิ่งที่น่าสนใจเพราะสร้างขึ้นโดยคำนึงถึงความต้องการของนักออกแบบและนักข่าวด้านข้อมูล

การจัดรูปแบบแผนที่ของคุณ

กรอบงานทั้งหมดเหล่านี้มีวิธีปรับแต่งรูปแบบและรูปลักษณ์ของแผนที่ของคุณ MapBox และ CartoDB เสนอรูปแบบโดยใช้ CSS หรือรูปแบบอื่นของ CSS

ที่ด้านหน้าของ Google Google Maps API เวอร์ชัน 3 ได้แนะนำแผนที่ที่มีสไตล์แบบกำหนดเอง ในที่สุด สิ่งนี้ทำให้นักพัฒนาโดยเฉพาะนักออกแบบ มีพื้นที่มากขึ้นในการปรับแต่งการออกแบบเริ่มต้นของ Google แผนที่ที่เห็นได้ทุกที่ และทำให้มันสอดคล้องกับธีมภาพโดยรวมของเว็บไซต์มากขึ้น ภายในชุมชน Google Maps ที่อุดมสมบูรณ์ ทรัพยากรเกี่ยวกับสไตล์ไม่กี่แห่งได้ถือกำเนิดขึ้น สิ่งที่น่าสังเกตมากที่สุดคือ Snazzy Maps ซึ่งเป็นชุมชนของผู้คนที่สร้างรูปแบบที่กำหนดเองสำหรับ Google Maps และแชร์โดยไม่เสียค่าใช้จ่าย

หากคุณตัดสินใจใช้ OpenLayers หรือ Leaflet คุณจะถูกจำกัดให้แสดงแผนที่ที่แสดงล่วงหน้าเท่านั้น โชคดีที่มีไทล์แผนที่ให้เลือกหลากหลาย ตั้งแต่ Google, Nokia, Bing หรือ OSM ที่เป็นค่าเริ่มต้น ไปจนถึงไทล์ที่สร้างโดยนักออกแบบ เช่น Stamen หากต้องการทราบว่าแผ่นแผนที่มีอยู่กี่แผ่น หรือดูเปรียบเทียบกันอย่างไร ให้ไปที่ไซต์ Smackdown ของแผนที่หรือแผนที่เปรียบเทียบ

อนาคตของเว็บแมปและเครื่องมือทำแผนที่

อนาคตของโลกการทำแผนที่ดูน่าสนใจ ต่อไปนี้คือเทคโนโลยีใหม่ๆ ที่อาจดูเหมือนนิยายวิทยาศาสตร์เมื่อไม่กี่ปีที่ผ่านมา:

  • เวกเตอร์เท่านั้น - การใช้แผนที่เวกเตอร์แทนภาพแรสเตอร์กับ D3.js ทำให้เกิดโลกใหม่ของคุณลักษณะที่ไม่สามารถทำได้โดยใช้เฟรมเวิร์กมาตรฐาน MapBox กำลังเคลื่อนที่ไปในทิศทางนี้ด้วย MapBox GL ตาม OpenGL
  • 3D - ขณะนี้ภูมิประเทศและสิ่งปลูกสร้างสามมิติปรากฏขึ้นในแผนที่ และเรือรบ OpenLayers v3 พร้อมการรองรับ Cesium ในตัว
  • GIS และการวิเคราะห์เชิงพื้นที่ในเว็บเบราว์เซอร์ - เป็นไปได้อยู่แล้วโดยใช้ Turf Turf คือไลบรารี JavaScript ที่สนับสนุนการดำเนินการเชิงพื้นที่และสถิติ การจัดประเภทข้อมูล และการสร้างข้อมูล GeoJSON ทั้งหมดภายในเบราว์เซอร์

สรุป

เครื่องมือทำแผนที่ออนไลน์ที่ดีที่สุดแต่ละรายการมีจุดแข็งและจุดอ่อน ตัวอย่างเช่น ตัวอย่างโค้ดแสดงความเรียบง่ายของการใช้ Leaflet เทียบกับความซับซ้อนที่ OpenLayers นำมา แต่ Leaflet จะไม่แก้ปัญหาเชิงพื้นที่ที่ซับซ้อนของคุณตามที่ OpenLayers ทำได้ ทางเลือกขึ้นอยู่กับความต้องการของคุณ

เพื่อสรุป:

  • Google แผนที่ - โซลูชันการทำแผนที่ที่รอบรู้และเป็นที่ยอมรับ โดยเฉพาะอย่างยิ่งสำหรับผู้ที่ไม่ใช่นักพัฒนาเพื่อรับแผนที่พื้นฐานบนเว็บ พร้อมกับความสามารถทั้งหมดที่ Google มีชื่อเสียง (ใน)
  • OpenLayers - สำหรับสถานการณ์ที่เฟรมเวิร์กการทำแผนที่อื่นๆ ไม่สามารถแก้ปัญหาการวิเคราะห์เชิงพื้นที่ของคุณได้
  • แผ่นพับ - ปัจจุบัน เฟรมเวิร์กการทำแผนที่ที่ดีที่สุดสำหรับวัตถุประสงค์การทำแผนที่ทั่วไปอย่างง่ายดาย โดยเฉพาะอย่างยิ่ง หากคุณไม่ต้องการบริการเพิ่มเติมที่ MapBox หรือ CartoDB จัดหาให้
  • MapBox - โซลูชันการทำแผนที่ที่เติบโตอย่างรวดเร็วและเปลี่ยนแปลงตลาดเมื่อคุณต้องการควบคุมการจัดรูปแบบแผนที่มากขึ้นหรือต้องการบริการที่ผู้อื่นไม่ได้ให้บริการ เช่น ภาพถ่ายดาวเทียมโดยละเอียด พิกัดทางภูมิศาสตร์ หรือเส้นทาง
  • CartoDB - หากคุณมีชุดข้อมูลจำนวนมาก จัดเก็บในรูปแบบข้อมูลที่แตกต่างกัน ไม่ต้องมองหาที่ไหนอีกแล้ว

อ่านเพิ่มเติมในบล็อก Toptal Engineering:

  • ให้บริการกลุ่มแผนที่เร็วขึ้น 50 เท่าโดยใช้แคชอัจฉริยะ