電子国土地図を使ってみる。[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つです。 いつもながらかんたんですな。
デザインイメージ
サンプルコード
[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
プログラムの説明
プログラムとしては、
-
javascriptから呼び出すExternalGMapObjクラスを作成して、その中でMouseClickとMouseMove subroutineを作成しておきます。
-
「window.external.[VBのパブリックルーチン]」で.NETのpublic subroutineを呼び出します。
-
javascript側でfunction moveToPointを作成して、処理をプログラムします。
-
.net側で「ポイント移動」ボタンをクリックした場合の処理をプログラムします。
簡単にjavascriptの関数に.NET側の値に渡すことができました。
プログラムの実行
それでは、実行してみましょう。
プログラムを起動すると地図が表示されます。
「ポイント移動」ボタンをクリックした場合、toolstrip内のtextboxの緯度経度に移動して、マーカーが描画されます。 その際タイトルを入力するとtooltipsでマーカーにmouseoverすると表示されます。
指定した緯度経度にmarkerを描画した例
基本的は機能だけをチェックしてみましたが、[Chapter 3] と[Chapter 4]を応用すれば非常におもしろいソフトウェアができあがりますね。
Googlemapはここまでとして、次回は、OpenLayers版を作成してみます。
それでは、今日はここまで。
サンプルコードをこちらにアップしておきます。使用する際は自己責任にて使って下さい。
今後のブログ記載予定項目
今後は、OpenLayersを使ったvb.netアプリケーションソフトを作成していきます。
basemapは電子国土やGooglemap、基盤地図25000などのwmsを使っていきます。
-
javascriptと.netの値の受け渡しの実装
-
mouse eventの実装
-
shape fileのoverlay(ここが難しそう。。。)
-
平面直角座標系から緯度経度変換
-
rasterのoverlay
-
sqliteの実装
-
spatialiteの実装
-
MapWinGISとの連携
を考えています。
最近のコメント