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

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

ประวัติเล็กน้อย

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

การทำแผนที่ในอดีต

ครึ่งหลังของศตวรรษที่ 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 บนเว็บไซต์ของตนเองและเพิ่มข้อมูลของตนเองลงในแผนที่ได้ สิ่งนี้ส่งผลให้มีการบัญญัติศัพท์ใหม่ขึ้นมาอีกคำหนึ่งคือ“ แผนที่แมชอัพ”

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

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

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

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

วิธีทำให้บอทไม่ลงรอยกันส่งข้อความ

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

การเลือก Web Mapping Framework

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

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

Google Maps

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

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

• Google Maps Javascript API
• Google Static Maps API
• Google Maps Embed API
• Google Maps SDK สำหรับ iOS
• Google Maps Android API เวอร์ชัน 2

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

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

การนำไปใช้

ตัวอย่างวิธีติดตั้ง Google map แบบง่ายๆในโค้ด แสดงวิธีสร้างแผนที่ง่ายๆโดยใช้ API วางเครื่องหมายบนแผนที่และเปิดป๊อปอัปด้วยการคลิกเมาส์

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));

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

ข้อดี

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

จุดด้อย

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

OpenLayers

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

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

การนำไปใช้

มาดูกันว่าแผนที่เดียวกันกับในตัวอย่างก่อนหน้าอย่างไรคราวนี้ใช้ OpenLayers 3

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' : ''; });

และผลลัพธ์:

ข้อดี

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

จุดด้อย

• เวอร์ชัน 3 ยังอยู่ในการพัฒนาอย่างหนักและ API ยังคงเปลี่ยนแปลงด้วย ทุกจุดปล่อย .
• ไวยากรณ์ API ที่ซับซ้อน
• ขณะนี้เอกสารของเวอร์ชัน 3 ยังไม่ละเอียดรอบคอบเท่าที่ควร

ใบปลิว

มันปลอดภัยที่จะพูดอย่างนั้น ใบปลิว เกิดจากปฏิกิริยาตอบสนองต่อการขยายตัวความยุ่งเหยิงและความซับซ้อนของ OpenLayers Vladimir Agafonkin ถูกขอให้สร้างกระดาษห่อหุ้มรอบ OpenLayers แต่เขาได้สร้างทางเลือก OpenLayers ที่เรียบง่ายและมีน้ำหนักเบาแทนและในเดือนพฤษภาคม 2011 Leaflet ก็ถือกำเนิดขึ้น Vladimir มุ่งเน้นไปที่ความเรียบง่ายประสิทธิภาพและการใช้งานสำหรับเครื่องมือแผนที่ออนไลน์นี้ ไลบรารีหลักมีฟังก์ชันพื้นฐานเท่านั้นซึ่งเพียงพอสำหรับกรณีการใช้งานจริงส่วนใหญ่ ถึงกระนั้น Leaflet ยังสามารถขยายได้ด้วยปลั๊กอินจำนวนมากซึ่งง่ายต่อการพัฒนาและเพิ่มที่ด้านบนของไลบรารีหลัก นอกจากนี้ Leaflet ยังได้รับการพัฒนาตั้งแต่เริ่มต้นโดยคำนึงถึงการรองรับมือถือ

Leaflet ใช้งานง่ายและมี API ที่มีเอกสารอย่างดีพร้อมด้วยซอร์สโค้ดง่ายๆนั่นคือ พร้อมใช้งานบน GitHub . อันเป็นผลมาจากการมุ่งเน้นไปที่ประสิทธิภาพการใช้งานความเรียบง่ายขนาดเล็กและการรองรับมือถือจึงมีความซับซ้อนน้อยกว่า OpenLayers มาก

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

การนำไปใช้

นี่คือแผนที่เดิมอีกครั้งคราวนี้ใช้ Leaflet

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);

ข้อดี

• ฟรีและโอเพ่นซอร์ส
• เล็กและเร็ว
• ไวยากรณ์ API ที่ง่ายและสะดวก
• เป็นมิตรกับมือถือ
• เหมาะสำหรับการสร้างแผนที่ออนไลน์อย่างรวดเร็วและง่ายดาย
• ตัวอย่างมากมายพร้อมเอกสารที่ดีมาก

จุดด้อย

• ขาดฟังก์ชันขั้นสูง

MapBox

ชื่อการเริ่มต้น MapBox กำลังพยายามปฏิวัติตลาดการทำแผนที่ออนไลน์โดยมีเป้าหมายในการสร้างแผนที่ออนไลน์ที่ดูดีขึ้นและใช้งานได้หลากหลายมากขึ้น MapBox JavaScript API ใช้ Leaflet และเขียนเป็นปลั๊กอิน Leaflet ขยายการทำงานของ Leaflet และทำงานร่วมกับอื่น ๆ บริการเว็บ MapBox รวมถึงโฮสติ้ง MapBox สำหรับแผนที่และชุดข้อมูลที่ผู้ใช้สร้างขึ้นเอง นอกจาก JavaScript API แล้ว MapBox ยังมีบริการเชื่อมต่อดังต่อไปนี้:

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

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

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

CartoCSS

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

สิ่งที่นักลงทุนมองหาในสตาร์ทอัพ

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

ต่อไปนี้เป็นตัวอย่างของ 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

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

CartoDB ถูกสร้างขึ้นเนื่องจากไม่มีทางเลือกอื่นสำหรับการแสดงข้อมูลและการจัดเก็บข้อมูลเชิงพื้นที่ได้ง่าย ดังนั้น CartoDB อาจถือเป็นอีกทางเลือกหนึ่งของ ตารางฟิวชั่นของ Google . ผู้ใช้สามารถนำเข้าชุดข้อมูลในรูปแบบต่างๆรวมถึงตาราง CSV, KML หรือ Excel และวางเลเยอร์ไว้บนแผนที่จากแหล่งข้อมูลทั่วไปเช่น Google ที่นี่ (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 สามารถทำอะไรได้บ้างลองดูสิ แกลเลอรี .

ข้อดี

• เหมาะสำหรับการจัดการและจัดเก็บข้อมูลภูมิสารสนเทศ
• รองรับรูปแบบข้อมูลจำนวนมากและชุดข้อมูลขนาดใหญ่
• อ้างอิงจากผลิตภัณฑ์โอเพนซอร์สที่ได้รับการพิสูจน์แล้วเช่น Leaflet และ PostGIS
• แบบจำลอง Freemium

จุดด้อย

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

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

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

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

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

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

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

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

วันที่ใหม่ ().gettime()

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

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

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

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

สรุป

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

สรุป:

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