ベクター地図の利用
このページでは以下の方法について説明しています。
- ベクター地図を利用する方法
対象クラス
対象関数
実装サンプル
こちらをご覧ください。
実装方法
ベクター地図を利用する
- 地図を初期化します
- mapscript.value.MapVectorConditionクラスを生成して、ベクター描画に関する情報を指定します
- setMapVectorCondition()関数(Mapクラス)を用いてベクター地図に切り替えます
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>ベクター地図</title>
<!-- APIの呼び出し -->
<script src="https://{HOST}/{CID}/v2/map_script?host={example.com}&signature={XXXXXXXXX}&request_code={YYYYYYYYY}"></script>
<script>
const center = new mapscript.value.LatLng(35.68081, 139.76779)
// 地図を初期化する関数
function initMap() {
// 地図を初期化
const map = new mapscript.Map('{CID}', {
target: '#map', // 対象のDOM要素またはセレクタ（必須）
center: center, // 中心の緯度経度（必須）
zoomLevel: 15, // ズームレベル（必須）
});
// ベクター描画を利用
map.setMapVectorCondition(new mapscript.value.MapVectorCondition({}));
}
</script>
</head>
<body onload="initMap()">
<!-- 地図を表示する領域の確保 -->
<div id="map" style="height: 500px; width: 500px;"></div>
</body>
</html>