Teach you how to use Nginx service to build a subdomain environment to improve the loading performance of 2D maps

Teach you how to use Nginx service to build a subdomain environment to improve the loading performance of 2D maps

1. Background

Recently, some friends encountered the problem of slow loading of large-scale maps. After observing that the performance of iServer was not fully utilized, they successfully improved the browsing speed by building a subdomain.
Subdomains can improve loading speed because the browser has a limit on the number of concurrent requests to the same domain name service. By deploying multiple subdomains through Nginx service, the concurrent number of data requests sent to iServer is increased, thereby achieving the purpose of improving loading speed.

2. Nginx configuration steps

1. Modify Nginx configuration nginx.conf to monitor multiple ports

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;

        }

3. Front-end docking

1. Leaflet uses the subdomains parameter and adds the {s} placeholder to the URL

insert image description here

The code is as follows:

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 sets the url parameter {?-?} and connects via XYZ

insert image description here

The code is as follows:

 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 directly passes the url array

insert image description here

The code is as follows:

var map, layer,
        host = window.isLocal ? window.server : "https://iserver.supermap.io",
        url = host + "/iserver/services/map-world/rest/maps/World";
    // Initialize the map map = new SuperMap.Map("map", {
        controls: [
            new SuperMap.Control.Navigation(),
            new SuperMap.Control.Zoom()]
    });
    map.addControl(new SuperMap.Control.MousePosition());
    //Initialize the layer 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"});
    //Listen for the layer information loading completion event layer.events.on({"layerInitialized": addLayer});
    function addLayer() {
        map.addLayer(layer);
        //Show map range map.setCenter(new SuperMap.LonLat(0, 0), 0);

4. MapboxGL passes tiles parameters directly

insert image description here

The code is as follows:

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', // or mapboxgl.CRS.EPSG4326 or new mapboxgl.CRS('EPSG:4326',[-180,-90,180,90]);
                center: [0, 0],
                zoom: 2
            });

This concludes this article on using Nginx service to build a subdomain environment to improve the loading performance of two-dimensional maps. For more relevant Nginx service content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • How to enable Gzip compression in Nginx to significantly increase page loading speed
  • Nginx server restart shutdown reload command

<<:  Detailed explanation of the new array methods in JavaScript es6

>>:  MySQL transaction control flow and ACID characteristics

Recommend

JavaScript implementation of drop-down list

This article example shares the specific code of ...

Nginx configuration 80 port access 8080 and project name address method analysis

Tomcat accesses the project, usually ip + port + ...

HTML table tag tutorial (26): cell tag

The attributes of the <TD> tag are used to ...

Detailed explanation of several examples of insert and batch statements in MySQL

Table of contents Preface 1.insert ignore into 2....

Detailed explanation of selinux basic configuration tutorial in Linux

selinux ( Security-Enhanced Linux) is a Linux ker...

How to automatically deploy Linux system using PXE

Table of contents Background Configuring DHCP Edi...

How to Run a Command at a Specific Time in Linux

The other day I was using rsync to transfer a lar...

Vite introduces the implementation of virtual files

Table of contents background Importing virtual fi...

Float and Clear Float in Overview Page

1. Float: The main purpose is to achieve the effe...

MySQL 5.7.10 Installation Documentation Tutorial

1. Install dependency packages yum -y install gcc...

Quickly solve the Chinese input method problem under Linux

Background: I'm working on asset reporting re...

Installation tutorial of the latest stable version of MySQL 5.7.17 under Linux

Install the latest stable version of MySQL on Lin...