Konyで地図を回転させる方法 #Quantum

はじめに

Konyでは地図表示をしたい場合には、Mapウィジェットを使えば簡単に表示することが出来ます。

ただ配置しただけでは常に北が上となっているため、実際に地図を見て移動をしている時には自分が向いている方向に地図が回転してほしいと思うことがあるかと思います。
今回は地図を回転させる方法をご紹介します。

実装方法

地図を回転させる

setBoundsのorientationを使うことで、地図を回転することが出来ます。注意点としては、getBoundsで取得したboundsオブジェクトをそのままセットするとエラーになってしまいます。どうやらbounds.centerのlat,lon（緯度経度）がnumberで取得となるのですが、セットする際にはStringである必要があるとのことで、型変換をしてから設定するようにしています。

FirstPageController.js

    // 回転ボタン押下時
    onClickButtonChangeOrientation:function(){
      var bounds = this.view.MapContainer.getBounds();
      bounds.center = {
        "lat":String(bounds.center.lat),
        "lon":String(bounds.center.lon)
      };
      bounds.orientation = 90;
      this.view.MapContainer.setBounds(bounds);
    },

Formに回転ボタンを配置し、

ボタン押下時に「onClickButtonChangeOrientation」を呼び出すように設定しました。

実行すると、初期表示時には北が上でしたが、

回転ボタンを押下すると、東が上になることが確認できました。

自分が向いている方向に地図を回転させる

自分が向いている方向（北を0度とした場合の方角位）は、kony.location.watchPositionを用いて取得します。引数からcoords.headingに自分が向いている方向が取得出来るので、その値を地図のorientationに設定すれば、地図も自分が向いている方向に回転することが出来ます。

FirstPageController.js

    // 自動回転ボタン押下時 
    onClickButtonAutoChangeOrientation:function(){
      if(!isStartAutoRotation){
        var options = {};
        // キャッシュ情報を使う期間（ミリ秒）
        options.maximumAge = 500; 
        // 位置情報を更新するまでの最小時間（ミリ秒）
        options.minimumTime = 500;
        // 位置情報を更新するまでの最小距離
        options.minimumDistance = 2; 
        // バックグラウンドプロセスでも位置情報を更新するか
        options.requireBackgroundAccess  = true; 
        // 位置情報が更新された場合に地図を回転するように監視プロセスを作成する
        watchId = kony.location.watchPosition(function(position){
          // 位置情報が更新された場合に地図を回転
          // position.coords.headingに北を0度とする方角位が取得できる＝自分が向いている方向
          this.changeMapOrientation(position.coords.heading);
          this.view.LabelLogger.text = 'position:' + JSON.stringify(position.coords);
        }.bind(this), function(error){
          // 位置情報取得に失敗した場合
          this.view.LabelLogger.text = error.message;
        }.bind(this), options);

        this.view.ButtonAutoChangeOrientation.text="自動回転 ON";
      }else{
        // ボタン再押下で位置情報監視プロセスを削除
        kony.location.clearWatch(watchId);
        this.view.ButtonAutoChangeOrientation.text="自動回転 OFF";
      }
      isStartAutoRotation = !isStartAutoRotation;
    },
    // 地図の回転を設定する
    changeMapOrientation:function(orientation){
      var bounds = this.view.MapContainer.getBounds();
      bounds.center = {
        "lat":String(bounds.center.lat),
        "lon":String(bounds.center.lon)
      };
      bounds.zoom=13;  
      bounds.orientation = orientation;
      this.view.MapContainer.setBounds(bounds);
    }

Formに自動回転ボタンを配置し、

ボタン押下時に「onClickButtonAutoChangeOrientation」を呼び出すように設定しました。

「isStartAutoRotation」「watchId」はグローバル変数として設定しています。

実際に動かしてみた結果がこちらです。

pic.twitter.com/ewmvsCh95t
— Kony (@Kony12763790) April 13, 2021

最終的なFormControllerのソースコードは以下の通りになります。

FirstPageController.js

define({ 
    // 初期表示時のマップ設定
    init:function(){
      this.view.MapContainer.locationData = [{
        "lat": "35.6809591",
        "lon": "139.7673068",
        "name": "東京駅",
        "desc": "東京駅"
      }];
      this.view.MapContainer.zoomLevel=14;
    },
    // 回転ボタン押下時
    onClickButtonChangeOrientation:function(){
      var bounds = this.view.MapContainer.getBounds();
      bounds.center = {
        "lat":String(bounds.center.lat),
        "lon":String(bounds.center.lon)
      };
      bounds.orientation = 90;
      this.view.MapContainer.setBounds(bounds);
    }, 
    // 自動回転ボタン押下時 
    onClickButtonAutoChangeOrientation:function(){
      if(!isStartAutoRotation){
        var options = {};
        // キャッシュ情報を使う期間（ミリ秒）
        options.maximumAge = 500; 
        // 位置情報を更新するまでの最小時間（ミリ秒）
        options.minimumTime = 500;
        // 位置情報を更新するまでの最小距離
        options.minimumDistance = 2; 
        // バックグラウンドプロセスでも位置情報を更新するか
        options.requireBackgroundAccess  = true; 
        // 位置情報が更新された場合に地図を回転するように監視プロセスを作成する
        watchId = kony.location.watchPosition(function(position){
          // 位置情報が更新された場合に地図を回転
          // position.coords.headingに北を0度とする方角位が取得できる＝自分が向いている方向
          this.changeMapOrientation(position.coords.heading);
          this.view.LabelLogger.text = 'position:' + JSON.stringify(position.coords);
        }.bind(this), function(error){
          // 位置情報取得に失敗した場合
          this.view.LabelLogger.text = error.message;
        }.bind(this), options);

        this.view.ButtonAutoChangeOrientation.text="自動回転 ON";
      }else{
        // ボタン再押下で位置情報監視プロセスを削除
        kony.location.clearWatch(watchId);
        this.view.ButtonAutoChangeOrientation.text="自動回転 OFF";
      }
      isStartAutoRotation = !isStartAutoRotation;
    },
    // 地図の回転を設定する
    changeMapOrientation:function(orientation){
      var bounds = this.view.MapContainer.getBounds();
      bounds.center = {
        "lat":String(bounds.center.lat),
        "lon":String(bounds.center.lon)
      };
      bounds.zoom=13;
      bounds.orientation = orientation;
      this.view.MapContainer.setBounds(bounds);
    }
 });

まとめ

Mapウィジェットを使った地図の回転方法についてご紹介をしました。
面白いので、ぜひ使ってみてください。

参考

https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Content/Map.htm
https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/kony.location_functions.htm

Konyで地図を回転させる方法

目次

はじめに

実装方法

地図を回転させる

自分が向いている方向に地図を回転させる

まとめ

参考