openlayers6のマップオーバーレイの詳細な説明

1. オーバーレイの概要

オーバーレイとは、その名の通り、別の形で地図上に表示される、覆うことを指します。多くの学生は、これをレイヤーと混同しています。主に、地図上の位置に関連する要素を配置するために使用されます。一般的な地図オーバーレイには、 popup 彈窗、 label標注信息、 text文本信息などの 3 種類があり、これらのオーバーレイは HTML の要素に相当します。オーバーレイ属性要素は HTML 要素にバインドされ、座標パラメータが同時に設定され、HTML 要素が地図上に配置されます。パンやズームを行うと、HTML 要素も地図の動きに合わせて移動します。

公式サイトの説明を見てみましょう。実はこの属性はデフォルトでマップに存在しています。前回の記事のレイヤー、コントロール、インタラクションと同じです。默認加載地圖的情況下是允許設置默認的overlay覆蓋物。特定のイベントやメソッドがトリガーされたときに、別のカバレッジを追加することもできます。ここでは前回の記事の説明を参照できますが、ここでは詳細には説明しません。

ここに画像の説明を挿入

2. オーバーレイプロパティ

Overlay は、初期化時に多くの構成パラメータを受け入れることができます。これらの構成パラメータは、オブジェクトリテラル (options) を形成するキーと値のペアであり、その後、 new ol.Overlay(options)などの「コンストラクター」に渡されます。ここで、options は、パラメータのキーと値のペアで構成されるオブジェクトリテラルです。設定可能なキーと値のペアは次のように定義されます: (赤は共通プロパティを示します)

id 、対応するオーバーレイの ID を設定します。これにより、ol.Map の getOverlayById メソッドを使用して対応するオーバーレイを取得できます。
elementはオーバーレイに含まれる DOM 要素です。 offsetはオフセットで、ピクセル単位で、配置位置 (position) に対するオーバーレイのオフセットです。デフォルト値は [0, 0] で、正の値はそれぞれ右と下にオフセットします。 positionはマップの座標系におけるオーバーレイの位置です。
positioning 、オーバーレイ位置の相対位置については、可能な値には、bottom-left、bottom-center、bottom-right、center-left、center-center、center-right、top-left、top-center、top-right が含まれます。デフォルトは top-left で、要素の左上隅が位置と一致することを意味します。
stopEvent 、マップのイベント伝播を停止するかどうかを指定します。デフォルト値は true で、伝播を停止することを意味します。わかりにくいかもしれません。たとえば、マウスホイールをマップ上で回転すると、マップのズームイベントがトリガーされます。ホイールをオーバーレイ上で回転すると、ズームイベントはトリガーされません。マウスでオーバーレイのズームをサポートする場合は、このプロパティを false に設定するだけです。
insertFirst は、オーバーレイを最初にコンテナーに追加するかどうかを指定します。stopEvent が true に設定されている場合、オーバーレイコントロールと openlayers コントロールはコンテナー内に配置されます。このとき、insertFirst を true に設定すると、オーバーレイが最初にコンテナーに追加されます。このように、オーバーレイはデフォルトでコントロールの次のレイヤーにあります (CSS z-index)。したがって、stopEvent と insertFirst の両方がデフォルト値を使用する場合、オーバーレイはデフォルトでコントロールの次のレイヤーにあります。
autoPan 、オーバーレイの setPosition メソッドがトリガーされたときにトリガーされます。オーバーレイがマップの境界を超えると、オーバーレイが完全に表示されるようにマップが自動的に移動します。
autoPanAnimation、自動パン効果アニメーションを設定します。パラメータタイプはolx.animation.panOptionsです。
autoPanMargin、マップが自動的にパンされるときのマップの端とオーバーレイ間のスペース（ピクセル単位）。デフォルトは 20 ピクセルです。

以下の場合に使用します。

2. オーバーレイイベント

サポートされているイベントは主に、 ol.Objectから継承されたchangeイベントで、オーバーレイ関連のプロパティまたはオブジェクトが変更されたときにトリガーされます。

参照カウンタが増加するとトリガーされる変更。
change:element、オーバーレイに対応する要素が変更されたときにトリガーされます。
change:map、オーバーレイに対応するマップが変更されたときにトリガーされます。
change:offset、オーバーレイに対応するオフセットが変更されたときにトリガーされます。
change:position、オーバーレイの対応する位置が変更されたときにトリガーされます。
change:positioning、オーバーレイの対応する配置が変更されたときにトリガーされます。
propertychange、オーバーレイの対応するプロパティが変更されたときにトリガーされます。

では、対応するイベントをどのようにバインドするのでしょうか? Openlayers バインディングイベントは、DOM レベル 2 イベントバインディングを含む一般的な DOM イベントバインディングルールに従います。以下は、オーバーレイの位置が変更されたときにブラウザーコンソールに文字列を出力する例です。

var オーバーレイ = 新しい ol.Overlay({
    // オーバーレイを作成します...省略});
// イベント overlay.on("change:position", function(){
    console.log("位置が変更されました!");
})

4. オーバーレイ方式

サポートされているメソッドここでは、オーバーレイに固有のメソッドのみを紹介し、継承されたメソッドは紹介しません。これらは主に、オーバーレイプロパティとそれに関連付けられたオブジェクトのgetメソッドとsetメソッドです。

getElement、オーバーレイを含む DOM 要素を取得します。
getId、オーバーレイ ID を取得します。
getMap、オーバーレイに関連付けられたマップオブジェクトを取得します。
getOffset、オフセット属性を取得します。
getPosition、位置属性を取得します。
getPositioning、配置属性を取得します。
setElement; オーバーレイ要素を設定します。
setMap、オーバーレイ付きのマップオブジェクトを設定します。
setOffset、オフセットを設定します。
setPosition、位置プロパティを設定します。
setPositioning は、配置プロパティを設定します。

5. 最後まで書き続ける

冒頭で、オーバーレイにはpopup 彈窗、 label標注信息、 text文本信息

詳細については、この記事を参照してください openlayers6 [8] マップオーバーレイオーバーレイポップアップウィンドウ、マーカー注釈、テキストテキストの3つの一般的な使用法

openlayers6マップオーバーレイの詳細な説明については、これで終わりです。より関連性の高いopenlayerオーバーレイマップカバレッジコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません: