传单导入 GeoJson

Question

I'm developing an angular application with leaflet and i have to show many municipality about my country:

To do this and make navigation efficient, i needed to split my json file in multiple files and put them in assets folder:

and to show layer in mai I'm using angular HttpClient in the following way:

this.http.get('assets/shp/Comuni.geojson').subscribe((json: any) => {
 L.geoJSON(this.json).addTo(map);
});

the size of my asset folder has become almost a gigabyte, and i need to store this files in a external repository, like a server. Any suggestion about this? What is the correct way to handle this kind to situation?

Answer 1

You can convert the geoJSON files to topoJSON which are way smaller than geojson and the conversion allows you to incrementally simplify a dataset.

To convert you can install topojson

npm install -g topojson

and convert it as follow

topojson -o topo.json geoJSON.json

This will save you a lot of size.

Answer 2

I bet it's something wrong with yours geoJson files. Maybe they are overdetalized. For example look at Canada.geojson it has size near 400 kb for whole the second largest country in the world. You can try service like https://mapshaper.org/ to simply your data.

Answer 3

and i need to store this files in a external repository, like a server. Any suggestion about this?

[...]

I know that my files are overdetalized, but i need to show smaller parts of a municipality, and the i need to this detail.

Well, there are 2 approaches. And it mainly has to do with the type of data you want to receive in the front-end. You want vector data (eg GeoJSON)? Or maybe raster tiles (eg WMS)?

1st approach - Vector Data

You definitely cannot store/load all your data at once. You should store them at an external server and get more data with appropriate requests. For example, you could initially only load a simplified GeoJSON for all municipalities in a low zoom level, and when the user chooses / pans to a certain municipality, request from the server a GeoJSON with higher detail. However, developing a pyramid-like structure for multiple zoom levels etc, would not be easy. So, you have to consider if this approach can work in your case.

2st approach - Raster Data

You can forget about GeoJSON and develop a GeoServer. http://geoserver.org/ You will have all your spatial data in the back-end and choose to serve only raster tiles in your front-end using eg a WMS. It may sound like extra hassle but on the other hand, you will not have to worry about oversized GeoJSONs etc.