円の描画・削除
このページでは以下の方法について説明しています。
- 地図上に円を描画する方法
- 地図上の円を削除する方法
- 円の表示・非表示の切り替える方法
対象クラス
対象関数
- mapscript.Map.addCircle()
- mapscript.Map.removeCircle()
- mapscript.object.Circle.hide()
- mapscript.object.Circle.show()
- mapscript.object.Circle.isVisible()
実装サンプル
こちらをご覧ください。
実装方法
実装手順
- 地図を初期化します
- mapscript.object.Circle オブジェクトを生成します
- addCircle()関数( Map クラス )を用いて円を地図上に追加します
※円を削除する場合は removeCircle()関数( Map クラス )をご利用ください
サンプルコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>円の描画・削除</title> <!-- APIの呼び出し --> <script src="https://{HOST}/{CID}/v2/map_script?host={example.com}&signature={XXXXXXXXX}&request_code={YYYYYYYYY}"></script> <script> function initMap(){ const center = new mapscript.value.LatLng(35.681109, 139.767165); // (1) 地図を初期化 const map = new mapscript.Map('{CID}', { target: '#map', center: center, zoomLevel: 15 }); // (2) 円を生成 const circle = new mapscript.object.Circle({ center: center, // 中心緯度経度(必須) radius: 800, // 半径(m)(必須) fillColor: new mapscript.value.Color(1, 0, 0, 0.4), // 塗りつぶし色 strokeWeight: 2, // 縁線の太さ(px) strokeColor: new mapscript.value.Color(1, 0, 0, 1), // 縁線の色 }); // (3) 円を地図に追加 map.addCircle(circle); // 円を地図から削除 // こちらのコードで動作を確認する場合は以下の1行をコメントアウトの上ご利用ください map.removeCircle(circle); } </script> </head> <!-- 初期化関数の呼び出し --> <body onload="initMap()"> <div id="map" style="height: 500px; width: 500px;"></div> </body> </html>
色の指定について
mapscript.object.Circleオブジェクトでは、mapscript.value.Color オブジェクトを用いて円の色を指定することができます。
詳しくはこちらをご覧ください。
オブジェクトを作成するときのパラメータについて
mapscript.object.Circle オブジェクトを作成する際 center / radius パラメータの指定は必須となりますが、他にもオプショナルで指定できるパラメータがあります。
詳しくはこちらをご覧ください。
円の表示・非表示を切り替える
地図上に追加した円を非表示にしたい・表示したい場合は以下のような方法で実現が可能です。
サンプルコード
const circle = new mapscript.object.Circle({ center: new mapscript.value.LatLng(35.681109, 139.767165), // 中心緯度経度 radius: 800, // 半径(m) }); // 円を非表示 circle.hide(); // 円を表示 circle.show(); // 表示状態を取得(trueなら表示、falseなら非表示の状態) circle.isVisible();