Category Archives: Openlayers - Page 99

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

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

今回は、GoogleMaps APIを使って電子国土地図を表示してみます。

ここでは、数回にわけて、電子国土地図vb.netOpenLayersGoogleMapsを使って地図ソフトを作成していきます。 

Ver4.0になった電子国土地図をvb.net上でGoogleMapに表示してみましょう。

GoogleMapは無償利用の場合ライセンス上、特定のソフトウェアに組み込む事ができません。したがって、あくまでもサンプルとして使用してください。 どうしてもGoogleMapを自前のソフトウェアに組み込みたい方は有償ライセンスを購入してください。

WEB上で不特定多数に公開して利用する場合は大丈夫のようです。詳しくはhttp://googlemap.googlermania.comやグーグル先生に聞いてみてください。

ライセンスのことなどを考慮すると、今後はOpenLayersで開発して行くことになると思います。

準備

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

vb.netのデザイン

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

サンプルコード

参考にするプログラムは、前回のOpenLayersのコードを使いながらの、GoogleMapsのコードをつかいながらの作成します。

コードはこんな感じです。

Private Sub Form1_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load
        Me.Width = 800
        Me.Height = 600
    End Sub
 
 
    Private Sub ToolStripButton1_Click(sender As System.Object, e As System.EventArgs) Handles ToolStripButton1.Click
 
        'GoogleMap表示
        Dim lat As String = ToolStripTextBox1.Text
        Dim lng As String = ToolStripTextBox2.Text
 
        WebBrowser1.DocumentText = GoogleMap(Double.Parse(lat), Double.Parse(lng))
 
 
    End Sub
 
 
    Private Sub ToolStripButton2_Click(sender As System.Object, e As System.EventArgs) Handles ToolStripButton2.Click
        'GoogleMap表示
        Dim lat As String = ToolStripTextBox1.Text
        Dim lng As String = ToolStripTextBox2.Text
 
        WebBrowser1.DocumentText = KokudoGooglemap(Double.Parse(lat), Double.Parse(lng))
 
 
    End Sub
 
 
    Private Sub ToolStripButton4_Click(sender As System.Object, e As System.EventArgs) Handles ToolStripButton4.Click
        'オルソ画像表示
        Dim lat As String = ToolStripTextBox1.Text
        Dim lng As String = ToolStripTextBox2.Text
 
        WebBrowser1.DocumentText = kokudoGoogleOverlay(Double.Parse(lat), Double.Parse(lng))
 
    End Sub
 
 
    Private Sub ToolStripButton3_Click(sender As System.Object, e As System.EventArgs) Handles ToolStripButton3.Click
        'おまけ
        '基盤地図25000表示
        'http://www.finds.jp/wsdocs/kibanwms/index.html.ja 農研機構のWMS配信HP
        '上記HPを参照してください。
        Dim lat As String = ToolStripTextBox1.Text
        Dim lng As String = ToolStripTextBox2.Text
        WebBrowser1.DocumentText = kibanGoogleMap(Double.Parse(lat), Double.Parse(lng))
 
    End Sub

WebBrowserに渡すhtmlテキストは、4つのfunctionで実装します。

GooleMap表示

まずは、手始めにGooleMapのhtml作成するGoogleMap function

