Nginx サービスを使用してサブドメイン環境を構築し、2D マップの読み込みパフォーマンスを向上させる方法を説明します。

Nginx サービスを使用してサブドメイン環境を構築し、2D マップの読み込みパフォーマンスを向上させる方法を説明します。

1. 背景

最近、友人が大規模なマップの読み込みが遅いという問題に遭遇しました。iServer のパフォーマンスが十分に活用されていないことに気づき、サブドメインを構築することで閲覧速度を改善することに成功しました。
ブラウザには同じドメイン名サービスへの同時リクエスト数に制限があるため、サブドメインを使用すると読み込み速度が向上します。Nginx サービスを通じて複数のサブドメインを展開すると、iServer に送信されるデータ リクエストの同時数が増加し、読み込み速度を向上させるという目的が達成されます。

2. Nginxの設定手順

1. 複数のポートを監視するためにNginx設定nginx.confを変更する

サーバー{
		聞く 8881;
		聞く 8882;
		聞く 8883;
		聞く 8884;
		聞く 8885;
        サーバー名 127.0.0.1,172.16.15.124;
        位置 / {
            ルートhtml;
            インデックス index.html index.htm;
        }

		場所 /iserver {
            プロキシパス http://172.16.15.124:8090;
            proxy_redirect オフ;
			proxy_buffering をオフ;
			proxy_set_header ホスト $host:$server_port;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        }

3. フロントエンドドッキング

1. Leafletはサブドメインパラメータを使用し、URLに{s}プレースホルダを追加します。

ここに画像の説明を挿入

コードは次のとおりです。

var マップ = "";
    マップ = L.map('マップ', {
        crs: L.CRS.EPSG4326,
        中心: [0, 0],
        最大ズーム: 18,
        ズーム: 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}";
    マップ = 新しい ol.Map({
        ターゲット: 'マップ',
        コントロール: ol.control.defaults({attributionOptions: {collapsed: false}})
            .extend([新しい ol.supermap.control.Logo()]),
        ビュー: 新しい ol.View({
            中心: [0, 0],
            ズーム: 2,
            投影: 'EPSG:3857',
            マルチワールド: true
        })
    });
    var レイヤー = 新しい ol.layer.Tile({
        ソース: 新しい ol.source.XYZ({
            URL: URL、
            ラップX: 真
        })、
        投影: 'EPSG:3857'
    });
    マップにレイヤーを追加します。
    map.addControl(新しい ol.supermap.control.ScaleLine());

3.ClassicはURL配列を直接渡します

ここに画像の説明を挿入

コードは次のとおりです。

var マップ、レイヤー、
        ホスト = window.isLocal ? window.server : "https://iserver.supermap.io",
        url = ホスト + "/iserver/services/map-world/rest/maps/World";
    // マップを初期化する map = new SuperMap.Map("map", {
        コントロール: [
            新しいSuperMap.Control.Navigation()、
            新しいSuperMap.Control.Zoom()]
    });
    map.addControl(新しい 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});
    関数addLayer() {
        マップにレイヤーを追加します。
        //マップ範囲を表示 map.setCenter(new SuperMap.LonLat(0, 0), 0);

4. MapboxGLはタイルパラメータを直接渡す

ここに画像の説明を挿入

コードは次のとおりです。

var ホスト = window.isLocal ? window.server : 'https://iserver.supermap.io';
            var map = 新しい mapboxgl.Map({
                コンテナ: 'map', // コンテナ ID
                スタイル: {
                    バージョン: 8,
                    出典:
                        'ラスタータイル': {
                            タイプ: 'ラスター'、
                            タイルサイズ: 256,
                            タイル: ["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"],
                            ラスターソース: 'iserver'
                        }
                    },

                    レイヤー:
                        {
                            id: 'シンプルタイル',
                            タイプ: 'ラスター'、
                            ソース: 'raster-tiles'、
                            最小ズーム: 0,
                            最大ズーム: 22
                        }
                    ]
                },
                crs: 'EPSG:4326'、// または mapboxgl.CRS.EPSG4326 または new mapboxgl.CRS('EPSG:4326',[-180,-90,180,90]);
                中心: [0, 0],
                ズーム: 2
            });

以上で、Nginx サービスを使用してサブドメイン環境を構築し、2 次元マップの読み込みパフォーマンスを向上させる方法についての説明は終了です。Nginx サービスに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Nginx で Gzip 圧縮を有効にしてページの読み込み速度を大幅に向上させる方法
  • Nginx サーバーの再起動、シャットダウン、リロード コマンド

<<:  JavaScript es6 の新しい配列メソッドの詳細な説明

>>:  MySQL トランザクション制御フローと ACID 特性

推薦する

MySQL でのインデックスの追加と削除に関連する操作

目次1. インデックスの役割2. インデックスの作成と削除(1)ALTER TABLE文を使用して、...

IPとポートが接続可能かどうかを検出する方法

Windows コマンドテルネット形式: telnet IP ポート場合: テルネット 191.1....

一般的なブラウザ互換性の問題(概要)

ブラウザの互換性とは、スタイルの互換性 (CSS)、インタラクションの互換性 (JavaScript...

MySQLデュアルマシンホットスタンバイと負荷分散の実装手順の詳細説明

MySQL データベースには増分バックアップ メカニズムはありませんが、マスター データベース内のす...

Web フォントの読み込みを最適化する方法をご存知ですか?

タイトル通りです!一般的に使用される font-family はブラウザの組み込みフォントを読み込み...

Vue でクラスとスタイルを使用して v-bind バインディングを使用するいくつかの方法

要素にクラスを追加/削除することは、プロジェクト開発では非常に一般的な動作です。たとえば、Web サ...

JavaScript strictモードの概要 strictを使用する

目次1. 概要1.1 厳密モードとは何ですか? 1.2 厳密モードの目的2. 厳密モードを有効にする...

Linuxファイアウォールiptablesの詳細な紹介、設定方法と事例

1.1 iptablesファイアウォールの概要Netfilter/Iptables (以下、Ipta...

jQueryはフェードインとフェードアウト効果を実現します

jQuery を使用してフェードインとフェードアウト効果を完成させる前に、まずいくつかのコードを理解...

Dockerを使用してSonarQubeをインストールする詳細なチュートリアル

目次1. イメージをプルする1.1 関連するイメージをプルして実行する1.1.1 関連する画像を取得...

Vue+ElementUI で超大規模なフォーム例を処理する方法

最近、社内の業務調整により、以前の超長文のロジックが大幅に変更されたため、リファクタリングする予定で...

Nginxのアクセス制限設定の詳細な説明

Nginxのアクセス制限設定とはNginx のアクセス制限は、IP ベースのアクセス制御とユーザーベ...

nginx設定ファイルの場所を見つける方法の詳細な説明

よく知らないサーバーの場合や、かなり前にインストールした場所を忘れてしまった場合、構成ファイルの場所...

シンプルな虫眼鏡効果を実現するJavaScript

大きな箱の中に写真があります。マウスをその上に置くと、半透明のマスク レイヤーが表示されます。マウス...

Douyin ロゴを作成する手順の CSS3 分析

「Tik Tok」も大人気で、ユーザー数は7億人と言われています。今日は、注目を集めるためにTikT...