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


Posted in Servers onSeptember 25, 2021

一、背景

最近有小伙伴遇到了大数据量地图加载慢的情况,观察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}占位符

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

代码如下:

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方式对接

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

代码如下:

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数组

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

代码如下:

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参数

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

代码如下:

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 服务内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Servers 相关文章推荐
Apache压力测试工具的安装使用
Mar 31 Servers
基于Nginx实现限制某IP短时间访问次数
Mar 31 Servers
详解Nginx 工作原理
Mar 31 Servers
Mac环境Nginx配置和访问本地静态资源的实现
Mar 31 Servers
详解Apache SkyWalking 告警配置指南
Apr 22 Servers
图文详解nginx日志切割的实现
Jan 18 Servers
阿里云日志过滤器配置日志服务
Apr 09 Servers
Windows Server 2008 修改远程登录端口以及配置防火墙
Apr 28 Servers
nginx 添加http_stub_status_module模块
May 25 Servers
nginx rewrite功能使用场景分析
May 30 Servers
Windows Server 2008配置防火墙策略详解
Jun 28 Servers
码云(gitee)通过git自动同步到阿里云服务器
Dec 24 Servers
Nginx进程调度问题详解
解决使用了nginx获取IP地址都是127.0.0.1 的问题
Sep 25 #Servers
关于nginx 实现jira反向代理的问题
Windows下用Nginx配置https服务器及反向代理的问题
Sep 25 #Servers
nginx安装以及配置的详细过程记录
Sep 15 #Servers
Nginx缓存设置案例详解
Sep 15 #Servers
图文详解Nginx版本平滑升级方案
Sep 15 #Servers
You might like
解析crontab php自动运行的方法
2013/06/24 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
php实现字符串翻转的方法
2015/03/27 PHP
typecho插件编写教程(一):Hello World
2015/05/28 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
php导出生成word的方法
2015/12/25 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
Javascript 强制类型转换函数
2009/05/17 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
详解vue axios中文文档
2017/09/12 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
Python for循环与range函数的使用详解
2019/03/23 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
美国电视购物:QVC
2017/02/06 全球购物
软件配置管理有什么好处
2015/04/15 面试题
什么是servlet
2012/05/08 面试题
幼儿园中班下学期评语
2014/04/18 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
php将xml转化对象的实例详解
2021/11/17 PHP