.NETで電子国土地図を使ってみる。[Chapter 3]

電子国土地図を使ってみる。[Chapter 3]

今回は、GoogleMapsの緯度経度を.NETに値を渡してみます。
これができると、javascriptを.netから制御できるようになりますね。

何をどうしてよいのかわからなかったので、グーグル先生に聞いてみました。
すると、あるんですね。
今回のブログを書くにあたって参考にさせてもらったURLです。
http://www.geocities.jp/i_love_balard/myhome/ajax/javascript_vb.html
http://crimsonpork.blog7.fc2.com/blog-entry-91.html
http://www.weblio.jp/content/WebBrowser.ObjectForScripting+%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3

いや~、同じようなことを考えている方がいるもんですな。 先人に感謝します。

そんなわけで、webbrowserの.net controlについては、各人調べて勉強してください。
とりあえずは、簡単なサンプルを作成してみました。

準備

今回も、特に準備するものは、ありません。
Visual Basic 2010を使います。(たぶんvb.net2008でも大丈夫でしょう。)
vb.net上で作成した理由は、デスクトップGISとの連携や.net Frameworkでhtmlやxmlを利用したいと考えているからです。

vb.netのデザイン

まずは、vb.netを起動して、適当なプロジェクト名で新規作成します。
使用するコントロールは、Toolstrip,StatusStrip,WebBrowserの3つです。 いつもながらかんたんですな。
blog.godo-tys.jp_wp-content_gallery_denshikokudo_image10.jpg
デザインイメージ

サンプルコード

参考にするプログラムは、超簡単なWebBrowser上にGoogleMapを表示して緯度経度を取得して、vb.netに渡すというのコードです。

短いので、一気にいきます。
コードはこんな感じです。

Imports System
Imports System.Web
Imports System.Xml
Imports System.Security.Permissions
 
Public Class Form1
 
    Private Sub ToolStripButton1_Click(sender As System.Object, e As System.EventArgs) Handles ToolStripButton1.Click
        'ObjectForScripting WebBrowserコントロールに表示される
        '                    Webページ内のスクリプトコードからアクセスできるオブジェクトを
        '                    取得または設定します。
 
        WebBrowser1.ObjectForScripting = New ExternalGMapObj 'クラスのインスタンスを渡す
 
        Dim lat As String = ToolStripTextBox1.Text
        Dim lng As String = ToolStripTextBox2.Text
 
        WebBrowser1.DocumentText = htmlDoc(lat, lng)
 
    End Sub
 
    Private Function htmlDoc(ByVal Lat As Double, ByVal Lng As Double) As String
        'HTMLドキュメント GoogleMapなどjavascriptを読み込んだものでもよい。
        '当然、PG外部の任意のURLをWebBrowserに表示させてもよい。
        'ポイントは
        '「window.external.[VBのパブリックルーチン]」
        'という形で、javascritから.NETアプリケーションにパラメータ・値を投げられることだと思う。
        '.NETからDOMの操作はできると想像がつくが、これでその逆もできることになる。
 
        Dim txtHtml As String = ""
 
        txtHtml = txtHtml & "<html>" & vbCrLf
        txtHtml = txtHtml & "<head>" & vbCrLf
        txtHtml = txtHtml & "<script type=""text/javascript"" src=""http://maps.google.com/maps/api/js?v=3.9&sensor=false""></script>" & vbCrLf
        txtHtml = txtHtml & "<script type=""text/javascript"">" & vbCrLf
        txtHtml = txtHtml & "   var map;" & vbCrLf
        txtHtml = txtHtml & "   function init() {" & vbCrLf
        txtHtml = txtHtml & "       var latlng = new google.maps.LatLng(" & Lat.ToString & "," & Lng.ToString & ");" & vbCrLf
        txtHtml = txtHtml & "       var myOptions = {" & vbCrLf
        txtHtml = txtHtml & "           zoom: 15," & vbCrLf
        txtHtml = txtHtml & "           center: latlng," & vbCrLf
        txtHtml = txtHtml & "           mapTypeId: google.maps.MapTypeId.ROADMAP," & vbCrLf
        txtHtml = txtHtml & "           overviewMapControl:true," & vbCrLf
        txtHtml = txtHtml & "           scaleControl: true" & vbCrLf
        txtHtml = txtHtml & "       };" & vbCrLf
        txtHtml = txtHtml & "       map = new google.maps.Map(document.getElementById(""map_canvas""), myOptions);" & vbCrLf
        txtHtml = txtHtml & "       google.maps.event.addListener(map, 'click', function(event) {" & vbCrLf
        txtHtml = txtHtml & "           mouseClick(event.latLng);" & vbCrLf
        txtHtml = txtHtml & "       });" & vbCrLf
        txtHtml = txtHtml & "       google.maps.event.addListener(map, 'mousemove', function (event) {"
        txtHtml = txtHtml & "           mousemove(event.latLng);" & vbCrLf
        txtHtml = txtHtml & "       });" & vbCrLf
        txtHtml = txtHtml & "   }" & vbCrLf
        'mouse clieck event実装
        txtHtml = txtHtml & "   function mouseClick(location) {" & vbCrLf
        txtHtml = txtHtml & "       window.external.MouseClick(location.lat(), location.lng());"
        txtHtml = txtHtml & "   }" & vbCrLf
        'mouse move evet実装
        txtHtml = txtHtml & "   function mousemove(location) {" & vbCrLf
        txtHtml = txtHtml & "       window.external.MouseMove(location.lat(), location.lng());"
        txtHtml = txtHtml & "   }" & vbCrLf
        txtHtml = txtHtml & "</script>" & vbCrLf
        txtHtml = txtHtml & "</head>" & vbCrLf
        txtHtml = txtHtml & "<body onload=""init();"">" & vbCrLf
        txtHtml = txtHtml & "   <div id=""map_canvas"" style=""width:100%; height:100%""></div>" & vbCrLf
        txtHtml = txtHtml & "</body>" & vbCrLf
        txtHtml = txtHtml & "</html>" & vbCrLf
 
        htmlDoc = txtHtml
 
    End Function
 
