GeoJSON web-kartoille: opas

2026-03-02
geojsonleafletmapboxverkkokartatjavascript

GeoJSON on tärkein paikkatiedon vaihtomuoto verkossa. Kaikki suositut karttakirjastot — Leaflet, Mapbox GL JS, OpenLayers, deck.gl — tukevat GeoJSONia natiivisti. osm2cdr.ru:n avulla voit viedä minkä tahansa OpenStreetMap-alueen GeoJSONiin sekunneissa.

GeoJSONin rakenne

GeoJSON-tiedosto on tavallinen JSON, jossa on FeatureCollection-tyyppisiä objekteja. Jokainen Feature sisältää geometrian (piste, viiva, monikulmio) ja ominaisuudet (properties) — OpenStreetMapin tagit: nimen, kohteen tyypin, osoitteen ja muut attribuutit.

Kuinka liittää Leafletiin

Yksinkertaisin tapa näyttää GeoJSON web-kartalla:

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

Tyylittely ominaisuuksien mukaan

osm2cdr.ru:n GeoJSON säilyttää OSM-tagit: highway, building, amenity, natural ja muut. Tämä mahdollistaa kohteiden tyylittelyn tyypin mukaan:

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

Optimointi suurelle datalle

GeoJSON toimii erinomaisesti pienille ja keskikokoisille alueille (enint. 50 km²). Suurille alueille:

Työkalut GeoJSONin käsittelyyn

← Kaikki oppaat