Erfahren Sie, wie Sie mithilfe des Nginx-Dienstes eine Subdomain-Umgebung erstellen, um die Ladeleistung von 2D-Karten zu verbessern.

Erfahren Sie, wie Sie mithilfe des Nginx-Dienstes eine Subdomain-Umgebung erstellen, um die Ladeleistung von 2D-Karten zu verbessern.

1. Hintergrund

Vor kurzem stießen einige Freunde auf das Problem, dass großformatige Karten langsam geladen wurden. Nachdem sie festgestellt hatten, dass die Leistung von iServer nicht voll ausgelastet war, verbesserten sie erfolgreich die Browsing-Geschwindigkeit, indem sie eine Subdomain erstellten.
Subdomains können die Ladegeschwindigkeit verbessern, da der Browser eine Begrenzung der Anzahl gleichzeitiger Anfragen an denselben Domain-Name-Service hat. Durch die Bereitstellung mehrerer Subdomains über den Nginx-Service wird die Anzahl gleichzeitiger Datenanfragen an den iServer erhöht, wodurch die Ladegeschwindigkeit verbessert wird.

2. Nginx-Konfigurationsschritte

1. Ändern Sie die Nginx-Konfiguration nginx.conf, um mehrere Ports zu überwachen

Server {
		hören Sie 8881;
		hören Sie 8882;
		hören Sie 8883;
		hören Sie 8884;
		hören Sie 8885;
        Servername 127.0.0.1,172.16.15.124;
        Standort / {
            Stamm-HTML;
            Index Index.html Index.htm;
        }

		Standort /iServer {
            Proxy-Passwort http://172.16.15.124:8090;
            Proxy_Redirect aus;
			Proxy-Pufferung aus;
			Proxy_set_header Host $host:$server_port;
			Proxy_Set_Header X-Real-IP $Remote_Addr;
			proxy_set_header X-Weitergeleitet-Für $proxy_add_x_forwarded_for;

        }

3. Front-End-Docking

1. Leaflet verwendet den Subdomains-Parameter und fügt der URL den Platzhalter {s} hinzu

Bildbeschreibung hier einfügen

Der Code lautet wie folgt:

var map = "";
    Karte = L.Karte('Karte', {
        crs: L.CRS.EPSG4326,
        Mitte: [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 setzt den URL-Parameter {?-?} und verbindet sich über XYZ

Bildbeschreibung hier einfügen

Der Code lautet wie folgt:

 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}";
    Karte = neue ol.Map({
        Ziel: 'Karte',
        Steuerelemente: ol.control.defaults({attributionOptions: {collapsed: false}})
            .erweitern([neues ol.supermap.control.Logo()]),
        Ansicht: neue ol.View({
            Mitte: [0, 0],
            Zoom: 2,
            Projektion: 'EPSG:3857',
            multiWorld: wahr
        })
    });
    var layer = new ol.layer.Tile({
        Quelle: neue ol.source.XYZ({
            URL: URL,
            wrapX: wahr
        }),
        Projektion: 'EPSG:3857'
    });
    map.addLayer(Ebene);
    map.addControl(neu ol.supermap.control.ScaleLine());

3.Classic übergibt das URL-Array direkt

Bildbeschreibung hier einfügen

Der Code lautet wie folgt:

var Karte, Ebene,
        Host = window.isLocal ? window.server : "https://iserver.supermap.io",
        URL = Host + "/iserver/services/map-world/rest/maps/World";
    // Initialisiere die Karte map = new SuperMap.Map("map", {
        Steuerung: [
            neue SuperMap.Control.Navigation(),
            neue SuperMap.Control.Zoom()]
    });
    map.addControl(neues SuperMap.Control.MousePosition());
    //Initialisiere die Ebene 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"});
    //Auf das Ereignis zum Abschluss des Ladens der Layer-Informationen warten layer.events.on({"layerInitialized": addLayer});
    Funktion addLayer() {
        map.addLayer(Ebene);
        //Kartenbereich anzeigen map.setCenter(new SuperMap.LonLat(0, 0), 0);

4. MapboxGL übergibt Kachelparameter direkt

Bildbeschreibung hier einfügen

Der Code lautet wie folgt:

var Host = window.isLocal? window.server: „https://iserver.supermap.io“;
            var map = neue mapboxgl.Map({
                Container: 'Map', // Container-ID
                Stil: {
                    Version: 8,
                    Quellen:
                        'Rasterkacheln': {
                            Typ: "Raster",
                            Kachelgröße: 256,
                            Kacheln: ["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"],
                            Rasterquelle: „iserver“
                        }
                    },

                    Schichten:
                        {
                            ID: "einfache Kacheln",
                            Typ: "Raster",
                            Quelle: „Rasterkacheln“,
                            minzoom: 0,
                            Maximalzoom: 22
                        }
                    ]
                },
                crs: 'EPSG:4326', // oder mapboxgl.CRS.EPSG4326 oder neues mapboxgl.CRS('EPSG:4326',[-180,-90,180,90]);
                Mitte: [0, 0],
                Zoom: 2
            });

Damit ist dieser Artikel über die Verwendung des Nginx-Dienstes zum Erstellen einer Subdomain-Umgebung zur Verbesserung der Ladeleistung zweidimensionaler Karten abgeschlossen. Weitere relevante Inhalte zum Nginx-Dienst finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • So aktivieren Sie die Gzip-Komprimierung in Nginx, um die Seitenladegeschwindigkeit deutlich zu erhöhen
  • Befehl zum Neustarten des Nginx-Servers, Herunterfahren und Neuladen

<<:  Detaillierte Erklärung der neuen Array-Methoden in JavaScript es6

>>:  MySQL-Transaktionskontrollfluss und ACID-Eigenschaften

Artikel empfehlen

Docker stellt Mysql, .Net6, Sqlserver und andere Container bereit

Inhaltsverzeichnis Installieren Sie Docker unter ...

Detaillierte Erläuterung der MySQL-Sicherung und -Wiederherstellung

Vorwort: In den vorherigen Artikeln wurde die Ver...

Beispielcode der Uniapp Vue- und NVUE-Karussellkomponenten

Der Vue-Teil ist wie folgt: <Vorlage> <K...

Ein Beispiel für die Verwendung von CSS-Methoden zur Erzielung von Modularität

1. Was sind CSS-Methoden? CSS methodologies könne...

Beispielcode für die Konvertierung von MySQL-Zeilen und -Spalten

1. Nachfrage Wir haben drei Tabellen. Wir müssen ...

Warum DOCTYPE HTML verwenden?

Sie wissen, dass der Browser ohne diese Option bei...

So verhindern Sie mit Nginx die böswillige Auflösung von IP-Adressen

Zweck der Verwendung von Nginx Lassen Sie uns zun...

Einrichten eines Proxyservers mit nginx

Nginx kann seine Reverse-Proxy-Funktion zum Imple...

Zusammenfassung von 10 erstaunlichen Tricks von Element-UI

Inhaltsverzeichnis el-scrollbar Bildlaufleiste el...

22 Vue-Optimierungstipps (Projektpraxis)

Inhaltsverzeichnis Code-Optimierung Verwenden der...

Detaillierte Erläuterung des Beispiels einer MySQL-Einzeltabellenabfrage

1. Daten vorbereiten Die folgenden Operationen we...