1. はじめに多くの場合、ポイント フィーチャ レイヤー内のフィーチャの数は数百または数千になります。これらのフィーチャを処理せずにマップに直接ロードすると、ユーザーの視覚的エクスペリエンスが低下するだけでなく、マップ インターフェースがフリーズする原因にもなります。次のコードは、表示用に <!DOCTYPE html> <html> <ヘッド> <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" /> <メタ文字セット="utf-8" /> <title>OpenLayers</title> <スタイル> html、本文、#map { 幅: 100%; 高さ: 100%; マージン: 0; パディング: 0; } </スタイル> <link href="libs/ol/ol.css" rel="スタイルシート" /> <script src="libs/ol/ol.js"></script> </head> <本文> <div id="マップ"></div> <スクリプト> // 1000 個のランダムな特徴を作成します。var source = new ol.source.Vector(); (var i = 1; i <= 200; i++) の場合 { var 座標 = [120.00 + Math.random(), 30.00 + Math.random()]; var feature = new ol.Feature(new ol.geom.Point(座標)); ソース.addFeature(機能); } (var i = 1; i <= 200; i++) の場合 { var 座標 = [120.01 + Math.random(), 30.01 + Math.random()]; var feature = new ol.Feature(new ol.geom.Point(座標)); ソース.addFeature(機能); } (var i = 1; i <= 200; i++) の場合 { var 座標 = [120.02 + Math.random(), 30.02 + Math.random()]; var feature = new ol.Feature(new ol.geom.Point(座標)); ソース.addFeature(機能); } (var i = 1; i <= 200; i++) の場合 { var 座標 = [120.03 + Math.random(), 30.03 + Math.random()]; var feature = new ol.Feature(new ol.geom.Point(座標)); ソース.addFeature(機能); } (var i = 1; i <= 200; i++) の場合 { var 座標 = [120.04 + Math.random(), 30.04 + Math.random()]; var feature = new ol.Feature(new ol.geom.Point(座標)); ソース.addFeature(機能); } // レイヤーを作成する var layer = new ol.layer.Vector({ 出典: 出典、 スタイル: 関数 (機能、解像度) { var style = new ol.style.Style({ 画像: 新しい ol.style.Icon({ ソース: 'img/location.png' }) }) 戻りスタイル; } }); // マップを作成する var map = new ol.Map({ ターゲット: 'マップ', レイヤー: 新しい ol.layer.Tile({ ソース: 新しい ol.source.OSM() })、 層 ]、 ビュー: 新しい ol.View({ 投影: 'EPSG:4326', 中央: [120, 30], ズーム: 10, 最小ズーム: 5, 最大ズーム: 14 }) }); </スクリプト> </本文> </html> 実行結果は下の図に示されています。 たくさんのポイントが密集しているのを見ると気持ち悪いと思いませんか?一般的に、ポイント フィーチャ レイヤーに多数のポイントがある場合は、 2. ポイントフィーチャーレイヤーの集約
レイヤー集約コードは次のとおりです。 <!DOCTYPE html> <html> <ヘッド> <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" /> <メタ文字セット="utf-8" /> <title>OpenLayers</title> <スタイル> html、本文、#map { 幅: 100%; 高さ: 100%; マージン: 0; パディング: 0; } </スタイル> <link href="libs/ol/ol.css" rel="スタイルシート" /> <script src="libs/ol/ol.js"></script> </head> <本文> <div id="マップ"></div> <スクリプト> // 1000 個のランダムな特徴を作成します。var source = new ol.source.Vector(); (var i = 1; i <= 200; i++) の場合 { var 座標 = [120.00 + Math.random(), 30.00 + Math.random()]; var feature = new ol.Feature(new ol.geom.Point(座標)); ソース.addFeature(機能); } (var i = 1; i <= 200; i++) の場合 { var 座標 = [120.01 + Math.random(), 30.01 + Math.random()]; var feature = new ol.Feature(new ol.geom.Point(座標)); ソース.addFeature(機能); } (var i = 1; i <= 200; i++) の場合 { var 座標 = [120.02 + Math.random(), 30.02 + Math.random()]; var feature = new ol.Feature(new ol.geom.Point(座標)); ソース.addFeature(機能); } (var i = 1; i <= 200; i++) の場合 { var 座標 = [120.03 + Math.random(), 30.03 + Math.random()]; var feature = new ol.Feature(new ol.geom.Point(座標)); ソース.addFeature(機能); } (var i = 1; i <= 200; i++) の場合 { var 座標 = [120.04 + Math.random(), 30.04 + Math.random()]; var feature = new ol.Feature(new ol.geom.Point(座標)); ソース.addFeature(機能); } // 集計 var cluster = new ol.source.Cluster({ 出典: 出典、 距離: 100 }) // レイヤーを作成する var layer = new ol.layer.Vector({ 出典: クラスター、 スタイル: 関数 (機能、解像度) { var size = feature.get('features').length; var style = new ol.style.Style({ イメージ: 新しい ol.style.Circle({ 半径: 30, ストローク: 新しい ol.style.Stroke({ 色: 「白」 })、 塗りつぶし: 新しい ol.style.Fill({ 色: '青' }) })、 テキスト: 新しい ol.style.Text({ テキスト: size.toString(), 塗りつぶし: 新しい ol.style.Fill({ 色: 「白」 }) }) }) 戻りスタイル; } }); // マップを作成する var map = new ol.Map({ ターゲット: 'マップ', レイヤー: 新しい ol.layer.Tile({ ソース: 新しい ol.source.OSM() })、 層 ]、 ビュー: 新しい ol.View({ 投影: 'EPSG:4326', 中央: [120, 30], ズーム: 10, 最小ズーム: 5, 最大ズーム: 14 }) }); </スクリプト> </本文> </html> 実行結果は下の図に示されています。 3. 重合の特殊処理上記のコードはポイント フィーチャ レイヤーの集約を実現しますが、実際には問題があります。次の図に示すように、 一般的に言えば、 <!DOCTYPE html> <html> <ヘッド> <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" /> <メタ文字セット="utf-8" /> <title>OpenLayers</title> <スタイル> html、本文、#map { 幅: 100%; 高さ: 100%; マージン: 0; パディング: 0; } </スタイル> <link href="libs/ol/ol.css" rel="スタイルシート" /> <script src="libs/ol/ol.js"></script> </head> <本文> <div id="マップ"></div> <スクリプト> // 1000 個のランダムな特徴を作成します。var source = new ol.source.Vector(); (var i = 1; i <= 200; i++) の場合 { var 座標 = [120.00 + Math.random(), 30.00 + Math.random()]; var feature = new ol.Feature(new ol.geom.Point(座標)); ソース.addFeature(機能); } (var i = 1; i <= 200; i++) の場合 { var 座標 = [120.01 + Math.random(), 30.01 + Math.random()]; var feature = new ol.Feature(new ol.geom.Point(座標)); ソース.addFeature(機能); } (var i = 1; i <= 200; i++) の場合 { var 座標 = [120.02 + Math.random(), 30.02 + Math.random()]; var feature = new ol.Feature(new ol.geom.Point(座標)); ソース.addFeature(機能); } (var i = 1; i <= 200; i++) の場合 { var 座標 = [120.03 + Math.random(), 30.03 + Math.random()]; var feature = new ol.Feature(new ol.geom.Point(座標)); ソース.addFeature(機能); } (var i = 1; i <= 200; i++) の場合 { var 座標 = [120.04 + Math.random(), 30.04 + Math.random()]; var feature = new ol.Feature(new ol.geom.Point(座標)); ソース.addFeature(機能); } // 集計 var cluster = new ol.source.Cluster({ 出典: 出典、 距離: 100 }) // レイヤーを作成する var layer = new ol.layer.Vector({ 出典: クラスター、 スタイル: 関数 (機能、解像度) { var size = feature.get('features').length; (サイズ == 1)の場合{ 新しい ol.style.Style({ を返します 画像: 新しい ol.style.Icon({ ソース: 'img/location.png' }) }) } それ以外 { 新しい ol.style.Style({ を返します イメージ: 新しい ol.style.Circle({ 半径: 30, ストローク: 新しい ol.style.Stroke({ 色: 「白」 })、 塗りつぶし: 新しい ol.style.Fill({ 色: '青' }) })、 テキスト: 新しい ol.style.Text({ テキスト: size.toString(), 塗りつぶし: 新しい ol.style.Fill({ 色: 「白」 }) }) }) } } }); // マップを作成する var map = new ol.Map({ ターゲット: 'マップ', レイヤー: 新しい ol.layer.Tile({ ソース: 新しい ol.source.OSM() })、 層 ]、 ビュー: 新しい ol.View({ 投影: 'EPSG:4326', 中央: [120, 30], ズーム: 10, 最小ズーム: 5, 最大ズーム: 14 }) }); </スクリプト> </本文> </html> 実行結果は下の図に示されています。 実際、このエフェクトの実装は非常に簡単です。コア コードは次のとおりです: 4. 重合の特殊処理 2上記のコードでは、マップの最大ズーム レベルを <!DOCTYPE html> <html> <ヘッド> <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" /> <メタ文字セット="utf-8" /> <title>OpenLayers</title> <スタイル> html、本文、#map { 幅: 100%; 高さ: 100%; マージン: 0; パディング: 0; } </スタイル> <link href="libs/ol/ol.css" rel="スタイルシート" /> <script src="libs/ol/ol.js"></script> </head> <本文> <div id="マップ"></div> <スクリプト> // 1000 個のランダムな特徴を作成します。var source = new ol.source.Vector(); (var i = 1; i <= 200; i++) の場合 { var 座標 = [120.00 + Math.random(), 30.00 + Math.random()]; var feature = new ol.Feature(new ol.geom.Point(座標)); ソース.addFeature(機能); } (var i = 1; i <= 200; i++) の場合 { var 座標 = [120.01 + Math.random(), 30.01 + Math.random()]; var feature = new ol.Feature(new ol.geom.Point(座標)); ソース.addFeature(機能); } (var i = 1; i <= 200; i++) の場合 { var 座標 = [120.02 + Math.random(), 30.02 + Math.random()]; var feature = new ol.Feature(new ol.geom.Point(座標)); ソース.addFeature(機能); } (var i = 1; i <= 200; i++) の場合 { var 座標 = [120.03 + Math.random(), 30.03 + Math.random()]; var feature = new ol.Feature(new ol.geom.Point(座標)); ソース.addFeature(機能); } (var i = 1; i <= 200; i++) の場合 { var 座標 = [120.04 + Math.random(), 30.04 + Math.random()]; var feature = new ol.Feature(new ol.geom.Point(座標)); ソース.addFeature(機能); } // 集計 var cluster = new ol.source.Cluster({ 出典: 出典、 距離: 100 }) // レイヤーを作成する var layer = new ol.layer.Vector({ 出典: クラスター、 スタイル: 関数 (機能、解像度) { var size = feature.get('features').length; (サイズ == 1)の場合{ 新しい ol.style.Style({ を返します 画像: 新しい ol.style.Icon({ ソース: 'img/location.png' }) }) } それ以外 { 新しい ol.style.Style({ を返します イメージ: 新しい ol.style.Circle({ 半径: 30, ストローク: 新しい ol.style.Stroke({ 色: 「白」 })、 塗りつぶし: 新しい ol.style.Fill({ 色: '青' }) })、 テキスト: 新しい ol.style.Text({ テキスト: size.toString(), 塗りつぶし: 新しい ol.style.Fill({ 色: 「白」 }) }) }) } } }); // マップを作成する var map = new ol.Map({ ターゲット: 'マップ', レイヤー: 新しい ol.layer.Tile({ ソース: 新しい ol.source.OSM() })、 層 ]、 ビュー: 新しい ol.View({ 投影: 'EPSG:4326', 中央: [120, 30], ズーム: 10, 最小ズーム: 5, 最大ズーム: 14 }) }); // マップ解像度の変更イベントをリッスンします。map.getView().on('change:resolution', function (event) { (map.getView().getZoom() == map.getView().getMaxZoom()) の場合 { クラスター.set距離(0); } それ以外 { クラスター.set距離(100); } }) </スクリプト> </本文> </html> 実行結果は下の図に示されています。 このエフェクトの実装も非常に簡単です。現在のマップの解像度変更イベントをリッスンするだけです。現在のズーム レベルがすでに最大レベルである場合は、集約距離を 5. 結論要素の数が多い場合は、それらを集約することを検討する必要があります。これにより、ユーザー エクスペリエンスが向上するだけでなく、インターフェイスのフリーズも回避できます。実際、上記のコードでは、 map.on('moveend', 関数(イベント) { (map.getView().getZoom() == map.getView().getMaxZoom()) の場合 { クラスター.set距離(0); } それ以外 { クラスター.set距離(100); } });
OpenLayers でポイント フィーチャ レイヤーの集約表示を実装する方法についての記事はこれで終わりです。OpenLayers でポイント フィーチャ レイヤーの集約表示に関する詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Ubuntu 20.04 Firefox でビデオを再生できない (Flash プラグインがない) 場合の解決策
Nginx 仮想ドメイン名設定を使用すると、ドメイン名を購入せずに特定のドメイン名を介してローカル ...
1. マスタースレーブレプリケーションとは何ですか?マスター データベースの DDL および DML...
遅いログクエリ機能スロー ログ クエリの主な機能は、設定された時間しきい値を超える SQL ステート...
会社のサービスはdockerを使用しており、ディスクマンが見つかりました。その後、次のコマンドを実行...
目次1. 子プロセス2. nodejsでのコマンド実行2.1 16進数エンコード2.2 ユニコードエ...
1. ユーザーとパスワードの作成方法1. MySQLデータベースに入る mysql> mysq...
序文Reduce は ES5 で追加された新しい従来の配列メソッドの 1 つです。forEach、f...
問題の説明最近のバックグラウンドサービスでは、特定の命令の要求データをディスクに保存する新しい機能が...
1. kvm仮想化をインストールする : : : : : : : : : : : : : : : :...
JConsoleとはJConsole は Java 5 で導入されました。 JConsole は、コ...
目次1. NFS-Ganeshaの紹介2. NFS-Ganeshaの設定3. NFS-Ganesha...
Windows 環境と Linux 環境では結果が異なります。ウィンドウズステップ 1: Maven...
JavaScript でポインターの位置を取得する方法は、イベント オブジェクトの pageX と ...
データベースを表示show databases;データベースを作成するDATABASE データベース...
過去 2 日間、ワークベンチが Alibaba Cloud Server に接続できない問題を解決す...