OpenLayers

JavaScript

固定画像の移動方法~OpenLayersで図形を描画する⑧

固定画像は、長方形オブジェクトと、画像レイヤーの二重構造になっているため、移動・変形させようとすると少しコツがいります。 描画する図形全てにIDをふり、長方形と画像の二重構造をリンクさせます。 動作確認 まずは結果から ...
JavaScript

図形を選択する方法~OpenLayersで図形を描画する⑥

前回までの記事でOpenLayersにおける図形の描画についてお伝えしました。 今回から描画した図形を選択・移動・変形させる方法についてお伝えします。マーカーの置き直しや、多角形の角を増やしたりすることができます。 これらを実...
JavaScript

図形を移動させる方法~OpenLayersで図形を描画する⑦

前回の記事でOpenLayersで描画した図形を選択することについてお伝えしました。 しかし、選択ができるようになっただけでは、機能が増えた感じはないと思います。移動ができることによって、「誤った場所に描画してしまった図形を置き直す...
JavaScript

フリーハンドで図形を描画する方法~OpenLayersで図形を描画する③

OpenLayersの図形描画を用いて、以下のようなことができます。 マーカーの配置線を引く円で囲む三角形や四角形などの「多角形」で囲むテキストを書き込む矢印で強調する固定画像の配置フリーハンドで線を書き込む 今回は「フリーハ...
JavaScript

図形を複数選択する方法~OpenLayersで図形を描画する⑪

今までは1つの図形を選択して、移動、変形させる方法についてお伝えしましたが、複数の図形を同時に選択することができれば、同時に移動させることが可能です。 動作確認 ...
JavaScript

地図上にテキストを書き込む方法~OpenLayersで図形を描画する②

前回の記事ではOpenLayersで図形描画の基本についてお伝えしました。 これでOpenLayersがお絵かきアプリに早変わりします。 今回はさらに深堀りしていきます。OpenLayersの描画機能では以下のことができます。...
JavaScript

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

①基本編ではーカーの描画方法についてお伝えいたしました。 マーカーには拡大/縮小しても表示される大きさは変わらないという特徴があります。しかし、その特徴は以下のような場面で不都合となります。 地図以外の画像を地図の一部として扱...
JavaScript

OpenLayersで図形を描画する①~基本

OpenLayersでは地図内にお絵かきができます。以下のようなお絵かきが可能です。 マーカーの配置 線を引く 円で囲む 三角形や四角形などの「多角形」で囲む テキストを書き込む 矢印で強調する 固定画像の配置 フリーハンドで線を書...
タイトルとURLをコピーしました