ルート線の描画・削除
このページでは以下の方法について説明しています。
- 地図上にルート線を描画する方法
- 地図上のルート線を削除する方法
- ルート線の表示・非表示を操作する方法
対象クラス
- mapscript.Map
- mapscript.value.LatLng
- mapscirpt.value.GeoJsonFigureCondition
- mapscript.object.LatLngRect
対象関数
- mapscript.Map.addGeoJsonFigure()
- mapscript.Map.removeGeoJsonFigure()
- mapscript.util.locationsToLatLngRect()
- mapscript.Map.moveBasedOnLatLngRect()
実装サンプル
こちらをご覧ください。
実装方法
実装手順
- 地図を初期化します( Mapクラス )
- 描画するGeoJsonを用意します
- (2)を用いてmapscript.value.GeoJsonFigureConditionオブジェクトを生成します
- mapscript.util.locationsToLatLngRect()関数を用いて、LatLngRect オブジェクトを生成します
moveBasedOnLatLngRect()関数を用いてルート形状の表示領域を調整します - addGeoJsonFigure()関数( Map クラス ) を用いて(3)で生成したルート線オブジェクトを地図上に追加します
※ルート線を削除する場合は removeGeoJsonFigure()関数( 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)描画するGeoJsonを用意 const geojson = { type: "FeatureCollection", features: [ /* 略 */], bbox: [ 139.576936, 35.631637, 139.749903, 35.661491 ] }; // (3)ルート線オブジェクトを生成 figure = new mapscript.value.GeoJsonFigureCondition(geojson, { isRouteShape: true, // ルート線かどうか(ルート描画の場合は必須) }); // (4) 表示領域の調整 // bbox から LatLngRect オブジェクトを生成 const [lng1, lat1, lng2, lat2] = geojson.bbox; const rest = mapscript.util.locationsToLatLngRect([ new mapscript.value.LatLng(lat1, lng1), new mapscript.value.LatLng(lat2, lng2) ]); // LatLngRectが画面内に収まる位置に移動 map.moveBasedOnLatLngRect(rect, true); // (5) ルート線を地図に追加 map.addGeoJsonFigure(figure); // ルート線を地図から削除 // こちらのコードで動作を確認する場合は以下の1行をコメントアウトの上ご利用ください map.removeGeoJsonFigure(figure); } </script> </head> <!-- 初期化関数の呼び出し --> <body onload="initMap()"> <div id="map" style="height: 500px; width: 500px;"></div> </body> </html>
オブジェクトを作成するときのパラメータについて
mapscript.value.GeoJsonFigureCondition オブジェクトを作成する際 geojsonの指定は必須となりますが、他にもオプショナルで指定できるパラメータがあります。
詳しくはこちらをご覧ください。