教你利用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 相关文章推荐
Nginx访问日志及错误日志参数说明
Mar 31 Servers
Apache Calcite 实现方言转换的代码
Apr 24 Servers
使用 Apache 反向代理的设置技巧
Jan 18 Servers
使用 Apache Dubbo 实现远程通信(微服务架构)
Feb 12 Servers
Shell脚本一键安装Nginx服务自定义Nginx版本
Mar 20 Servers
解决xampp安装后Apache无法启动
Mar 21 Servers
阿里云k8s服务升级时502错误 springboot项目应用
Apr 09 Servers
阿里云ECS云服务器快照的概念以及如何使用
Apr 21 Servers
Nginx配置之禁止指定IP访问
May 02 Servers
Nginx限流和黑名单配置
May 20 Servers
apache ftpserver搭建ftp服务器
May 20 Servers
ubuntu下常用apt命令介绍
Jun 05 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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
php通过修改header强制图片下载的方法
2015/03/24 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
Django学习笔记之Class-Based-View
2017/02/15 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
python之列表推导式的用法
2019/11/29 Python
Django用户身份验证完成示例代码
2020/04/03 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
医院工作检讨书范文
2014/02/10 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
介绍信的格式
2015/01/30 职场文书
公司聚餐通知
2015/04/22 职场文书
德能勤绩工作总结
2015/08/11 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python
Django框架中视图的用法
2022/06/10 Python
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android
JS class语法糖的深入剖析
2022/07/07 Javascript