1. 背景最近、友人が大規模なマップの読み込みが遅いという問題に遭遇しました。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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: JavaScript es6 の新しい配列メソッドの詳細な説明
>>: MySQL トランザクション制御フローと ACID 特性
ドクター紹介: Docker はコンテナ関連の技術です。簡単に言うと、さまざまなソフトウェアを実行で...
著者が MySQL を使用してユーザーを追加していたところ、ユーザー名が間違って記述されていることに...
目次序文1. 画像の最適化2. .mapファイルの生成を無効にする3. ルーティングの遅延読み込み4...
実行中のコンテナIDを見つける ドッカーps上記のコンテナの物理的な場所を見つける /var/lib...
1. 公式紹介grep は Linux でよく使用されるコマンドです。これは、ファイルやテキストに対...
この記事では、パーセンテージスコアリングプログレスバーを実現するためのjQueryの具体的なコードを...
年末なので仕事も少なくなっています。私が何もせずにいるのを見ると、上司はきっと不快に思うでしょう。そ...
序文現在、私はコースウェア PPT のオンライン プレビューを必要とする高品質のコースに取り組んでい...
CSS3 を学ぶということは、新しい機能と基本的な理論に慣れることを意味します。この記事では、ケー...
この記事では、Linux ファイル管理コマンドについて例を挙げて説明します。ご参考までに、詳細は以下...
この記事の主な内容は次のとおりです。 1. ブラウザのサポート2. 画像3. レスポンシブツール4....
チームは新しいフレームを交換しました。すべての新しいビジネスでは、新しいフレームワークと新しいデータ...
今日は、企業の実際の本番環境でよく遭遇する、Nginx を新しいバージョンにアップグレードし、古いバ...
binlog は、すべての mysql dml 操作を記録するバイナリ ログ ファイルです。 bin...
目次概要CommonJS 仕様Node の CommonJS 仕様の実装モジュールのエクスポートとイ...