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

A detailed introduction to seata docker high availability deployment

Version 1.4.2 Official Documentation dockerhub st...

How to run .sh files in Linux system

There are two ways to run .sh files in Linux syst...

10 Deadly Semantic Mistakes in Web Typography

<br />This is from the content of Web front-...

MySQL NULL data conversion method (must read)

When using MySQL to query the database and execut...

Detailed explanation of vue keepAlive cache clearing problem case

Keepalive is often used for caching in Vue projec...

Summary of common commands for Ubuntu servers

Most of the commands below need to be entered in ...

Some problems that may be caused by inconsistent MySQL encoding

Stored procedures and coding In MySQL stored proc...

Modify the default scroll bar style in the front-end project (summary)

I have written many projects that require changin...

Detailed explanation of MySQL from getting started to giving up - installation

What you will learn 1. Software installation and ...

Example of how to build a Harbor public repository with Docker

The previous blog post talked about the Registry ...

Parse CSS to extract image theme color function (tips)

background It all started when a classmate in the...

ReactJs Basics Tutorial - Essential Edition

Table of contents 1. Introduction to ReactJS 2. U...

A brief analysis of MySQL cardinality statistics

1. What is the cardinality? Cardinality refers to...

How to pull the docker image to view the version

To view the version and tag of the image, you nee...