表示領域の調整
このページでは以下の方法について説明しています。
- 指定した緯度経度をすべて表示できるように表示領域を調整する方法
対象クラス
対象関数
実装サンプル
こちらをご覧ください。
実装方法
実装手順
- 地図を初期化します
- mapscript.util.locationsToLatLngRect()関数を用いて、指定した緯度経度が全て含まれる矩形（ LatLngRect オブジェクト)を作成します
- moveBasedOnLatLngRect()関数（ Map クラス ）を用いて表示領域を調整します
第一引数には表示領域に収めたいLatLngRectオブジェクト、第二引数には表示領域を移動する際のアニメーションの有無を指定します
サンプルコード
<!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>
let map = null;
const tokyo_position = new mapscript.value.LatLng(35.681109, 139.767165);
const hachioji_position = new mapscript.value.LatLng(35.655425, 139.339275);
function initMap(){
// (1) 地図を初期化
map = new mapscript.Map('{CID}', {
target: '#map',
center: new mapscript.value.LatLng(35.681109, 139.767165),
zoomLevel: 15
});
}
function moveFit() {
// （2）指定した緯度経度がすべて入る矩形を作成
const rect = mapscript.util.locationsToLatLngRect([
tokyo_position,
hachioji_position
]);
// (3) 表示領域の調整
map.moveBasedOnLatLngRect(rect, true);
}
</script>
</head>
<!-- 初期化関数の呼び出し -->
<body onload="initMap()">
<div id="map" style="height: 500px; width: 500px;"></div>
<input type="button" value="東京と八王子が入る様に調整" onclick="moveFit()"/>
</body>
</html>
ルート形状を表示領域内に収める
ルート形状取得APIにて取得したGeoJSONに含まれるbboxを用いることで、ルート形状を表示領域内に収めることができます。
実装例は以下の通りです。
サンプルコード
// 取得したGeoJson
const geojson = {
type: "FeatureCollection",
features: [ /* 略 */],
bbox: [
139.576936,
35.631637,
139.749903,
35.661491
]
};
// bbox から LatLngRect オブジェクトを生成
const [lng1, lat1, lng2, lat2] = geojson.bbox;
const rect = mapscript.util.locationsToLatLngRect([
new mapscript.value.LatLng(lat1, lng1),
new mapscript.value.LatLng(lat2, lng2)
]);
map.moveBasedOnLatLngRect(rect, true);