osm2cdr.com

GeoJSON สำหรับแผนที่เว็บ: คู่มือ

2026-03-02
geojsonleafletmapboxแผนที่ออนไลน์javascript

GeoJSON — รูปแบบหลักในการแลกเปลี่ยนข้อมูลภูมิสารสนเทศบนเว็บ ไลบรารีแผนที่ยอดนิยมทั้งหมด — Leaflet, Mapbox GL JS, OpenLayers, deck.gl — รองรับ GeoJSON โดยกำเนิด ด้วย osm2cdr.ru คุณสามารถส่งออกพื้นที่ OpenStreetMap ใดก็ได้เป็น GeoJSON ภายในไม่กี่วินาที

โครงสร้างของ GeoJSON

ไฟล์ GeoJSON คือ JSON ธรรมดาที่มีวัตถุประเภท FeatureCollection แต่ละ Feature ประกอบด้วยเรขาคณิต (จุด เส้น รูปหลายเหลี่ยม) และคุณสมบัติ (properties) — แท็กของ OpenStreetMap: ชื่อ ประเภทของวัตถุ ที่อยู่ และแอตทริบิวต์อื่น ๆ

วิธีเชื่อมต่อกับ Leaflet

วิธีที่ง่ายที่สุดในการแสดง GeoJSON บนแผนที่เว็บ:

fetch('/data/moscow-buildings.geojson')
  .then(r => r.json())
  .then(data => L.geoJSON(data, {
    style: { color: '#3388ff', weight: 1, fillOpacity: 0.3 }
  }).addTo(map));

การจัดสไตล์ตามคุณสมบัติ

GeoJSON จาก osm2cdr.ru เก็บแท็ก OSM ไว้: highway, building, amenity, natural และอื่น ๆ ซึ่งช่วยให้จัดสไตล์วัตถุตามประเภทได้:

L.geoJSON(data, {
  style: function(feature) {
    if (feature.properties.building) return { color: '#e74c3c' };
    if (feature.properties.natural === 'water') return { color: '#3498db' };
    return { color: '#95a5a6' };
  }
});

การปรับให้เหมาะสมสำหรับข้อมูลขนาดใหญ่

GeoJSON ทำงานได้ดีสำหรับพื้นที่ขนาดเล็กและขนาดกลาง (สูงสุด 50 ตร.กม.) สำหรับพื้นที่ขนาดใหญ่:

เครื่องมือสำหรับการทำงานกับ GeoJSON

รูปแบบที่เกี่ยวข้อง

GEOJSONGEOJSONSEQKMLPMTILES
← คู่มือทั้งหมด