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. 2. Nginx configuration steps1. 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 docking1. Leaflet uses the subdomains parameter and adds the {s} placeholder to the URL 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 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 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 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:
|
<<: Detailed explanation of the new array methods in JavaScript es6
>>: MySQL transaction control flow and ACID characteristics
Version 1.4.2 Official Documentation dockerhub st...
There are two ways to run .sh files in Linux syst...
<br />This is from the content of Web front-...
When using MySQL to query the database and execut...
Keepalive is often used for caching in Vue projec...
Most of the commands below need to be entered in ...
Stored procedures and coding In MySQL stored proc...
An image link <img src="" /> I wa...
I have written many projects that require changin...
What you will learn 1. Software installation and ...
The previous blog post talked about the Registry ...
background It all started when a classmate in the...
Table of contents 1. Introduction to ReactJS 2. U...
1. What is the cardinality? Cardinality refers to...
To view the version and tag of the image, you nee...