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

最新推荐文章于 2023-08-28 14:09:09 发布

lihefei_coder

最新推荐文章于 2023-08-28 14:09:09 发布

阅读量1k

点赞数

分类专栏：地图代理 Nginx 文章标签： leaflet nginx 内网百度地图代理

本文链接：https://blog.csdn.net/lihefei_coder/article/details/115373937

版权

地图同时被 3 个专栏收录

32 篇文章 6 订阅

订阅专栏

Nginx

5 篇文章 3 订阅

订阅专栏

代理

4 篇文章 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/;
    }
}