Private Function GoogleMap(ByRef lat As Double, ByRef lng As Double) As String
 
        Dim txtHtml As String = ""
 
        'GoogleMapの表示
        txtHtml = ""
        txtHtml = txtHtml & "<html>" & vbCrLf
        txtHtml = txtHtml & "<head>" & vbCrLf
        txtHtml = txtHtml & "<meta name=""viewport"" content=""initial-scale=1.0, user-scalable=no"" />" & vbCrLf
        txtHtml = txtHtml & "<script type=""text/javascript"" src=""http://maps.google.com/maps/api/js?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.Trim & "," & lng.ToString.Trim & ");" & vbCrLf
        txtHtml = txtHtml & "       var myOptions = {" & vbCrLf
        txtHtml = txtHtml & "           zoom: 10," & vbCrLf
        txtHtml = txtHtml & "           center: latlng," & vbCrLf
        txtHtml = txtHtml & "           mapTypeId: google.maps.MapTypeId.ROADMAP," & vbCrLf
        txtHtml = txtHtml & "           overviewMapControl:true," & vbCrLf
        txtHtml = txtHtml & "           overviewMapControlOptions:{" & vbCrLf
        txtHtml = txtHtml & "               opened: true" & vbCrLf
        txtHtml = txtHtml & "           }" & vbCrLf
        txtHtml = txtHtml & "       };" & vbCrLf
        txtHtml = txtHtml & "       map = new google.maps.Map(document.getElementById(""map_canvas""), myOptions);" & vbCrLf
        txtHtml = txtHtml & "   }" & vbCrLf
 
        txtHtml = txtHtml & "   function setRoadmap() {" & vbCrLf
        txtHtml = txtHtml & "       map.setMapTypeId(google.maps.MapTypeId.ROADMAP);" & vbCrLf
        txtHtml = txtHtml & "   }" & vbCrLf
        txtHtml = txtHtml & "   function setSatellite() {" & vbCrLf
        txtHtml = txtHtml & "       map.setMapTypeId(google.maps.MapTypeId.SATELLITE);" & vbCrLf
        txtHtml = txtHtml & "   }" & vbCrLf
        txtHtml = txtHtml & "   function setTerrain() {" & vbCrLf
        txtHtml = txtHtml & "       map.setMapTypeId(google.maps.MapTypeId.TERRAIN);" & 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:90%""></div>" & vbCrLf
        txtHtml = txtHtml & "<p>" & vbCrLf
        txtHtml = txtHtml & "<input type=""button"" id=""roadmap"" value=""地図"" onclick=""setRoadmap()"" />" & vbCrLf
        txtHtml = txtHtml & "<input type=""button"" id=""satellite"" value=""航空写真"" onclick=""setSatellite()"" />" & vbCrLf
        txtHtml = txtHtml & "<input type=""button"" id=""terrain"" value=""地形"" onclick=""setTerrain()"" />" & vbCrLf
        txtHtml = txtHtml & "</p>" & vbCrLf
        txtHtml = txtHtml & "</body>" & vbCrLf
        txtHtml = txtHtml & "</html>"
 
        GoogleMap = txtHtml
    End Function

電子国土地図表示

電子国土地図オルソ画像のhtml作成するKokudoGooglemap function

