はじめに
今回のBing Map App開発では、
第1回目の内容からおさらいすると、
今回は、
プッシュピン
最初に、
プッシュピンを地図上に追加するプラグインのコードは次のようになります。PushpinFactoryContractのCreateStandardPushpinメソッドを使用して、
namespace HelloWorldBingMapApp
{
using System;
using System.Windows.Media;
using Microsoft.Maps.Core;
using Microsoft.Maps.Plugins;
using Microsoft.Maps.Network;
using Microsoft.Maps.MapControl;
public class EmptyLayer : Layer {
public EmptyLayer(PluginToken pluginToken) : base(pluginToken) { }
}
public class EntitySamplePlugin : Plugin
{
private EmptyLayer mainLayer;
[ImportSingle("Microsoft/LayerManagerContract", ImportLoadPolicy.Synchronous)]
public LayerManagerContract LayerManagerContract { get; set; }
[ImportSingle("Microsoft/MapContract", ImportLoadPolicy.Synchronous)]
public MapContract DefaultMap { get; set; }
[ImportSingle("Microsoft/PushpinFactoryContract", ImportLoadPolicy.Synchronous)]
public PushpinFactoryContract PushpinFactoryContract { get; set; }
public override void Initialize()
{
base.Initialize();
this.mainLayer = new EmptyLayer(this.Token);
DefaultMap.MouseClick += new EventHandler<MapMouseEventArgs>(DefaultMap_MouseClick);
}
void DefaultMap_MouseClick(object sender, MapMouseEventArgs e)
{
// クリックした場所からその経緯度を取得
var location = DefaultMap.ViewportPointToLocation(e.ViewportPoint);
// プッシュピンの作成
var pin = PushpinFactoryContract.CreateStandardPushpin(location);
var entity = new Entity();
entity.Primitive = pin; // Entity(pin) でも可
// レイヤーにエンティティを追加
this.mainLayer.Entities.Add(entity);
}
public override void Activate(System.Collections.Generic.IDictionary<string, string> activationParameters)
{
if (LayerManagerContract.ContainsLayer(this.mainLayer))
{
LayerManagerContract.BringToFront(this.mainLayer);
}
else
{
LayerManagerContract.AddLayer(this.mainLayer);
}
}
}
}上記コードでは、
さまざまなプッシュピン
プッシュピンは簡単に見た目の変更も可能です。
Colorプロパティで色の変更
pin.Color = Colors.Purple;
また、
var pin = PushpinFactoryContract.CreateStandardPushpin(location, "あ");
pin.HighlightedState = HighlightedState.Highlighted;
アイコンの表示もできます
System.Windows.UIElement GetPinIcon(Entity entity)
{
// ここでは entity を利用せず、決まった画像の Image オブジェクトを返す。
var bmp = new System.Windows.Media.Imaging.BitmapImage(new Uri("http://example.jp/pinicon.png"));
return new System.Windows.Controls.Image() {Source = bmp};
}var pin = PushpinFactoryContract.CreateStandardPushpin(location, GetPinIcon);
さらに、
CreateMediaPushpinメソッドを使用すると、
var pin = PushpinFactoryContract. CreateMediaPushpin(location, GetPinIcon);
CreateMiniPushpinメソッドを使用すると、
var pin = PushpinFactoryContract. CreateMiniPushpin(location);
クラスタリング
多数のプッシュピンを表示した場合、
このクラスタリングを行うには、
[ImportSingle("Microsoft/EntityClusteringContract", ImportLoadPolicy.Synchronous)]
public EntityClusteringContract EntityClusteringContract { get; set; }そして、
void DefaultMap_MouseClick(object sender, MapMouseEventArgs e)
{
// クリックした場所からその経緯度を取得
var location = DefaultMap.ViewportPointToLocation(e.ViewportPoint);
// プッシュピンの作成
var pin = PushpinFactoryContract.CreateStandardPushpin(location);
var entity = new Entity(pin);
// クラスタリング指定
EntityClusteringContract.Register(entity);
// レイヤーにエンティティを追加
this.mainLayer.Entities.Add(entity);
}こうすると、
ポリライン
次にポリライン
このポリラインもプッシュピンと同様にエンティティのひとつです。プッシュピンではある1点を指すものでしたが、
プッシュピンのようにContractを使用するのではなく、
// 線を引く地点
var location = DefaultMap.ViewportPointToLocation(e.ViewportPoint);
var locations = new LocationCollection();
var lat = location.Latitude;
var lng = location.Longitude;
locations.Add(new Location(lat, lng));
locations.Add(new Location(lat - 0.1, lng + 0.1));
locations.Add(new Location(lat, lng + 0.2));
locations.Add(new Location(lat + 0.1, lng + 0.15));
locations.Add(new Location(lat + 0.1, lng + 0.05));
locations.Add(new Location(lat, lng));
// PolylinePrimitive オブジェクトの作成
var polyline = new PolylinePrimitive(locations, new SolidColorBrush(Colors.Red));
// レイヤーにポリラインの追加
this.mainLayer.Entities.Add(new Entity(polyline));StrokeThicknessプロパティやStrokeDashArrayプロパティを使用すると、
// 太さ
polyline.StrokeThickness = 5;
// 点線
var doubles = new DoubleCollection();
doubles.Add(0.5);
doubles.Add(1);
doubles.Add(0.5);
doubles.Add(1);
polyline.StrokeDashArray = doubles;
ポリゴン
次はポリゴン
ポリラインと同じように直接、
var location = DefaultMap.ViewportPointToLocation(e.ViewportPoint);
var locations = new LocationCollection();
var lat = location.Latitude;
var lng = location.Longitude;
locations.Add(new Location(lat, lng));
locations.Add(new Location(lat - 0.1, lng + 0.1));
locations.Add(new Location(lat, lng + 0.2));
locations.Add(new Location(lat + 0.1, lng + 0.15));
locations.Add(new Location(lat + 0.1, lng + 0.05));
// PolygonPrimitive オブジェクトの作成
var polygon = new PolygonPrimitive(
locations,
new SolidColorBrush(Colors.Green),
new SolidColorBrush(Color.FromArgb(128, 255, 0, 0)));
// レイヤーにポリラインの追加
this.mainLayer.Entities.Add(new Entity(polygon));Brushを変更すればグラデーションや半透明の描画も、
var gss = new GradientStopCollection();
gss.Add(new GradientStop() { Color = Colors.Red, Offset = 0 });
gss.Add(new GradientStop() { Color = Colors.Orange, Offset = 0.2 });
gss.Add(new GradientStop() { Color = Colors.Yellow, Offset = 0.4 });
gss.Add(new GradientStop() { Color = Colors.Green, Offset = 0.6 });
gss.Add(new GradientStop() { Color = Color.FromArgb(255, 0, 0, 0x80), Offset = 0.8 });
gss.Add(new GradientStop() { Color = Colors.Purple, Offset = 1 });
var brush = new LinearGradientBrush(gss, 0);
// PolygonPrimitive オブジェクトの作成
var polygon = new PolygonPrimitive(
locations,
new SolidColorBrush(Colors.Red),
brush);
// レイヤーにポリラインの追加
this.mainLayer.Entities.Add(new Entity(polygon));
ダイアログの表示
最後に、
使い方は、
[ImportSingle("Microsoft/ModalDialogContract", ImportLoadPolicy.Synchronous)]
public ModalDialogContract ModalDialogContract { get; set; }たとえば、
var pin = PushpinFactoryContract.CreateStandardPushpin(location);
var entity = new Entity(pin);
pin.MouseLeftButtonDown += (s, e1) =>
{
ModalDialogContract.Open("タイトル",
new System.Windows.Controls.TextBlock()
{
Text = "メッセージ",
Margin = new System.Windows.Thickness(30)
});
};Openメソッドの引数は、
おわりに
今回はここまでです。いかがでしたでしょうか。地図系アプリの基本的な機能とも言える、
今回の内容を、
このように似たソリューションでも違いがあり、