JavaScript

一度描画した線や円などの図形を変形させる場合はmodifyを使用します。modifyを使用すると、形を確定させた後でも図形描画のやりなおしができます。動作確認まずは結果をご確認ください。描画した線や多角形を変形できることを確かめられます。 ...

前回の記事で図形の変形についてお伝えしましたが、長方形については描画時とは異なる変形方法になってしまいます。長方形について、描画時と同じ方法で変形できるようにソースコードを修正していきます。動作確認まずは結果をご確認ください。 // 図形を...

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

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

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

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

今までは１つの図形を選択して、移動、変形させる方法についてお伝えしましたが、複数の図形を同時に選択することができれば、同時に移動させることが可能です。動作確認 // 図形を採番するための変数 var featureId = 0; // 描画...

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

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

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