一、背景
最近有小伙伴遇到了大數(shù)據(jù)量地圖加載慢的情況,觀察iServer性能并未發(fā)揮到極致,所以通過搭建子域的方式成功實(shí)現(xiàn)了瀏覽速度的提升。
子域能對(duì)加載速度進(jìn)行提升是因?yàn)闉g覽器對(duì)同一個(gè)域名服務(wù)的并發(fā)請(qǐng)求數(shù)量有限制,通過 Nginx 服務(wù)部署多個(gè)子域名,加大向 iServer 發(fā)送數(shù)據(jù)請(qǐng)求的并發(fā)量,從而達(dá)到提升加載速度的目的。
二、Nginx配置步驟
1.修改Nginx 配置nginx.conf,監(jiān)控多個(gè)端口
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; }
三、前端對(duì)接
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通過設(shè)置url參數(shù){?-?},并通過XYZ方式對(duì)接
代碼如下:
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 });