教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤

 更新时间:2021年09月24日 09:51:40   作者:supermapsupport  
这篇文章主要介绍了利用 Nginx 服务搭建子域环境提升二维地图加载性能,本文分步骤通过实例代码给大家介绍的非常详细,需要的朋友参考下吧

一、背景

最近有小伙伴遇到了大数据量地图加载慢的情况,观察iServer性能并未发挥到极致,所以通过搭建子域的方式成功实现了浏览速度的提升。
子域能对加载速度进行提升是因为浏览器对同一个域名服务的并发请求数量有限制,通过 Nginx 服务部署多个子域名,加大向 iServer 发送数据请求的并发量,从而达到提升加载速度的目的。

二、Nginx配置步骤

1.修改Nginx 配置nginx.conf,监控多个端口

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;

        }

三、前端对接

1.Leaflet使用subdomains参数,url中加入{s}占位符

在这里插入图片描述

代码如下:

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通过设置url参数{?-?},并通过XYZ方式对接

在这里插入图片描述

代码如下:

 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直接传递url数组

在这里插入图片描述

代码如下:

var map, layer,
        host = window.isLocal ? window.server : "https://iserver.supermap.io",
        url = host + "/iserver/services/map-world/rest/maps/World";
    //初始化地图
    map = new SuperMap.Map("map", {
        controls: [
            new SuperMap.Control.Navigation(),
            new SuperMap.Control.Zoom()]
    });
    map.addControl(new SuperMap.Control.MousePosition());
    //初始化图层
    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"});
    //监听图层信息加载完成事件
    layer.events.on({"layerInitialized": addLayer});
    function addLayer() {
        map.addLayer(layer);
        //显示地图范围
        map.setCenter(new SuperMap.LonLat(0, 0), 0);

4.MapboxGL直接传递tiles参数

在这里插入图片描述

代码如下:

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

到此这篇关于利用 Nginx 服务搭建子域环境提升二维地图加载性能的文章就介绍到这了,更多相关Nginx 服务内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 通过nginx代理拦截请求进行全局访问限制

    通过nginx代理拦截请求进行全局访问限制

    这篇文章主要介绍了通过nginx代理拦截请求进行全局访问限制,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Nginx使用反向代理实现负载均衡过程解析

    Nginx使用反向代理实现负载均衡过程解析

    这篇文章主要介绍了Nginx使用反向代理实现负载均衡过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • 苹果M1芯片安装nginx 并且部署vue项目步骤详解

    苹果M1芯片安装nginx 并且部署vue项目步骤详解

    在本篇文章里小编给大家整理了一篇关于苹果M1芯片安装nginx 并且部署vue项目步骤详解内容,有需要的朋友们可以跟着学习参考下。
    2021-11-11
  • Logrotate如何实现每小时切割日志文件

    Logrotate如何实现每小时切割日志文件

    这篇文章主要介绍了Logrotate如何实现每小时切割日志文件问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • Nginx状态监控以及日志分析详解

    Nginx状态监控以及日志分析详解

    这篇文章主要给大家介绍了关于Nginx状态监控以及日志分析的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Nginx具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-06-06
  • Nginx服务器中强制使用缓存的配置及缓存优先级的讲解

    Nginx服务器中强制使用缓存的配置及缓存优先级的讲解

    这篇文章主要介绍了Nginx服务器中强制使用缓存的配置及缓存优先级的讲解,一定程度上可以帮助大家解决Nginx不缓存或缓存失效的问题,需要的朋友可以参考下
    2016-01-01
  • 详解如何在Nginx中设置文件上传大小限制

    详解如何在Nginx中设置文件上传大小限制

    在使用 Nginx 进行文件上传时,我们可能需要对上传文件的大小进行限制,以防止用户上传过大的文件导致服务器负载过高,本文将介绍如何在 Nginx 中设置文件上传大小限制,需要的朋友可以参考下
    2023-07-07
  • Nginx 禁止访问某个目录或文件的设置方法

    Nginx 禁止访问某个目录或文件的设置方法

    如果基于WEB根目录下,要禁止用户访问/config目录,或者要禁止用户访问/config.ini(ZF常用INI,不过建议还是放到WEB目录以外的地方),可以通过location进行配置,返回403或者404等
    2010-09-09
  • nginx通过nginx_upstream_check_module实现后端健康检查

    nginx通过nginx_upstream_check_module实现后端健康检查

    nginx的健康检查有两种,一种是被动健康检查,也就是nginx自带健康检查模块ngx_http_upstream_module,另一种就是主动健康检查,使用第三方模块nginx_upstream_check_module,下面就来介绍一下,感兴趣的可以了解一下
    2024-08-08
  • Nginx禁止IP访问只允许域名访问及防盗链设置

    Nginx禁止IP访问只允许域名访问及防盗链设置

    我们在使用的时候会遇到很多的恶意IP攻击,这个时候就要用到Nginx 禁止IP访问了,本文主要介绍了Nginx禁止IP访问只允许域名访问及Nginx防盗链设置,具有一定的参考价值,感兴趣的可以了解一下
    2023-10-10

最新评论