Private Function KokudoGooglemap(ByRef lat As Double, ByRef lng As Double) As String
        Dim txtHtml As String = ""
 
        txtHtml = txtHtml & "<html>" & vbCrLf
        txtHtml = txtHtml & "<head>" & vbCrLf
        txtHtml = txtHtml & "<script src=""http://maps.google.co.jp/maps/api/js?v=3.9&sensor=false&language=ja""></script>" & vbCrLf
        txtHtml = txtHtml & "<script>" & vbCrLf
 
        txtHtml = txtHtml & "   function CJ4MapType() {" & vbCrLf
        txtHtml = txtHtml & "   }" & vbCrLf
        txtHtml = txtHtml & "   CJ4MapType.prototype.tileSize = new google.maps.Size(256,256);" & vbCrLf
        txtHtml = txtHtml & "   CJ4MapType.prototype.minZoom = 5;" & vbCrLf
        txtHtml = txtHtml & "   CJ4MapType.prototype.maxZoom = 17;" & vbCrLf
        txtHtml = txtHtml & "   CJ4MapType.prototype.name = ""電子国土"";" & vbCrLf
        txtHtml = txtHtml & "   CJ4MapType.prototype.alt = ""電子国土"";" & vbCrLf
        txtHtml = txtHtml & "   CJ4MapType.prototype.getTile = function(tile, zoom, ownerDocument) {" & vbCrLf
        txtHtml = txtHtml & "       var tx = tile.x + """";" & vbCrLf
        txtHtml = txtHtml & "       var ty = tile.y + """";" & vbCrLf
        txtHtml = txtHtml & "       var txp = 7 - tx.length;" & vbCrLf
        txtHtml = txtHtml & "       var typ = 7 - ty.length;" & vbCrLf
        txtHtml = txtHtml & "       if( txp > 0 ) {" & vbCrLf
        txtHtml = txtHtml & "           tx = ""0000000"".substr(0,txp) + tx;" & vbCrLf
        txtHtml = txtHtml & "       }" & vbCrLf
        txtHtml = txtHtml & "       if( typ > 0 ) {" & vbCrLf
        txtHtml = txtHtml & "           ty = ""0000000"".substr(0,typ) + ty;" & vbCrLf
        txtHtml = txtHtml & "       }" & vbCrLf
        txtHtml = txtHtml & "       var arr_dataset = [" & vbCrLf
        txtHtml = txtHtml & "           null, null, null, null, null,"
        txtHtml = txtHtml & "           ""JAIS"", ""JAIS"", ""JAIS"", ""JAIS"", "
        txtHtml = txtHtml & "           ""BAFD1000K"", ""BAFD1000K"", ""BAFD1000K"", "
        txtHtml = txtHtml & "           ""BAFD200K"", ""BAFD200K"", ""BAFD200K"", "
        txtHtml = txtHtml & "           ""DJBMM"", ""DJBMM"", ""DJBMM"" , ""FGD""" & vbCrLf
        txtHtml = txtHtml & "       ];" & vbCrLf
        txtHtml = txtHtml & "       var img = ownerDocument.createElement(""img"");" & vbCrLf
        txtHtml = txtHtml & "       img.style.width = this.tileSize.width + ""px"";" & vbCrLf
        txtHtml = txtHtml & "       img.style.height = this.tileSize.height + ""px"";" & vbCrLf
        txtHtml = txtHtml & "       if( arr_dataset[zoom] ) {" & vbCrLf
        txtHtml = txtHtml & "           var src = ""http://cyberjapandata.gsi.go.jp/sqras/all/"" +" & vbCrLf
        txtHtml = txtHtml & "           arr_dataset[zoom] + """ & "/latest/" & """ + zoom + ""/"";" & vbCrLf
        txtHtml = txtHtml & "           for( var n = 0; n < 6; n++ ) {" & vbCrLf
        txtHtml = txtHtml & "               src = src + tx.charAt(n) + ty.charAt(n) + ""/"";" & vbCrLf
        txtHtml = txtHtml & "           }" & vbCrLf
        txtHtml = txtHtml & "           src = src + tx + ty + "".png"";" & vbCrLf
        txtHtml = txtHtml & "           img.src = src;" & vbCrLf
        txtHtml = txtHtml & "       }" & vbCrLf
        txtHtml = txtHtml & "       return img;" & vbCrLf
        txtHtml = txtHtml & "   };" & vbCrLf
 
        txtHtml = txtHtml & "   var map;" & vbCrLf
        txtHtml = txtHtml & "   var cjNode;" & vbCrLf
        txtHtml = txtHtml & "   function init() {" & vbCrLf
        txtHtml = txtHtml & "       var options = {" & vbCrLf
        txtHtml = txtHtml & "           zoom: 10," & vbCrLf
        txtHtml = txtHtml & "           center: new google.maps.LatLng(" & lat.ToString.Trim & "," & lng.ToString.Trim & ")," & vbCrLf
        txtHtml = txtHtml & "           overviewMapControl:true," & vbCrLf
        txtHtml = txtHtml & "           scaleControl: true," & vbCrLf
        txtHtml = txtHtml & "           mapTypeControlOptions: {" & vbCrLf
        txtHtml = txtHtml & "               mapTypeIds: [""cj4japan"", google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID]," & vbCrLf
        txtHtml = txtHtml & "               opened: true" & vbCrLf
        txtHtml = txtHtml & "           }" & vbCrLf
        txtHtml = txtHtml & "       };" & vbCrLf
        txtHtml = txtHtml & "       map = new google.maps.Map(document.getElementById(""map""), options);" & vbCrLf
        txtHtml = txtHtml & "       map.mapTypes.set(""cj4japan"", new CJ4MapType());" & vbCrLf
        txtHtml = txtHtml & "       map.setMapTypeId(""cj4japan"");" & vbCrLf
        txtHtml = txtHtml & "   }" & vbCrLf
 
        txtHtml = txtHtml & "   google.maps.event.addDomListener(window, 'load', init);" & vbCrLf
        txtHtml = txtHtml & "</script>" & vbCrLf
 
        txtHtml = txtHtml & "<style>" & vbCrLf
        txtHtml = txtHtml & "#map {" & vbCrLf
        txtHtml = txtHtml & "margin: 0;" & vbCrLf
        txtHtml = txtHtml & "padding: 0;" & vbCrLf
        txtHtml = txtHtml & "width: 100%;" & vbCrLf
        txtHtml = txtHtml & "height: 100%;" & vbCrLf
        txtHtml = txtHtml & "}" & vbCrLf
        txtHtml = txtHtml & "</style>" & vbCrLf
 
        txtHtml = txtHtml & "</head>" & vbCrLf
        txtHtml = txtHtml & "<body>" & vbCrLf
        txtHtml = txtHtml & "<div id=""map""></div>" & vbCrLf
        txtHtml = txtHtml & "</body>" & vbCrLf
        txtHtml = txtHtml & "</html>" & vbCrLf
 
        KokudoGooglemap = txtHtml
 
    End Function

電子国土オルソ画像表示

電子国土地図オルソ画像のhtml作成するkokudoGoogleOverlay function

Private Function kokudoGoogleOverlay(ByRef lat As Double, ByRef lng As Double) As String
        Dim txtHtml As String = ""
 
        txtHtml = txtHtml & "<html>" & vbCrLf
        txtHtml = txtHtml & "<head>" & vbCrLf
        txtHtml = txtHtml & "<script src=""https://maps.googleapis.com/maps/api/js?v=3.9&sensor=false&language=ja""></script>" & vbCrLf
 
        txtHtml = txtHtml & "<script>" & vbCrLf
        txtHtml = txtHtml & "// 電子国土地図 V4.0" & vbCrLf
        txtHtml = txtHtml & "function CJ4MapType() {" & vbCrLf
        txtHtml = txtHtml & "   var dataset = [ " & vbCrLf
        txtHtml = txtHtml & "       null, null, null, null, null," & vbCrLf
        txtHtml = txtHtml & "       ""JAIS"",""JAIS"",""JAIS"",""JAIS""," & vbCrLf
        txtHtml = txtHtml & "       ""BAFD1000K"",""BAFD1000K"",""BAFD1000K""," & vbCrLf
        txtHtml = txtHtml & "       ""BAFD200K"",""BAFD200K"",""BAFD200K""," & vbCrLf
        txtHtml = txtHtml & "       ""DJBMM"",""DJBMM"",""DJBMM""," & vbCrLf
        txtHtml = txtHtml & "       ""FGD""" & vbCrLf
        txtHtml = txtHtml & "   ];" & vbCrLf
 
        txtHtml = txtHtml & "   CJ4MapType.prototype.tileSize = new google.maps.Size(256,256);" & vbCrLf
        txtHtml = txtHtml & "   CJ4MapType.prototype.minZoom = 5;" & vbCrLf
        txtHtml = txtHtml & "   CJ4MapType.prototype.maxZoom = 18;" & vbCrLf
        txtHtml = txtHtml & "   CJ4MapType.prototype.name = '電子国土';" & vbCrLf
        txtHtml = txtHtml & "   CJ4MapType.prototype.alt = 'Denshi Kokudo V4';" & vbCrLf
 
        txtHtml = txtHtml & "   CJ4MapType.prototype.getTile = function( tileXY, zoom, ownerDocument ) {" & vbCrLf
        txtHtml = txtHtml & "   var tileImage = ownerDocument.createElement('img');" & vbCrLf
 
        txtHtml = txtHtml & "   var xID =  tileXY.x + """";" & vbCrLf
        txtHtml = txtHtml & "   var yID =  tileXY.y + """";" & vbCrLf
        txtHtml = txtHtml & "   xID = ""0000000"".substr(0, (7- xID.length)) + xID;" & vbCrLf
        txtHtml = txtHtml & "   yID = ""0000000"".substr(0, (7- yID.length)) + yID;" & vbCrLf
 
        txtHtml = txtHtml & "   var fileName = xID + yID + "".png"";" & vbCrLf
        txtHtml = txtHtml & "   var dir = """";" & vbCrLf
        txtHtml = txtHtml & "   for( var i = 0; i < 6; i++ ) {" & vbCrLf
        txtHtml = txtHtml & "       dir += xID.charAt(i) + yID.charAt(i) + """ & "/" & """;" & vbCrLf
        txtHtml = txtHtml & "   }" & vbCrLf
 
        txtHtml = txtHtml & "   var url = ""http://cyberjapandata.gsi.go.jp/sqras/all/""" & vbCrLf
        txtHtml = txtHtml & "       + dataset[zoom] + """ & "/latest/" & """ + zoom + ""/"" + dir" & vbCrLf
        txtHtml = txtHtml & "       + fileName;" & vbCrLf
 
        txtHtml = txtHtml & "   tileImage.src = url;" & vbCrLf
        txtHtml = txtHtml & "   tileImage.style.width  = this.tileSize.width  + 'px';" & vbCrLf
        txtHtml = txtHtml & "   tileImage.style.height = this.tileSize.height + 'px';" & vbCrLf
 
        txtHtml = txtHtml & "   return tileImage;" & vbCrLf
        txtHtml = txtHtml & "   };" & vbCrLf
        txtHtml = txtHtml & "}" & vbCrLf
 
        txtHtml = txtHtml & "// 電子国土オルソ画像 V4.0" & vbCrLf
        txtHtml = txtHtml & "function CJ4OrthoMapType() {" & vbCrLf
 
        txtHtml = txtHtml & "   var dataset = [ " & vbCrLf
        txtHtml = txtHtml & "       null, null, null, null, null," & vbCrLf
        txtHtml = txtHtml & "       ""JAIS"",""JAIS"",""JAIS"",""JAIS""," & vbCrLf
        txtHtml = txtHtml & "       ""BAFD1000K"",""BAFD1000K"",""BAFD1000K""," & vbCrLf
        txtHtml = txtHtml & "       ""BAFD200K"",""BAFD200K"",""BAFD200K""," & vbCrLf
        txtHtml = txtHtml & "       ""DJBMO"",""DJBMO"",""DJBMO""," & vbCrLf
        txtHtml = txtHtml & "       ""FGD""" & vbCrLf
        txtHtml = txtHtml & "   ];" & vbCrLf
 
        txtHtml = txtHtml & "   CJ4OrthoMapType.prototype.tileSize = new google.maps.Size(256,256);" & vbCrLf
        txtHtml = txtHtml & "   CJ4OrthoMapType.prototype.minZoom = 15;" & vbCrLf
        txtHtml = txtHtml & "   CJ4OrthoMapType.prototype.maxZoom = 17;" & vbCrLf
        txtHtml = txtHtml & "   CJ4OrthoMapType.prototype.name = 'オルソ画像';" & vbCrLf
        txtHtml = txtHtml & "   CJ4OrthoMapType.prototype.alt = 'Denshi Kokudo V4 Ortho';" & vbCrLf
 
        txtHtml = txtHtml & "   CJ4OrthoMapType.prototype.getTile = function( tileXY, zoom, ownerDocument ) {" & vbCrLf
        txtHtml = txtHtml & "       var tileImage = ownerDocument.createElement('img');" & vbCrLf
 
        txtHtml = txtHtml & "       var xID =  tileXY.x + """";" & vbCrLf
        txtHtml = txtHtml & "       var yID =  tileXY.y + """";" & vbCrLf
        txtHtml = txtHtml & "       xID = ""0000000"".substr(0, (7- xID.length)) + xID;" & vbCrLf
        txtHtml = txtHtml & "       yID = ""0000000"".substr(0, (7- yID.length)) + yID;" & vbCrLf
 
        txtHtml = txtHtml & "       var fileName = xID + yID + "".jpg"";" & vbCrLf
        txtHtml = txtHtml & "       var dir = """";" & vbCrLf
        txtHtml = txtHtml & "       for( var i = 0; i < 6; i++ ) {" & vbCrLf
        txtHtml = txtHtml & "           dir += xID.charAt(i) + yID.charAt(i) + """ & "/" & """;" & vbCrLf
        txtHtml = txtHtml & "       }" & vbCrLf
 
        txtHtml = txtHtml & "       var url = ""http://cyberjapandata.gsi.go.jp/sqras/all/""" & vbCrLf
        txtHtml = txtHtml & "       + dataset[zoom] + """ & "/latest/" & """ + zoom + ""/"" + dir" & vbCrLf
        txtHtml = txtHtml & "       + fileName;" & vbCrLf
 
        txtHtml = txtHtml & "       tileImage.src = url;" & vbCrLf
        txtHtml = txtHtml & "       tileImage.style.width  = this.tileSize.width  + 'px';" & vbCrLf
        txtHtml = txtHtml & "       tileImage.style.height = this.tileSize.height + 'px';" & vbCrLf
 
        txtHtml = txtHtml & "       //tileImage.style.opacity = 0.4;" & vbCrLf
 
        txtHtml = txtHtml & "       return tileImage;" & vbCrLf
        txtHtml = txtHtml & "   };" & vbCrLf
        txtHtml = txtHtml & "}" & vbCrLf
 
        txtHtml = txtHtml & "var cj4Type = new CJ4MapType();" & vbCrLf
        txtHtml = txtHtml & "var cj4OrthoType = new CJ4OrthoMapType();" & vbCrLf
 
        txtHtml = txtHtml & "var cj4LOGO = null;" & vbCrLf
        txtHtml = txtHtml & "var osmCredit = null;" & vbCrLf
 
        txtHtml = txtHtml & "var map;" & vbCrLf
        txtHtml = txtHtml & "var zoomLevel = 15;" & vbCrLf
        txtHtml = txtHtml & "var mapCenter = new google.maps.LatLng(" & lat.ToString.Trim & "," & lng.ToString.Trim & ");" & vbCrLf
 
        txtHtml = txtHtml & "function init_google_map() {" & vbCrLf
 
        txtHtml = txtHtml & "   var mapOptions = {" & vbCrLf
        txtHtml = txtHtml & "       zoom: zoomLevel," & vbCrLf
        txtHtml = txtHtml & "       center: mapCenter," & vbCrLf
        txtHtml = txtHtml & "       streetViewControl: false," & vbCrLf
        txtHtml = txtHtml & "       overviewMapControl:true," & vbCrLf
        txtHtml = txtHtml & "       scaleControl: true," & vbCrLf
        txtHtml = txtHtml & "       mapTypeId: google.maps.MapTypeId.ROADMAP," & vbCrLf
        txtHtml = txtHtml & "       mapTypeControlOptions: {" & vbCrLf
        txtHtml = txtHtml & "       mapTypeIds: [ google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, 'cj4', 'ortho' ]," & vbCrLf
        txtHtml = txtHtml & "       style: google.maps.MapTypeControlStyle.DROPDOWN_MENU" & vbCrLf
        txtHtml = txtHtml & "       }" & vbCrLf
        txtHtml = txtHtml & "   };" & vbCrLf
 
        txtHtml = txtHtml & "var mapDiv = document.getElementById('map_canvas');" & vbCrLf
        txtHtml = txtHtml & "map = new google.maps.Map( mapDiv, mapOptions );" & vbCrLf
        txtHtml = txtHtml & "map.mapTypes.set( 'cj4', cj4Type );" & vbCrLf
        txtHtml = txtHtml & "map.mapTypes.set( 'ortho', cj4OrthoType );" & vbCrLf
 
        txtHtml = txtHtml & "}" & vbCrLf
        txtHtml = txtHtml & "</script>" & vbCrLf
 
        txtHtml = txtHtml & "</head>" & vbCrLf
        txtHtml = txtHtml & "<body onload=""init_google_map()"">" & vbCrLf
        txtHtml = txtHtml & "<div id=""map_canvas"" style=""width: 100%; height: 100%;"">map div</div>" & vbCrLf
        txtHtml = txtHtml & "</body>" & vbCrLf
        txtHtml = txtHtml & "</html>" & vbCrLf
 
        kokudoGoogleOverlay = txtHtml
 
    End Function

基盤地図25000表示

基盤地図25000タイル画像のhtml作成するkibanGoogleMap function
詳しくは、基盤地図25000WMS配信サービスを覗いてみてください。

Private Function kibanGoogleMap(ByRef lat As Double, ByRef lng As Double) As String
 
        'Goolemapに基盤地図25000を表示
        Dim txtHtml As String = ""
        txtHtml = txtHtml & "<html>" & vbCrLf
        txtHtml = txtHtml & "<head>" & vbCrLf
        txtHtml = txtHtml & "<script src=""http://maps.google.com/maps/api/js?v=3.9&sensor=false"" type=""text/javascript""></script>" & vbCrLf
        txtHtml = txtHtml & "<script>" & vbCrLf
        txtHtml = txtHtml & "   function Kiban25000MapType() {" & vbCrLf
        txtHtml = txtHtml & "   }" & vbCrLf
        txtHtml = txtHtml & "   Kiban25000MapType.prototype.tileSize = new google.maps.Size(256,256);" & vbCrLf
        txtHtml = txtHtml & "   Kiban25000MapType.prototype.maxZoom = 17;" & vbCrLf
        txtHtml = txtHtml & "   Kiban25000MapType.prototype.name = ""基盤地図"";" & vbCrLf
        txtHtml = txtHtml & "   Kiban25000MapType.prototype.alt = ""基盤地図情報 (縮尺レベル25000)"";" & vbCrLf
        txtHtml = txtHtml & "   Kiban25000MapType.prototype.getTile = function(tile, zoom, ownerDocument) {" & vbCrLf
        txtHtml = txtHtml & "       var img = ownerDocument.createElement(""img"");" & vbCrLf
        txtHtml = txtHtml & "       img.style.width = this.tileSize.width + ""px"";" & vbCrLf
        txtHtml = txtHtml & "       img.style.height = this.tileSize.height + ""px"";" & vbCrLf
        txtHtml = txtHtml & "       img.src = ""http://www.finds.jp/ws/tmc/1.0.0/KBN25000ANF-900913-L/""+zoom+""/""+tile.x+""/""+tile.y+"".png"";" & vbCrLf
        txtHtml = txtHtml & "       return img;" & vbCrLf
        txtHtml = txtHtml & "   };" & vbCrLf
        txtHtml = txtHtml & "   var kiban25000MapType = new Kiban25000MapType();" & vbCrLf
        txtHtml = txtHtml & "   var map;" & vbCrLf
        txtHtml = txtHtml & "   function init() {" & vbCrLf
        txtHtml = txtHtml & "       var map = new google.maps.Map(" & vbCrLf
        txtHtml = txtHtml & "           document.getElementById(""map""), {" & vbCrLf
        txtHtml = txtHtml & "           zoom: 14," & vbCrLf
        txtHtml = txtHtml & "           streetViewControl: false," & vbCrLf
        txtHtml = txtHtml & "           overviewMapControl:true," & vbCrLf
        txtHtml = txtHtml & "           scaleControl: true," & vbCrLf
        txtHtml = txtHtml & "           center: new google.maps.LatLng(" & lat.ToString.Trim & "," & lng.ToString.Trim & ")," & vbCrLf
        txtHtml = txtHtml & "           mapTypeControlOptions: {" & vbCrLf
        txtHtml = txtHtml & "               mapTypeIds: [""kiban25000"", google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID]," & vbCrLf
        txtHtml = txtHtml & "               style: google.maps.MapTypeControlStyle.DROPDOWN_MENU" & vbCrLf
        txtHtml = txtHtml & "               }" & vbCrLf
        txtHtml = txtHtml & "           }" & vbCrLf
 
        txtHtml = txtHtml & "       );" & vbCrLf
        txtHtml = txtHtml & "       map.mapTypes.set(""kiban25000"", kiban25000MapType);" & vbCrLf
        txtHtml = txtHtml & "       map.setMapTypeId(""kiban25000"");" & vbCrLf
        txtHtml = txtHtml & "   }" & vbCrLf
        txtHtml = txtHtml & "</script>" & vbCrLf
        txtHtml = txtHtml & "<style type=""text/css"">" & vbCrLf
        txtHtml = txtHtml & "   #map {" & vbCrLf
        txtHtml = txtHtml & "       width: 100%;" & vbCrLf
        txtHtml = txtHtml & "       height: 100%;" & vbCrLf
        txtHtml = txtHtml & "       border: solid 1px #999;" & vbCrLf
        txtHtml = txtHtml & "   }" & vbCrLf
        txtHtml = txtHtml & "   #map #copyright {" & vbCrLf
        txtHtml = txtHtml & "       padding: 2px;" & vbCrLf
        txtHtml = txtHtml & "       background: #fff;" & vbCrLf
        txtHtml = txtHtml & "   }" & vbCrLf
        txtHtml = txtHtml & "</style>" & vbCrLf
        txtHtml = txtHtml & "</head>" & vbCrLf
        txtHtml = txtHtml & "<body onload=""init()"">" & vbCrLf
        txtHtml = txtHtml & "<div id=""map"" style=""width: 100%; height: 100%; border: solid 1px #999;""></div>" & vbCrLf
        txtHtml = txtHtml & "<p>このアプリケーションは承認番号 平20業使、第449号「基盤地図情報25000 WMS配信サービス」にアクセスします" & vbCrLf
        txtHtml = txtHtml & "(<a href=""http://www.finds.jp/wsdocs/kibanwms/index.html"">配信元</a>)</p>" & vbCrLf
        txtHtml = txtHtml & "</body>" & vbCrLf
        txtHtml = txtHtml & "</html>" & vbCrLf
 
        kibanGoogleMap = txtHtml
    End Function

プログラムの実行

blog.godo-tys.jp_wp-content_gallery_denshikokudo_image06.jpg
GoogleMapの表示

blog.godo-tys.jp_wp-content_gallery_denshikokudo_image07.jpg
GoogleMapで電子国土地図表示

blog.godo-tys.jp_wp-content_gallery_denshikokudo_image08.jpg
GoogleMapで電子国土オルソ画像表示

blog.godo-tys.jp_wp-content_gallery_denshikokudo_image08.jpg
GoogleMapで基盤地図25000WMS画像表示

それぞれ、入力した緯度経度を中心に表示します。

簡単に表示することができました。これを応用してshape file(kml化して)を重ねるとか、他のwmsと重ねるとかできそうですね。

次回は、WebBrowserのGoogleMapsをvbから値を取得してみます。できるかなぁ???
C# WebBrowserでJavaScript変数を簡易取得を参考にすればできそうですね。

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

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

参考にしたHP
http://portal.cyberjapan.jp/portalsite/version/v4/samples.html
http://d.hatena.ne.jp/mas0205/
http://d.hatena.ne.jp/yellow_73/20120801
http://y2web.net/blog/

Social Widgets powered by AB-WebLog.com.