教你利用Nginx 服務搭建子域環(huán)境提升二維地圖加載性能的步驟
發(fā)布日期：2022-01-28 11:25 | 文章來源：gibhub
一、背景
最近有小伙伴遇到了大數(shù)據(jù)量地圖加載慢的情況，觀察iServer性能并未發(fā)揮到極致，所以通過搭建子域的方式成功實現(xiàn)了瀏覽速度的提升。
子域能對加載速度進行提升是因為瀏覽器對同一個域名服務的并發(fā)請求數(shù)量有限制，通過 Nginx 服務部署多個子域名，加大向 iServer 發(fā)送數(shù)據(jù)請求的并發(fā)量，從而達到提升加載速度的目的。
二、Nginx配置步驟
1.修改Nginx 配置nginx.conf，監(jiān)控多個端口
server {
listen 8881;
listen 8882;
listen 8883;
listen 8884;
listen 8885;
server_name 127.0.0.1,172.16.15.124;
location / {
root html;
index index.html index.htm;
}
location /iserver {
proxy_pass http://172.16.15.124:8090;
proxy_redirect off;
proxy_buffering off;
proxy_set_header Host $host:$server_port;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
三、前端對接
1.Leaflet使用subdomains參數(shù)，url中加入{s}占位符
代碼如下：
var map= "";
map = L.map('map', {
crs: L.CRS.EPSG4326,
center: [0, 0],
maxZoom: 18,
zoom: 1
});
L.supermap.tiledMapLayer("http://127.0.0.1:{s}/iserver/services/map-world/rest/maps/World",{subdomains:[8881,8882,8883,8884]}).addTo(map);
2.OpenLayer通過設置url參數(shù){?-?}，并通過XYZ方式對接
代碼如下：
var map, url = "http://127.0.0.1:888{1-4}/iserver/services/map-world/rest/maps/World/zxyTileImage.png?z={z}&x={x}&y={y}";
map = new ol.Map({
target: 'map',
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
.extend([new ol.supermap.control.Logo()]),
view: new ol.View({
center: [0, 0],
zoom: 2,
projection: 'EPSG:3857',
multiWorld: true
})
});
var layer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: url,
wrapX: true
}),
projection: 'EPSG:3857'
});
map.addLayer(layer);
map.addControl(new ol.supermap.control.ScaleLine());
3.Classic直接傳遞url數(shù)組
代碼如下：
var map, layer,
host = window.isLocal ? window.server : "https://iserver.supermap.io",
url = host + "/iserver/services/map-world/rest/maps/World";
//初始化地圖
map = new SuperMap.Map("map", {
controls: [
new SuperMap.Control.Navigation(),
new SuperMap.Control.Zoom()]
});
map.addControl(new SuperMap.Control.MousePosition());
//初始化圖層
layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", ["http://127.0.0.1:8881/iserver/services/map-world/rest/maps/World","http://127.0.0.1:8882/iserver/services/map-world/rest/maps/World","http://127.0.0.1:8883/iserver/services/map-world/rest/maps/World"], null, {maxResolution: "auto"});
//監(jiān)聽圖層信息加載完成事件
layer.events.on({"layerInitialized": addLayer});
function addLayer() {
map.addLayer(layer);
//顯示地圖范圍
map.setCenter(new SuperMap.LonLat(0, 0), 0);
4.MapboxGL直接傳遞tiles參數(shù)
代碼如下：
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
var map = new mapboxgl.Map({
container: 'map', // container id
style: {
version: 8,
sources: {'raster-tiles': {
type: 'raster',
tileSize: 256,
tiles: ["http://127.0.0.1:8881/iserver/services/map-world/rest/maps/World","http://127.0.0.1:8882/iserver/services/map-world/rest/maps/World","http://127.0.0.1:8883/iserver/services/map-world/rest/maps/World"],
rasterSource: 'iserver'}
},
layers: [{
id: 'simple-tiles',
type: 'raster',
source: 'raster-tiles',
minzoom: 0,
maxzoom: 22}
]
},
crs: 'EPSG:4326', // 或者 mapboxgl.CRS.EPSG4326 或者 new mapboxgl.CRS('EPSG:4326',[-180,-90,180,90]);
center: [0, 0],
zoom: 2
});
到此這篇關于利用 Nginx 服務搭建子域環(huán)境提升二維地圖加載性能的文章就介紹到這了,更多相關Nginx 服務內容請搜索本站以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持本站！
版權聲明：本站文章來源標注為YINGSOO的內容版權均為本站所有，歡迎引用、轉載，請保持原文完整并注明來源及原文鏈接。禁止復制或仿造本網站，禁止在非maisonbaluchon.cn所屬的服務器上建立鏡像，否則將依法追究法律責任。本站部分內容來源于網友推薦、互聯(lián)網收集整理而來，僅供學習參考，不代表本站立場，如有內容涉嫌侵權，請聯(lián)系alex-e#qq.com處理。
相關文章
關注官方微信