Leaflet使用Nginx代理，实现内网访问外网百度地图瓦片

╰半夏微凉° 2022-11-15 12:29 519阅读 0赞

解决思路：  
1.在瓦片地址前加上内网ip和端口  
2.在可同时访问内网和外网的机器上部署nginx  
3.通过nginx监听内网端口，把瓦片的请求转发到外网

#### 地图页面 ####

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Leaflet使用Nginx代理实现内网访问百度地图瓦片</title>
    <link rel="stylesheet" href="js/leaflet/leaflet.css" />
    <script src="js/leaflet/leaflet.js"></script>
    <script src="js/leaflet/proj4-compressed.js"></script>
    <script src="js/leaflet/proj4leaflet.js"></script>
    <script src="js/leaflet/leaflet-bmap.js"></script>
    
    <style> html, body { height: 100%; margin: 0; } .lmap { width: 100%; height: 100%; } </style>
    </head>
        <body>
            <div id="lmap" class="lmap"></div>
            
            <script> const lmap = L.map('lmap', { crs: crs, center: L.latLng(34.35323, 108.941291), zoom: 4 }); new L.TileLayer('http://192.168.1.111:9998/online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=pl', { maxZoom: 21, minZoom: 3, subdomains: [0, 1, 2], tms: true, }).addTo(lmap); </script>
        </body>
    </html>

#### Nginx代理配置 ####

server { 
        listen       9998;
        server_name  192.168.1.111;
        
        location /online0.map.bdimg.com/ { 
            proxy_pass http://online0.map.bdimg.com/;
        }
    
        location /online1.map.bdimg.com/ { 
            proxy_pass http://online1.map.bdimg.com/;
        }
    
        location /online2.map.bdimg.com/ { 
            proxy_pass http://online2.map.bdimg.com/;
        }
    
        location /online3.map.bdimg.com/ { 
            proxy_pass http://online3.map.bdimg.com/;
        }
    
        location /online4.map.bdimg.com/ { 
            proxy_pass http://online4.map.bdimg.com/;
        }
    }

## 页面效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70]

参考资料：https://blog.csdn.net/qq\_38491310/article/details/87301919

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70]: /images/20221022/489fb176df054cf6b2bc60c50261491f.png