さくらのIoT Platform α版 準備編その2

Home > IoT > さくらのIoTプラットフォームα版 > さくらのIoT Platform α版 準備編その2
すき 0
うんこ 0

第二弾。こちらの記事の続きです。

今回、まず準備段階としてやりたいのは、下記の三点です。

  1. GPSのログから地図に経路の表示
  2. アイコン表示
  3. 公開用に地図を非表示にする

1. GPSのログから地図に経路の表示

OpenStreetMap & OpenLayers3

地図は家族内のみで確認したいので、非公開サイトでも使える地図を・・・ということで、 OpenStreetMap & OpenLayers3 を使わせていただく事にしました(※GoogleMapAPIやYahooMapAPIは、非公開サイトでの使用は有償版のみでした。)

札幌中心部の地図を表示

 

バッチリです。これがオープンソースとはなんともありがたい限りです。

HMTLのheader

必須なのはjsとcssです。ソースは直接でもDLして自分のサイトに上げても良いようです。ひとまずは直接リンクさせて頂いています。ヘッダは基本的にはこれだけでOKです。

HTMのbody

ここで色々、レイヤーを重ねたり設定を追加していきます。

ログ経路表示

肝心の経路表示は、こちらのサイト様を参考にさせて頂きました。ありがたや・・・!

2. 家、学校、児童館にアイコン表示

公式の OpenLayers 3 Examples を参考にさせて頂きました。

通常の緯度経度で設定するには ol.proj.fromLonLat([経度, 緯度])  で指定する必要がありました。

3. 公開用に地図を非表示にする

地図の透明度を追加。

またまたMatsup’s blog様を参考にさせて頂きました。日本語情報が少ないなか大変ありがたいです。

その他の設定

マウスホイールでのズームを解除する処理を追加しました。

参考にさせていただきました。
OpenLayers 3 Disable Mouse Wheel on Zoom

 icon-map-marker 完成した地図とソースコード

地図

 

map

公開用では、地図の透明度を0にしてアイコンと経路だけが表示されるようにします。画像の取得は、地図上で通常の画像同様に「名前を付けて画像を保存…」が出来ました。

ピンクの線はお父ちゃんが歩きまわったログの経路です。起動直後はちょっと不安定?とかで若干正確じゃないデータが入っているそうですが。

ソースコード

やっとできたー!GPSやら地図のことやらわからないことだらけなので何日もかかりました。

さて、これからどうするか・・・!

近々やっとモジュールも届くそうなので楽しみです。

コメントはこちらから

メールアドレスが公開されることはありません。コメントのみでもOKです。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください