Vector data sources
Quick answer
This tutorial separates data sources from format parsers so a layer can swap GeoJSON, TopoJSON, KML, GML, GPX or MVT without rewriting logic. It configures ol.format.GeoJSON with dataProjection and featureProjection, enables extractStyles and extractAttributes for KML, and implements a bbox loader with ol.loadingstrategy.bbox plus success and failure callbacks. Readers can load remote vector data correctly and page it by view extent.
Key points
- Declare dataProjection EPSG:4326 and featureProjection as the view projection.
- Call success or failure inside a custom loader, or the source stays in loading state.
- Request only the current extent with strategy: ol.loadingstrategy.bbox.
Example
var view = new ol.View({
center: ol.proj.fromLonLat([116.397, 39.908]),
zoom: 11
});
var source = new ol.source.Vector({
url: '/data/districts.geojson',
format: new ol.format.GeoJSON({
dataProjection: 'EPSG:4326',
featureProjection: view.getProjection()
})
});
var layer = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
stroke: new ol.style.Stroke({ color: '#1f5fd0', width: 1.5 }),
fill: new ol.style.Fill({ color: 'rgba(31, 95, 208, 0.15)' })
})
});
map.addLayer(layer);var kmlSource = new ol.source.Vector({
url: '/data/facilities.kml',
format: new ol.format.KML({
extractStyles: true,
extractAttributes: true
})
});
var topoSource = new ol.source.Vector({
url: '/data/province.topo.json',
format: new ol.format.TopoJSON({
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
})
});Notes
- GeoJSON order is longitude then latitude; swapping it sends data to the southern hemisphere.
- Duplicate GeoJSON id values collide and break feature selection and updates.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Vector data sources. https://www.jingweizhi.com/en/openlayers/tutorials/data-sources.html (accessed 2026-11-03).