长话短说，一般量小的业务系统不会遇到这种问题的，但是对于GIS行业来说随随便便就很容易出现。不管你服务是架设在内网还是外网或是公网，只要是同一个域名或者同一个IP去访问瓦片服务的话，必然一次地图漫游会产生很多次请求，拿我所负责的XXX系统所处的业务场景来说，对于一个一般的栅格或矢量图层来说，鼠标轻轻漫游一次就有近几十个请求（文末有彩蛋！！），如下：
image.png
一种图层还好，如果一多，那速度简直了，如下：
image.png
随随便便请求上N百，点开其中一条请求看下：
image.png
好家伙，请求居然在浏览器端停滞了5.19s，真实发数据到数据返回前端用时不到200ms，你一个等待直接让我崩溃，不，是让用户崩溃，用户奔溃了，研发的锅就跑不掉了，怎么解释呢？
其实这种问题网上一搜一大堆，都说了原因，没说解决办法，原因无外乎浏览器对同一个域名的请求有限制，比如谷歌的是6个请求，对于一次请求上百的系统，你品、你细品！！！
重点来了，怎么解决？？？
复杂问题简单化，就是搞多个域名不就行了，你看人家天地图、谷歌、百度或其他地图服务提供商的瓦片服务哪个不是有多个域名的，比如天地图的domain就有0~10个不等，那请求中如何带上不同的domin呢，如下：
L.tileLayer('https://yl{s}.xxx.com/datamg-server/datamg/services/tile?x={x}&y={y}&l={z}&crs=EPSG:4490&serviceId=1344802456462912&cache=true', {
subdomains: [0,1,2,3,4,5,6,7]
}).addTo(map);
效果如下：
image.png
剩下的就是域名的问题了（让运维申请域名吧），如果域名加了后，还是慢，后台服务就要搞负载了，别想着一台机器就可以满世界的漫游实时看瓦片了，当然做了瓦片缓存，服务的负载后面也是要做的，做不做还是要看用户的并发量了。
没有效果无法服众，来，我基于内网也就是我本地环境，来给你们演示一下配了多域名和不配的浏览器前后响应时间对比（主要以chrome为主）：
不配前，代码如下（ip我就不马赛克了，知道我的人肯定知道，不知道我的人给你再多的信息你都不一定知道）：
<body>
<div id="mapDiv">
</div>
<script>
map = new L.map("mapDiv", {
minZoom: 1,
maxZoom: 19,
center: [32.317312, 116.743469],
zoom: 9,
zoomControl: false,
attributionControl: false,
crs: L.CRS.EPSG3857,
editable: true,
doubleClickZoom: false
});
L.tileLayer('http://10.16.28.13:8099/datamg-server/datamg/services/tile?x={x}&y={y}&l={z}&crs=EPSG:3857&serviceId=1367793003311552', {}).addTo(map);
L.tileLayer('http://10.16.28.13:8099/datamg-server/datamg/services/tile?x={x}&y={y}&l={z}&crs=EPSG:3857&serviceId=1367793003311552', {}).addTo(map);
L.tileLayer('http://10.16.28.13:8099/datamg-server/datamg/services/tile?x={x}&y={y}&l={z}&crs=EPSG:3857&serviceId=1367793727992256', {}).addTo(map);
L.tileLayer('http://10.16.28.13:8099/datamg-server/datamg/services/tile?x={x}&y={y}&l={z}&crs=EPSG:3857&serviceId=1367799700586944', {}).addTo(map);
L.tileLayer('http://10.16.28.13:8099/datamg-server/datamg/services/tile?x={x}&y={y}&l={z}&crs=EPSG:3857&serviceId=1367799980966336', {}).addTo(map);
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);
</script>
</body>
浏览器预览效果：
image.png
配后，hosts文件配置如下：
image.png
配后，核心代码片段如下：
<body>
<div id="mapDiv"></div>
<script>
map = new L.map("mapDiv", {
minZoom: 1,
maxZoom: 19,
center: [32.317312, 116.743469],
zoom: 9,
zoomControl: false,
attributionControl: false,
crs: L.CRS.EPSG3857,
editable: true,
doubleClickZoom: false
});
L.tileLayer('http://www.service{s}.com:8099/datamg-server/datamg/services/tile?x={x}&y={y}&l={z}&crs=EPSG:3857&serviceId=1367793003311552', {
subdomains: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
}).addTo(map);
L.tileLayer('http://www.service{s}.com:8099/datamg-server/datamg/services/tile?x={x}&y={y}&l={z}&crs=EPSG:3857&serviceId=1367793003311552', {
subdomains: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
}).addTo(map);
L.tileLayer('http://www.service{s}.com:8099/datamg-server/datamg/services/tile?x={x}&y={y}&l={z}&crs=EPSG:3857&serviceId=1367793727992256&', {
subdomains: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
}).addTo(map);
L.tileLayer('http://www.service{s}.com:8099/datamg-server/datamg/services/tile?x={x}&y={y}&l={z}&crs=EPSG:3857&serviceId=1367799700586944', {
subdomains: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
}).addTo(map);
L.tileLayer('http://www.service{s}.com:8099/datamg-server/datamg/services/tile?x={x}&y={y}&l={z}&crs=EPSG:3857&serviceId=1367799980966336', {
subdomains: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
}).addTo(map);
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);
</script>
</body>
配后，浏览器预览效果：
image.png
