Bing Maps Controlから Windows Phone 7を楽しもう！

Silverlightを囲む会 in 大阪#16 CH3COOH(酢酸)

CH3COOH（酢酸）

大阪で働く 雑食系プログラマ

デバドラからアプリ、業務系バッチまで

最近は、ずっとiPhoneアプリ開発中心

ブログ http://d.hatena.ne.jp/ch3cooh393/

サイト http://ch3cooh.jp/

自己紹介

VS2010で Bing Maps をぽとぺた

Bing Maps Controlの基本的な機能

実機で Bing Maps をみてみましょう

デバイスとBing Maps Controlの連携

タスクとBing Maps Controlの連携

おまけ

本日のアジェンダ

Bing Maps Controlを 使ってみよう

ToolBoxからMapを選んで デザイナに貼り付けて、実行するだけ

VS2010からBing Mapを使う

Bing Maps Controlの 基本的な機能

標準コントロールとして提供されている

ピンチイン・アウトによるズームや、パンによるスクロールなど基本的な地図としての機能を持つ

Bing Maps Silverlight Control for Windows Phone

Modeプロパティの設定に、『Road』を設定

地図の表示モード 地図表示

Modeプロパティの設定に、『Aerial』を設定

地図の表示モード 航空写真表示

Modeプロパティの設

定に、『AerialWithLabels』を設定

地図の表示モード 航空写真+ラベル表示

プッシュピンを刺すのには、PushPinクラスを使う

PushPinクラスを継承

することで、任意の表示のピンが作れる

PushPin

地図上に線を引くには、MapPolylineクラスを使う

Polygonを使うと、矩形

を描画することが出来ます

Polyline と Polygon

地図上に画像を置くには、MapLayerを用意します

ImageLayerの上にImageを置き、地図に設定するだけ

Layer

GPSと地図を連携させる

GPSから位置情報を取得して、プッシュピンを立ててみましょう

GPSを使って位置測位するための準備

System.Device.dllを参照して、System.Device.Location名前空間のGeoCoordinateWatcherクラスを使う

GPSと地図の連携

GeoCoordinateWatcher watcher; // GeoCoordinateWatcherの初期化を行う watcher = new GeoCoordinateWatcher ( GeoPositionAccuracy.High ); // 位置変更イベントのイベントハンドラを追加 // watcher_PositionChanged watcher.PositionChanged += 省略 // データの取得を開始する watcher.Start();

位置情報を取得する

コントロールへの操作はメインスレッドで行う必要がある

イベントハンドラでは、メインスレッドへDispatchして処理をデリゲートします

Deployment.Current.Dispatcher.BeginInvoke(() => MyPositionChanged(e));

位置情報の通知を受け取る

// 位置情報を取得する GeoCoordinate co = watcher.Position.Location; // プッシュピンを作る var pin = new Pushpin() { Location = co }; map1.Children.Add(pin); // 位置測位を終了 watcher.Stop();

位置情報をもとにピンを刺す

PhotoChooserTaskと地図を 連携させる

地図上に写真を配置していくにはどうしよう？

写真を取得する

写真を地図上に配置する

Bing Maps上に画像を配置

アプリからファイルシステムにアクセスする方法が提供されていません

Microsoft.Phone.Tasks名前空間にある「Launcher」と「Chooser」を通す

静止画像の選択にはPhotoChooserTaskを使う

どうやって画像を取得しよう？

Microsoft.Phone.Tasks名前空間に各タスクは扱い方がほぼ一緒で使いやすい

var task = new PhotoChooserTask(); // タスクが完了すると、イベントハンドラが呼び出される

task.Completed += (sx, ex) => ｛省略｝task.Show();

PhotoChooserTask

// 取得できていれば、Imageに設定

var bmp = new BitmapImage(); bmp.SetSource(ex.ChosenPhoto); // Imageの表示時の設定 var image = new Image() { Source = bmp }; var imageLayer = new MapLayer(); var position = PositionOrigin.BottomLeft; // 画像レイヤーにUIElement(Image)を追加 imageLayer.AddChild(image, map1.Center, position); // 地図に画像レイヤーを追加します map1.Children.Add(imageLayer);

アルバムの中から写真の 選択結果を受け取る

Bing Maps Controlに 足りないものを足してみる

大人の事情のせいか、 日本の地図はかなり残念

このままでは、WP7

が、日本で受け入れてもらえない！！

Bing Map Controlの 地図はかなり残念・・・

大阪駅付近の詳細地図

地図と言えばGoogle Mapでしょ？

良いところ取りしちゃいましょう

WP7にはGoogle Mapのコントロールが無い だったら、Bing Maps Controlを使おう

Bing Map for WP7の地図が残念 だったら、Google Mapのタイルを使おう

Google Maps on Bing Maps Control

Bing Mapsでは、最大ズーム時で 1,073,741,824ピクセルｘ1,073,741,824ピクセル

の超高画質の地図を使っているみたい

このBing Maps Controlでは、『Deep Zoom』と呼ばれる技術が使われています

どうやって作る？

超高画質の画像を256ピクセルｘ256ピクセルのような小さな単位（タイル）にします

表示に必要な部分だけのタイルを読み込んで、操作をスムーズにします

Deep Zoomとは

地図をズームレベルに応じて、範囲を狭く、そして詳細に

細かく分割されたタイル

より詳細に

タイルの単位は 256 x 256

Google Mapsのタイルの大きさは、

256 x 256

Bing Mapsのタイルの大きさも、

256 x 256

あとは、お察しの通り。。。

Bing Maps Controlは、表示したい位置座

標を元にして、タイルが格納されているサーバーからDLしてる

このタイル画像のURLを、生成しているメソッドをオーバーライドすれば、Google Mapsのタイル画像が使える！

具体的にどうやって作るの？

Microsoft.Phone.Controls.Maps名前空間のTileSourceクラスの以下のメソッド

Uri GetUri(int x, int y, int zoomLevel)

http://mt{server}.google.com/vt/lyrs={type}&x={x値}&y={y値}&z={zoom-level}

GetUriメソッドでURLを作ってる

実際にアプリの動きをみてみましょう

Google Map on Bing Map Control デモ

実行結果

Google Mapのライセンス的にNGなような気

がしますが、容量・用法を守って正しくお使いください

ご使用上の注意

Bing Maps Silverlight Control for Windows Phone

http://msdn.microsoft.com/en-us/library/ff941096%28v=VS.92%29.aspx

How to: Use the Bing Maps Silverlight Control for Windows Phone

http://msdn.microsoft.com/en-us/library/ff941093%28v=VS.92%29.aspx

Working with Pushpins in the Map Control

http://msdn.microsoft.com/en-us/library/gg588383%28v=VS.92%29.aspx

Differences Between Silverlight and Silverlight for Windows Phone

http://msdn.microsoft.com/en-us/library/ff426930%28VS.95%29.aspx

本セッションの補足資料

スマートフォン勉強会は、関西と関東で開催しています 過去には、会津や九州でも開催しました

2/19 Windows Phone 7 ブーストアップ

2/26 スマートフォン勉強会＠関東＃11

3/26 スマートフォン勉強会＠関西＃14

スマートフォン勉強会の告知

ご清聴ありがとうございました