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. 2. Nginx-Konfigurationsschritte1. Ä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-Docking1. Leaflet verwendet den Subdomains-Parameter und fügt der URL den Platzhalter {s} hinzu 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 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 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 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:
|
<<: Detaillierte Erklärung der neuen Array-Methoden in JavaScript es6
>>: MySQL-Transaktionskontrollfluss und ACID-Eigenschaften
Eines Tages stellte ich fest, dass die Ausführung...
Linux-Dateisystem In der Abbildung oben sind herk...
Dieser Artikel stellt den Implementierungscode vo...
Inhaltsverzeichnis Vorwort Rendern Beispielcode Z...
Inhaltsverzeichnis 1. Voranalyse 1. Vorabanalyse ...
Ich habe kürzlich Django bereitgestellt und wollt...
Ich spiele in letzter Zeit mit Big Data. Ein Freu...
Wenn die Bilder des Servers von anderen Websites ...
Inhaltsverzeichnis Vorwort Initialisieren des Pro...
1. MySQL 1.1 MySQL-Installation mysql-5.5.27-winx...
Wenn wir die webpackjs-Datei verpacken, führen wi...
Die folgenden Fragen basieren alle auf der InnoDB...
Inhaltsverzeichnis Vorwort Zentrieren von Inline-...
Layoutteil: <div id="Schieberegler"&...
Code kopieren Der Code lautet wie folgt: <!DOC...