あけましておめでとうございます。今年もよろしくお願いいたします。
昨年12月は放置していた
pgRoutingの復習をしていました。他にもあった試したいことはあったのですが、越年…。越年したことの一つにSilverlight2とGoogleEarthAPIとの連携があります。(Xamlの作成ツールであるExpression BlendのSilverlight2対応のサービスパックのダウンロードすらしていませんでした。)
というわけで、お正月はSilverlight2とJavaScriptのお勉強です。
GoogleEarthAPIを利用する際には、
リファレンスやサンプルを見ながらHTMLへ(あるいは別に.jsファイルへ)javascriptを書きます。
SilverlightとGoogleEarthAPIを連携させるには、JavaScriptをSilverlightから呼び出す必要があります。
これを実現するのに使用するのがInvokeです。
まずは、JavaScriptです。(一部)
getlatlon関数というのを書いていますが、これで中心の緯度経度を取得します。内容については後述します。
google.load("earth", "1");
var ge = null;
function init() {
google.earth.createInstance("map3d", initCB, failureCB);
}
function initCB(object) {
ge = object;
ge.getWindow().setVisibility(true);
}
function failureCB(object) {
alert('load failed');
}
function getlatlon(){
var latlon = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
var lat = latlon.getLatitude();
var lon = latlon.getLongitude();
var silverlight = document.getElementById("SEarth");
silverlight.content.findName("coordinates").Text = lat + "," + lon;
}
次にSilverlight(C#)のコードです。Xamlで作ったボタンをClickしたときに下記のコードを実行するようにしています。
private void getlatlon(object sender, RoutedEventArgs e)
{
HtmlPage.Window.Invoke("getlatlon");
}
Silverlightのコードで、Invokeを使用してJavaScriptで定義したgetlatlonを呼び出すことが出来ます。(もちろん引数も渡せます。)
その後、JavaScriptで得た値をSilverlight側で使うことになるのですが、今回はサンプルコードということで、JavaScriptから直接Xamlに値を挿入してみました。
silverlight.content.findName("coordinates").Text = lat + "," + lon;
これはgetlatlonの一部ですが、coordinatesという名前のついたテキストボックス(Xaml内にあります)に直接値を入力しています。
というわけで、SilverlightでJavaScriptを使用するには、
■HtmlPage.Window.Invokeを使う
■silverlight.content.findName("*********")という選択肢もある
といったところです。今回の
超テキトーなサンプルはこちらです。