線の表示
このページでは以下の方法について説明しています。
- 地図上に線を描画する方法
- 地図上の線を削除する方法
- 線の表示・非表示を操作する方法
対象クラス
対象関数
- mapscript.Map.addPolyline()
- mapscript.Map.removePolyline()
- mapscript.object.Polyline.hide()
- mapscript.object.Polyline.show()
- mapscript.object.Polyline.isVisible()
実装サンプル
こちらをご覧ください。
実装方法
実装手順
- 地図を初期化します
- mapscript.object.Polyline オブジェクトを生成します
- addPolyline()関数( Map クラス ) を用いて(2)で生成したオブジェクトを地図上に追加します
※線を削除する場合は removePolyline()関数( 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(){ // (1) 地図を初期化 const map = new mapscript.Map('{CID}', { target: '#map', center: new mapscript.value.LatLng(35.681109, 139.767165), zoomLevel: 15 }); // (2) 線オブジェクトを生成 const polyline = new mapscript.object.Polyline({ // パス(必須) path: [ new mapscript.value.LatLng(35.691982, 139.771014), new mapscript.value.LatLng(35.674311, 139.758945), new mapscript.value.LatLng(35.679212, 139.779682) ], fillColor: new mapscript.value.Color(1, 0, 0, 0.4), // 塗りつぶし色 strokeColor: new mapscript.value.Color(1, 0, 0, 1), // 縁線の色 strokeWeight: 3, // 線の縁線の太さ(px) }); // (3) 線を地図上に追加 map.addPolyline(polyline); // 線を地図から削除 // こちらのコードで動作を確認する場合は以下の1行をコメントアウトの上ご利用ください map.removePolyline(polyline); } </script> </head> <!-- 初期化関数の呼び出し --> <body onload="initMap()"> <div id="map" style="height: 500px; width: 500px;"></div> </body> </html>
色の指定について
mapscript.object.Polyline オブジェクトでは、mapscript.value.Color オブジェクトを用いて線の色を指定することができます。
詳しくはこちらをご覧ください。
オブジェクトを作成するときのパラメータについて
mapscript.object.Polyline オブジェクトを作成する際 path パラメータの指定は必須となりますが、他にもオプショナルで指定できるパラメータがあります。
詳しくはこちらをご覧ください。
線の表示・非表示を切り替える
地図上に追加した線を非表示にしたい・表示したい場合は以下のような方法で実現が可能です。
サンプルコード
const polyline = new mapscript.object.Polyline({ // パス(必須) path: [ new mapscript.value.LatLng(35.691982, 139.771014), new mapscript.value.LatLng(35.674311, 139.758945), new mapscript.value.LatLng(35.679212, 139.779682) ], }); // 線を非表示 polyline.hide(); // 線を表示 polyline.show(); // 表示状態を取得(trueなら表示、falseなら非表示の状態) polyline.isVisible();