質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.36%

風向のチャートのコンパスをGPSで動かしたいです。

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 2,824

score 16

いつもありがとうございます。

今、Anychart.jsを利用して、風向の画面を作っています。サンプルを利用して、画面は出来たのですが、更に、GPSを取得してコンパスを動かす事は可能でしょうか?アドバイスいただければと思い投稿しました。どうぞよろしくお願いします。
イメージ説明 

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
     <script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>

        <title>Weather Dashboard</title>
        <style>
         html, body, #container {
             width: 100%;
             height: 100%;
             margin: 0;
             padding: 0;
         }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script type="text/javascript">

anychart.onDocumentReady(function() {
    // Create table to place gauges and information
    layoutTable = anychart.standalones.table(4, 3);
    layoutTable.hAlign('center')
            .vAlign('middle')
            .useHtml(true)
            .fontSize(16)
            .cellBorder(null);

    // Set height and width for some cols and rows for layout table
    layoutTable.getCol(2).width('50%');
    layoutTable.getRow(0)
            .height(60)
            .fontSize(18);
    layoutTable.getRow(1).height(60);
    layoutTable.getRow(3)
            .height(60)
            .fontSize(14)
            .vAlign('top');

    // Merge cells in layout table where needed
    layoutTable.getCell(0, 0).colSpan(3);
    layoutTable.getCell(1, 0).colSpan(2)
            .fontColor('#212121')
            .fontWeight(600);
        layoutTable.getCell(2, 0).colSpan(3)

    // Put data and charts into the layout table
    layoutTable.contents([
        ['The Weather<br/><span style="color:#1976d2; font-size: 16px; font-weight: 300">' +
        anychart.format.dateTime(new Date(), 'dd MMMM yyyy') + '</span>', null, null],
        [null, null, null],
        [drawCircularGauge(305, 6), null, null],
        [null, null, null]
    ]);

    // Set container id and initiate drawing
    layoutTable.container('container');
    layoutTable.draw();



    // Helper function to create circular gauge
    function drawCircularGauge(direction, force) {
        var gauge = anychart.gauges.circular();
        gauge.fill('white')
                .margin(30)
                .stroke(null)
                .tooltip(false);
        gauge.data([direction]);

        gauge.axis().scale()
                .minimum(0)
                .maximum(360)
                .ticks({interval: 45})
                .minorTicks({interval: 45});
        gauge.axis()
                .startAngle(0)
                .fill('#CECECE')
                .width(2)
                .radius(100)
                .sweepAngle(360);
        gauge.axis().ticks()
                .enabled(true)
                .length(20)
                .stroke('2 #CECECE')
                .position('in')
                .type(function(path, x, y, radius) {
                    path.moveTo(x, y - radius / 2).lineTo(x, y + radius / 2).close();
                    return path;
                });

        gauge.axis().labels()
                .fontSize(20)
                .position('outside')
                .format(function() {
                    if (this.value == 0) return 'N';
                    if (this.value == 45) return 'ne';
                    if (this.value == 90) return 'E';
                    if (this.value == 135) return 'se';
                    if (this.value == 180) return 'S';
                    if (this.value == 225) return 'sw';
                    if (this.value == 270) return 'W';
                    if (this.value == 315) return 'nw';
                    else return this.value;
                });

        gauge.needle()
                .fill('#64b5f6')
                .stroke('#64b5f6')
                .startRadius('45%')
                .middleRadius('5%')
                .endRadius('-85%')
                .startWidth('0%')
                .endWidth('0%')
                .middleWidth('20%');

        gauge.cap()
                .radius('30%')
                .enabled(true)
                .fill('#fff')
                .stroke('#CECECE');

        gauge.label()
                .hAlign('center')
                .anchor('center')
                .text(
                '<span style="color: #212121; font-weight: 600">' + direction + '</span>\u00B0<br>' +
                '<span style="color: #212121; font-weight: 600">' + force + '</span> m/s').useHtml(true);

        return gauge
    }
});

        </script>
    </body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • vanille

    2017/05/19 11:57

    ozwkさん、ありがとうございます。そうです。Nを合わせたいということでした。説明が下手ですみませんでした。どうぞよろしくお願いします。

    キャンセル

  • ozwk

    2017/05/19 11:59

    ちなみに何が何でもGPSじゃなきゃダメなんですか?

    キャンセル

  • vanille

    2017/05/19 13:11

    ozwkさん、ありがとうございます。GPSも含めて位置情報についてはわかっていません。なにか良い方法がありましたら、アドバイスいただけますよう、よろしくお願いします。

    キャンセル

回答 2

+1

質問の内容からして
スマホかタブレットで端末の画面上向きの方位角を取りたいと言う話だと思います。

普通のGPSで方位角は取れないので
地磁気センサと加速度センサで取ることになります。

もし万が一GPSでないといけない場合は
GPSコンパスを付けてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/19 16:53

    ozwkさん、ありがとうございます。大変参考になります。私のレベルでは難しいので、この方向で社内で聞きながらやってみます。またどうぞよろしくお願いします。

    キャンセル

  • 2017/05/19 17:00

    横からですが、ちょっと触った感じですと、webkitCompassHeadingはデバイスの向きを示していると思います。あれはGPSの値を返すわけではないみたいです。

    キャンセル

checkベストアンサー

0

方角の取得ならいくつか情報がありますが、実際に実機で試してみないと動くかわかりません。

【デバイスの方向の検出 - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Detecting_device_orientation

【デバイスの傾き、方角、加速度を取得できる「Device Orientation Event」 – AnTytle】
http://www.antytle.com/js/device-orientation-event

【一部端末で方角がwebkitCompassHeadingで取得できなくなっている?ので実装した[iOS,Android] - Qiita】
http://qiita.com/umi_kappa/items/38499c03792b2aac49ad

【JavaScriptで位置情報を取得する方法(Geolocation API)】
https://syncer.jp/how-to-use-geolocation-api

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/19 10:07

    kei344さんいつもありがとうございます。大変助かります。何通りか作成して、担当者に現場で試してもらいたいと思います。またどうぞよろしくお願いします。

    キャンセル

  • 2017/05/19 19:25

    すみません、提示した中では「Geolocation API」以外は方角に関係なく単に「デバイスの向き」を取るだけのようです。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る