教你利用Nginx 服務(wù)搭建子域環(huán)境提升二維地圖加載性能的步驟

更新時(shí)間：2021年09月24日 09:51:40 作者：supermapsupport

這篇文章主要介紹了利用 Nginx 服務(wù)搭建子域環(huán)境提升二維地圖加載性能，本文分步驟通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧

一、背景

最近有小伙伴遇到了大數(shù)據(jù)量地圖加載慢的情況，觀察iServer性能并未發(fā)揮到極致，所以通過搭建子域的方式成功實(shí)現(xiàn)了瀏覽速度的提升。
子域能對加載速度進(jìn)行提升是因?yàn)闉g覽器對同一個(gè)域名服務(wù)的并發(fā)請求數(shù)量有限制，通過 Nginx 服務(wù)部署多個(gè)子域名，加大向 iServer 發(fā)送數(shù)據(jù)請求的并發(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;

        }

三、前端對接

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方式對接

在這里插入圖片描述

代碼如下：

 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
            });

到此這篇關(guān)于利用 Nginx 服務(wù)搭建子域環(huán)境提升二維地圖加載性能的文章就介紹到這了,更多相關(guān)Nginx 服務(wù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: