I'm new in online mapping, and in the past I've created raster maps succesfully with Maperitive from osm data. It works fine from localhost/ local folder structure. But my question: Is it possible to serve local vector maps from .pbf or geojson files without any server or mapbox stuff just like raster images? Is it possible to render without any server or api key required service in the browser directly in the client side? If yes, could someone provide me a working example?
Thanks.
Normally websites cannot access your local file system. This is to protect you and your computer from websites spying on you.
However, there are exceptions to that rule.
Opening an html document from the harddrive means that you simply double click it on your computer and the browser opens it. All relative links in that html document are then relative to that document.
So if you use the GeoJSON class , you can simply give it a path to files on your computer. Here is an example that reads a local file named mygeojson.geojson
from a folder mysubfolder
and shows it on top of a OpenStreetMap layer:
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Image({
source: new ol.source.ImageVector({
source: new ol.source.Vector({
url: 'mysubfolder/mygeojson.geojson',
format: new ol.format.GeoJSON()
}),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.6)'
}),
stroke: new ol.style.Stroke({
color: '#319FD3',
width: 1
})
})
})
})
],
target: 'map',
view: new ol.View({ center: [0, 0], zoom: 1 })
});
Have a look at this example of hosting vector tiles in offline mode. It shows how to:
Only thing I'm not sure of is whether the browser will allow local access to the PBF files.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.