地図上に固定画像を配置する方法~OpenLayersで図形を描画する⑤

①基本編ではーカーの描画方法についてお伝えいたしました。

マーカーには拡大/縮小しても表示される大きさは変わらないという特徴があります。
しかし、その特徴は以下のような場面で不都合となります。

  • 地図以外の画像を地図の一部として扱いたい
  • 地図の拡大/縮小とともに拡大/縮小される画像を配置したい

そのような場合には、今回ご紹介する固定画像の配置を行う必要があります。

実際にやってみた

画像の拡大・縮小の実験

まずは結果から↓↓↓↓↓

マーカーと画像が配置されています。
こちらを拡大「+」してみます。

固定画像は地図と一緒に拡大されていますが、マーカー画像は拡大されていません。
次は縮小表示「ー」してみます。

マーカーはどの縮尺においても同じ大きさで表示されることがおわかりいただけると思います。

それに対して固定画像の方は地図が縮小されると、地図と一緒に縮小されています

ソースコード

ソースコードはこちらです。

操作方法

②テキスト表示で使用した矩形描画機能を使用して、長方形を描画します。

長方形を描画すると、その範囲に画像が配置されます。

動かしてみよう

実際に動作するものがこちらです。
「OpenLayersで図形を描画する」シリーズの集大成になります。

解説

ボタンの配置

368〜400行目でボタンの配置を行なっています。
仕組みはこれまでに扱ってきたボタンと同じのため、説明は省略します。

スタイルの設定

95〜97行目でスタイルの設定を行なっています。

画像は描画領域を指定するのみで、長方形を描画するわけではないので、nullを返却します。

これにより、長方形は領域指定のみに使用され、実際に描画されることはなくなります。

画像の描画

471〜487行目、矩形描画で領域を指定した後の処理で、画像の配置を行います。

473行目、「ol.extent.boundingExtent」という処理を行うことで、描画された長方形の頂点を「extent」(※)という形式で取得できます。

(※)OpenLayersでは長方形を扱う際に、「extent」という概念が出てきます。extentとは[minX, minY,maxX,maxY]各座標を配列で保持しています。
OpenLayersでextentというワードが出てきたら、長方形のことを指すと覚えておいてください。

extentを取得できたら、その情報を取得し、ImageLayerを作成します。
ImageLayerには「url」属性に固定画像のURLを指定することで、その画像をextent内に表示することができます。

487行目の「map.addLayer(imageLayer)」の処理で、地図に上述のImageLayerを配置しています。

以上の処理を行うことで、固定画像の配置を実現しております。

まとめ

今回は矩形描画とImageLayerの組み合わせを用いて、OpenLayersの地図上にオリジナルの画像を配置する方法についてお伝えしました。

OpenLayersの「Draw」機能は描画前、描画後、スタイルの3つの機会で独自の処理を行えるため、図形描画について、とても柔軟なカスタマイズを行うことができます。

今回は5回に分けて以下の描画機能についてお伝えしました。

図形描画についてこれ程の機能を有しているオープンソースのライブラリは他にありません。

ぜひ、これらの機能を活用して地図機能の拡充を試みてください!

OpenLayersについての別記事もぜひご覧ください!

①図形を描画する(マーカー、線、円、多角形)
②テキストを書き込む(矩形)
③フリーハンドで書き込む
④矢印で強調する
⑤固定画像を配置する
⑥図形を選択する
⑦図形を移動させる
⑧固定画像の移動
⑨図形を変形させる
⑩長方形を変形させる
⑪図形を複数選択する
⑫図形をJSON形式で保存&読込
⑬図形を削除する
⑭線のスタイルを設定する
⑮図形の色を設定する

【入門】地図を表示させる方法
ボタンを配置する方法
ミニマップを表示する方法

コメント

タイトルとURLをコピーしました