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

78 阅读 0 评论 52 点赞

我是靠谱客的博主会撒娇太阳，最近开发中收集的这篇文章主要介绍Leaflet使用Nginx代理，实现内网访问外网百度地图瓦片，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

解决思路：
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/;
    }
}