夜風のMixedReality

xRと出会って変わった人生と出会った技術を書き残すためのGeekなHoloRangerの居場所

Microsoft Map-SDK for Unity その10 任意のピン止めから地図を拡大する。

本日はMicrosoft Map-SDK for Unityの調査枠です。

前回の記事で任意の場所にピン止めを行うことができました。

redhologerbera.hatenablog.com

ここでは九州新幹線の各停車駅にピンが表示されるようにしました。

f:id:Holomoto-Sumire:20201005090825j:plainf:id:Holomoto-Sumire:20201005090638j:plain

今回はこれをベースに手を加えていきます。

〇地図の拡大

Map-SDKの特徴として世界中の地図を見たい拡大率で表示することができます。

この地図の座標に沿って前回ピンを配置しましたが、このピンをジェスチャーで選択することでピンが配置されている地点が拡大されるようにします。

〇ピンの仕組み

ピンは[MapPinProvider]コンポーネントの[Map Pin Prefab]にアタッチしたプレファブの複製として生成されます。

f:id:Holomoto-Sumire:20201005085241j:plain

今回使用しているExampleで提供されている[SmallMapPin]プレファブにはCube,Cylinder,テキストの3つで構成されています。

f:id:Holomoto-Sumire:20201007085859j:plain

親オブジェクトである[SmallMapPin]には[MapPin]コンポーネントがアタッチされており、ここにピンごとの緯度経度などの座標情報が書き込まれます。

f:id:Holomoto-Sumire:20201007091348p:plain

f:id:Holomoto-Sumire:20201007091927j:plain
博多駅に表示されるピンのMapPinコンポーネント

CubeにはMRTKで提供されている[Interactable]コンポーネントがアタッチされています。

f:id:Holomoto-Sumire:20201007090604j:plain

[Interactable]コンポーネントの[theme]に設定されている[theme]によりHandRayが当たると色が変わるようになっています。

f:id:Holomoto-Sumire:20201007090801j:plain

f:id:Holomoto-Sumire:20201007090958j:plain

〇ピンをAirTapするとズームするようにする。

ピンの構造が分かったのでここからAirTapでズームできるようにします。

次のスクリプトを書きました。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Microsoft.Maps;
using Microsoft.Maps.Unity;
using System.Runtime.InteropServices;
using Microsoft.Geospatial;

public class ZoomToMap : MonoBehaviour
{
    [SerializeField]
    MapRenderer MapRenderer;
    [SerializeField]
    MapPin MapPin;
    [SerializeField]
    LatLon latlon;
    [SerializeField]
    float zoomLevel;
    // Start is called before the first frame update
    void Start()
    {

        MapRenderer = GameObject.Find("Map").GetComponent<MapRenderer>();
        MapPin = GetComponent<MapPin>();
        latlon = MapPin.Location;
        
    }
    /// <summary>
    /// ピン止めされた座標をズームします。
    /// </summary>
    public void ZoomToPoint()
    {
        MapRenderer.SetMapScene(new MapSceneOfLocationAndZoomLevel(latlon, MapRenderer.ZoomLevel+1f));
    }
}

①[SmallMapPin]プレファブの親オブジェクト[SmallMapPin]オブジェクトに[ZoomToMap]コンポーネントをアタッチします。

 f:id:Holomoto-Sumire:20201007094711j:plain

 また[ZoomToClusterMapPin]コンポーネントをディアクティブにします。(使用しないので)

②Cubeの[Interactable]コンポーネントの[OnClick()]イベントに[SmallMapPin]オブジェクトの[ZoomToMap]コンポーネント[ZoomToPoint()]を指定します。

f:id:Holomoto-Sumire:20201007094911j:plain

以上で完成しました。

〇Unityで実行

f:id:Holomoto-Sumire:20201007095800g:plain

HandRayを当ててAirTapすることで拡大されるようになりました。

スクリプト解説

スタート関数ではMapを表示させる[MapRenderer]コンポーネントを探し、取得しています。 また、自身のMapPinからLocation(自身の緯度経度)を取得します。

    void Start()
    {
        MapRenderer = GameObject.Find("Map").GetComponent<MapRenderer>();
        MapPin = GetComponent<MapPin>();
        latlon = MapPin.Location;   
    }

AirTapによりMRTKの[Interactable]コンポーネントでZoomToPointが読みこまれます。

    public void ZoomToPoint()
    {
        MapRenderer.SetMapScene(new MapSceneOfLocationAndZoomLevel(latlon, MapRenderer.ZoomLevel+1f));
    }

ここではMapを表示させているMapRendererの座標にピン止めされている座標を代入し、現在の拡大率から+1しています。

MapRenderer.ZoomLevel+1fを変えることで任意の拡大を行うことができます。

以上でピンの座標を拡大することができました。