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

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

今回は、GoogleMapsのjavascriptの関数に値を渡してみます。
これができると、javascriptと.netとの値の受け渡しができるようになって、vb.net上でGooglemapを制御することができます。

前回の[Chapter 3]のプログラムに手を加えていきます。

準備

今回も、特に準備するものは、ありません。
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_image13.jpg
デザインイメージ

サンプルコード

[Chapter 3]のコードに書き加えます。

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

Imports System
Imports System.Web
Imports System.Xml
Imports System.Security.Permissions
 
Public Class Form1
 
    Private Sub Form1_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load
        Me.Width = 800
        Me.Height = 600
 
        ToolStripButton1.PerformClick()
 
    End Sub
 
    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
        'mouse移動eventの実装
        'Markerの描画
        txtHtml = txtHtml & "   function moveToPoint(Lat, Lng, strTitle) {" & vbCrLf
        txtHtml = txtHtml & "       var LatLng = new google.maps.LatLng(Lat, Lng);" & vbCrLf
        txtHtml = txtHtml & "       map.setCenter(LatLng);" & vbCrLf
        txtHtml = txtHtml & "       var marker = new google.maps.Marker({" & vbCrLf
        txtHtml = txtHtml & "           position: LatLng," & vbCrLf
        txtHtml = txtHtml & "           title: strTitle," & vbCrLf
        txtHtml = txtHtml & "           map: map" & vbCrLf
        txtHtml = txtHtml & "       });" & vbCrLf
        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
 
    Private Sub ToolStripButton2_Click(sender As System.Object, e As System.EventArgs) Handles ToolStripButton2.Click
        WebBrowser1.Document.InvokeScript("moveToPoint", _
                                          {CDbl(ToolStripTextBox1.Text), _
                                           CDbl(ToolStripTextBox2.Text), _
                                           CStr(ToolStripTextBox3.Text)})
    End Sub
 
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を呼び出します。
  3. javascript側でfunction moveToPointを作成して、処理をプログラムします。
  4. .net側で「ポイント移動」ボタンをクリックした場合の処理をプログラムします。

簡単にjavascriptの関数に.NET側の値に渡すことができました。

プログラムの実行

それでは、実行してみましょう。
プログラムを起動すると地図が表示されます。

「ポイント移動」ボタンをクリックした場合、toolstrip内のtextboxの緯度経度に移動して、マーカーが描画されます。 その際タイトルを入力するとtooltipsでマーカーにmouseoverすると表示されます。
blog.godo-tys.jp_wp-content_gallery_denshikokudo_image14.jpg
指定した緯度経度にmarkerを描画した例

基本的は機能だけをチェックしてみましたが、[Chapter 3] と[Chapter 4]を応用すれば非常におもしろいソフトウェアができあがりますね。

Googlemapはここまでとして、次回は、OpenLayers版を作成してみます。

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

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

今後のブログ記載予定項目

今後は、OpenLayersを使ったvb.netアプリケーションソフトを作成していきます。
basemapは電子国土やGooglemap、基盤地図25000などのwmsを使っていきます。

  1. javascriptと.netの値の受け渡しの実装
  2. mouse eventの実装
  3. shape fileのoverlay(ここが難しそう。。。)
  4. 平面直角座標系から緯度経度変換
  5. rasterのoverlay
  6. sqliteの実装
  7. spatialiteの実装
  8. MapWinGISとの連携

を考えています。

Comments are closed.

Social Widgets powered by AB-WebLog.com.