End Class
 
'PermissionSet 複数の異なる種類のアクセス許可を格納できるコレクションを表します。by MSDN
'SecurityAction.Demand  コールスタック内の上位にあるすべての呼び出し元に、
'   現在のインスタンスによって指定されているアクセス許可が与えられていない場合は、
'   実行時に強制的にSecurityExceptionを呼び出します。by MSDN
'Name:="FullTrust" システムへのフルアクセス 
'   参考http://www.atmarkit.co.jp/fdotnet/technology/idnfw11_08/idnfw11_08_02.html
'   ちなみにこれを書かなくても動く。MSのサンプルにはついている。
 
'ComVisibleAttribute 個々のマネージ型またはマネージメンバ、
'   またはアセンブリ内のすべての型のCOM参照可能範囲を制御します。by MSDN
'   これは、マネージ型がCOMから参照できることを示します。 by MSDN
 
<PermissionSet(SecurityAction.Demand, Name:="FullTrust")> _
<System.Runtime.InteropServices.ComVisibleAttribute(True)> _
Public Class ExternalGMapObj
    Public Sub MouseClick(ByVal lat As Double, ByVal lng As Double)
        MsgBox("Googlemap" & vbCrLf & _
                        "緯度:" & Format(lat, "###.######").ToString & vbCrLf & _
                        "経度:" & Format(lng, "###.######").ToString, MsgBoxStyle.OkOnly, _
                        "Googlemapから取得")
        'Form1.ToolStripStatusLabel2.Text = Format(lat, "###.######").ToString
        'Form1.ToolStripStatusLabel4.Text = Format(lng, "###.######").ToString
 
    End Sub
 
    Public Sub MouseMove(ByVal lat As Double, ByVal lng As Double)
        'MsgBox("Googlemap" & vbCrLf & _
        '                "緯度:" & lat.ToString & vbCrLf & _
        '                "経度:" & lng.ToString, MsgBoxStyle.OkOnly, "Javascriptから取得")
        Form1.ToolStripStatusLabel2.Text = Format(lat, "###.######").ToString
        Form1.ToolStripStatusLabel4.Text = Format(lng, "###.######").ToString
 
    End Sub
End Class

プログラムの説明

プログラムとしては、

  1. javascriptから呼び出すExternalGMapObjクラスを作成して、その中でMouseClickとMouseMove subroutineを作成しておきます。
  2. 「window.external.[VBのパブリックルーチン]」で.NETのpublic subroutineを呼び出します。

簡単にjavascriptの値を.NETに渡すことができました。これができるとjavascriptの値を用いて、.NET側でいろいろと処理することができますね。

プログラムの実行

それでは、実行してみましょう。
javascriptをクリックすると地図が表示されます。
Googlemap上でmouse moveすると、Stastubarの緯度経度が変化します。
blog.godo-tys.jp_wp-content_gallery_denshikokudo_image11.jpg
mouse moveしている状態

Googlemap上でmouse clickすると、msgboxが表示され、クリックした場所の緯度経度がmsgboxに表示されます。
blog.godo-tys.jp_wp-content_gallery_denshikokudo_image12.jpg
mouse clickしてmsgboxが表示された状態

次回は、.NETの値をjavascriptへ渡して処理する方法を考えてみましょう。

それでは、今日はここまで。

サンプルコードをこちらにアップしておきます。使用する際は自己責任にて使って下さい。 

参考にしたHP
先人に感謝します。
http://www.geocities.jp/i_love_balard/myhome/ajax/javascript_vb.html
http://crimsonpork.blog7.fc2.com/blog-entry-91.html
http://www.weblio.jp/content/WebBrowser.ObjectForScripting+%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

WP-SpamFree by Pole Position Marketing

Social Widgets powered by AB-WebLog.com.