如何在Leaflet中优化100MB全球行政区划GeoJSON的数据传输？

场景：处理100MB左右的全球行政区划GeoJSON，使用Leaflet + leaflet-geojson-vt插件展示，希望减少用户端的数据传输量，当前实现代码如下：

//Map init
var map = L.map('map').setView([51.505, -0.09], 1);
//Tile layer
var tile_layer = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
//GeoJson fetch
world_geojson = fetch('./world.json').then(response => response.json()).then(
    world_geojson => {
        var options = {
            maxZoom: 16,
            tolerance: 3,
            debug: 0,
            style: {color:'#000',fillColor:"#0f0",weight: 1,opacity: 0.5,fillOpacity: 0.2}
        };
        //Actual geojson-vt layer implementation
        var geojson_layer = L.geoJson.vt(world_geojson, options).addTo(map);
    }
);

以下是可落地的优化技巧：

1. 数据格式优化与压缩 #

• 精简GeoJSON字段：手动或用工具移除不需要的属性（比如只保留行政区划ID、名称，删除冗余的统计数据、备注等），直接减少原始数据体积。
• 转TopoJSON格式：TopoJSON通过共享重复的几何图形（比如国家边界），能将全球行政区划数据体积压缩到原GeoJSON的1/5甚至更小。可使用topojson-server工具转换，配合-s参数做拓扑简化，进一步缩小体积。
• 启用HTTP压缩：在服务器（Nginx/Apache）中开启Gzip或Brotli压缩，对JSON/TopoJSON文件的压缩率可达70%左右，100MB的原始文件压缩后仅需传输20-30MB。

2. 预生成矢量瓦片（替代客户端实时切片） #

既然已经用到了geojson-vt的切片逻辑，不如把切片工作移到服务器端预完成：

• 用tippecanoe工具将GeoJSON转成MBTiles格式的矢量瓦片，按缩放级别生成不同精度的瓦片（低级别用简化几何，高级别保留细节）。
• 部署矢量瓦片服务后，用Leaflet的矢量瓦片插件加载，客户端仅请求当前视图范围内的瓦片，单次请求数据量仅几KB到几十KB，彻底解决大文件传输问题。

3. 缓存与按需加载策略 #

• 设置强缓存：给地理数据文件配置Cache-Control: public, max-age=31536000这类HTTP缓存头，用户首次加载后，后续访问直接读取本地缓存，无需重复下载。
• 分层/分区域加载：
  • 初始加载低分辨率的全球轮廓GeoJSON（体积仅几MB），当用户缩放至z5以上时再加载详细数据。
  • 将全球数据拆分为大洲/国家级别的独立文件，用户平移到对应区域时才加载该区域的数据。

4. 二进制格式替代GeoJSON #

考虑用FlatGeobuf这类二进制地理数据格式，它比GeoJSON体积小很多，且支持流式读取，Leaflet有对应的插件可直接加载，无需客户端解析超大JSON文件。

内容的提问来源于stack exchange，提问作者Stefaniscion